React BEGINNER

React Components & JSX

Complete guide to JSX syntax, conditional rendering, lists, components, props, and React patterns

12 min read

reactjsxcomponentspropsconditional-renderinglists

Official Docs

Component Essentials

Core concepts for building React components

Function Components

Modern way to create React components

📄 Codejavascript

🟢 Essential - Use function components for all new code

💡 Component names must start with capital letter

📌 Returns JSX to describe the UI

componentsessential

Basic Props

Pass data to components via props

📄 Codejavascript

🟢 Essential - Props make components reusable

💡 Props are read-only, never modify them

📌 Pass any JavaScript value as a prop

propsessential

Default Props

Set default values for optional props

javascript

💡 Use = in destructuring for clean defaults

📌 Default values only used if prop is undefined

⚡ Defaults make components more flexible

propsdefaults

Children Prop

Pass JSX content between component tags

📄 Codejavascript

🟢 Essential - Children enables component composition

💡 Anything between tags becomes children prop

📌 Can be text, elements, or other components

propschildrencomposition

Event Handlers

Handle user interactions with events

📄 Codejavascript

🟢 Essential - Events enable interactivity

💡 Use arrow functions to pass parameters

⚠️ Don't call the function: onClick={handleClick} not onClick={handleClick()}

eventshandlersessential

Component Import/Export

Organize components in separate files

javascript

💡 One component per file is common practice

📌 Use default export for main component

⚡ Named exports for utility components

importexportmodules

JSX Fundamentals

JavaScript XML syntax for describing UI in React

JSX Basics

JavaScript XML syntax for React

📄 Codejavascript

🟢 Essential - JSX is JavaScript, not HTML

💡 Use parentheses for multi-line JSX

📌 Must return a single root element

jsxsyntaxessential

JSX Expressions

Embed JavaScript expressions in JSX

📄 Codejavascript

🟢 Essential - Use {} to embed any JS expression

💡 Expressions produce values, statements don't

⚠️ Can't use if/for/while directly, use ternary or map

jsxexpressionsessential

JSX Attributes

HTML attributes in JSX use camelCase

📄 Codejavascript

💡 Use className instead of class

📌 Use htmlFor instead of for

⚡ All attributes use camelCase naming

jsxattributes

Inline Styles

Apply styles using JavaScript objects

📄 Codejavascript

💡 Style attribute takes an object, not string

📌 Use camelCase for CSS properties

⚡ Values are strings or numbers (px assumed)

jsxstylescss

Conditional Rendering

Show/hide elements based on conditions

📄 Codejavascript

🟢 Essential - && shows element if condition is true

💡 Ternary (? :) for if-else rendering

⚠️ Remember: 0 and empty string render, null/undefined don't

jsxconditionalessential

Lists & Keys

Render arrays with map and unique keys

javascript

🟢 Essential - Always include key prop in lists

💡 Keys help React track changes efficiently

⚠️ Keys must be unique among siblings

jsxlistskeysessential

Fragments

Return multiple elements without wrapper

📄 Codejavascript

💡 Fragments avoid extra wrapper divs

📌 Use <> </> shorthand in most cases

⚡ Only Fragment accepts key prop

jsxfragments

JSX Comments

Add comments in JSX code

📄 Codejavascript

💡 JSX comments must be inside {/* */}

📌 Regular // comments work outside JSX

⚡ Comments don't appear in rendered HTML

jsxcomments

Forms & Controlled Components

Build interactive forms with controlled and uncontrolled components

Controlled Inputs

Form inputs controlled by React state

📄 Codejavascript

🟢 Essential - React controls the input value

💡 Value comes from state, onChange updates state

📌 Single source of truth for form data

formscontrolledessential

Form Submission

Handle form submit events

📄 Codejavascript

⚠️ Always preventDefault() on form submit

💡 Form validates before onSubmit fires

📌 Button type="submit" triggers form submission

formssubmit

Select & Textarea

Controlled select dropdowns and textareas

📄 Codejavascript

💡 Select uses value prop, not selected attribute

📌 Textarea uses value prop, not children

⚡ Same pattern as input elements

formsselecttextarea

Checkboxes & Radio

Handle checkbox and radio button inputs

📄 Codejavascript

💡 Checkbox uses checked prop and e.target.checked

📌 Radio buttons share same state variable

⚡ Name attribute groups radio buttons

formscheckboxradio

Component Patterns & Types

Advanced patterns for type safety and component composition

PropTypes & TypeScript

Add type checking to React components

typescript

⚛️ PropTypes for runtime checking, TypeScript for compile-time

💡 TypeScript provides better IDE support and refactoring

📌 Use discriminated unions for component variants

⚠️ PropTypes only work in development mode

⚡ Generic components provide type safety with flexibility

Refs & forwardRef

Access DOM elements and pass refs through components

javascript

⚛️ Refs provide access to DOM elements imperatively

💡 Use forwardRef to pass refs through components

📌 Refs persist values between renders without causing re-render

⚠️ Don't overuse refs - prefer declarative React patterns

⚡ Callback refs useful for dynamic ref management

Optimization & Advanced Features

Performance optimization and advanced React features

React.memo & Optimization

Optimize component re-renders with memoization

javascript

⚛️ React.memo prevents re-renders when props haven't changed

💡 Use useMemo for expensive computations

📌 useCallback for stable function references

⚠️ Premature optimization can hurt maintainability

⚡ Profile first to identify actual performance issues

Styling Components

Different approaches to styling React components

javascript

⚛️ Choose styling approach based on project needs

💡 CSS Modules provide scoped styles without runtime cost

📌 CSS-in-JS offers dynamic styling with JS power

⚠️ Inline styles can't use pseudo-classes or media queries

⚡ Utility-first CSS (Tailwind) for rapid development

More React Cheat Sheets

React Components & JSX

Table of Contents

Component Essentials

Function Components

Basic Props

Default Props

Children Prop

Event Handlers

Component Import/Export

JSX Fundamentals

JSX Basics

JSX Expressions

JSX Attributes

Inline Styles

Conditional Rendering

Lists & Keys

Fragments

JSX Comments

Forms & Controlled Components

Controlled Inputs

Form Submission

Select & Textarea

Checkboxes & Radio

Component Patterns & Types

PropTypes & TypeScript

Refs & forwardRef

Optimization & Advanced Features

React.memo & Optimization

Styling Components

More React Cheat Sheets

React Hooks

React Custom Hooks

React Design Patterns