React Essentials

This section covers the essential React concepts you’ll use in almost every app you build.

Components

Components are the building blocks of React applications. They are reusable, self-contained pieces of UI.

Creating Your First Component

Header.jsx

function Header() {
  const description = 'Fundamental';

  return (
    <header>
      <img src={reactImg} alt="Stylized atom" />
      <h1>React Essentials</h1>
      <p>
        {description} React concepts you will need for almost any app you are
        going to build!
      </p>
    </header>
  );
}

Component names must start with a capital letter to distinguish them from HTML elements.

Dynamic Values in JSX

Use curly braces {} to output dynamic values:

const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];

function genRandomInt(max) {
  return Math.floor(Math.random() * (max + 1));
}

function Header() {
  const description = reactDescriptions[genRandomInt(2)];

  return (
    <header>
      <h1>React Essentials</h1>
      <p>
        {description} React concepts you will need for almost any app!
      </p>
    </header>
  );
}

Storing Components in Files

Create a component file

components/CoreConcept.jsx

export default function CoreConcept({ image, title, description }) {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

Import and use it

App.jsx

import CoreConcept from './components/CoreConcept.jsx';

function App() {
  return (
    <ul>
      <CoreConcept
        title="Components"
        description="The core UI building block."
        image={componentsImg}
      />
    </ul>
  );
}

Props

Props (properties) allow you to pass data from parent to child components.

Passing Props

App.jsx

import componentsImg from './assets/components.png';

function CoreConcept(props) {
  return (
    <li>
      <img src={props.image} alt={props.title} />
      <h3>{props.title}</h3>
      <p>{props.description}</p>
    </li>
  );
}

function App() {
  return (
    <div>
      <main>
        <section id="core-concepts">
          <h2>Core Concepts</h2>
          <ul>
            <CoreConcept
              title="Components"
              description="The core UI building block."
              image={componentsImg}
            />
          </ul>
        </section>
      </main>
    </div>
  );
}

Alternative Props Syntax

Object Destructuring
Spread Operator
Props Object

function CoreConcept({ image, title, description }) {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

const CORE_CONCEPTS = [
  {
    title: 'Components',
    description: 'The core UI building block.',
    image: componentsImg
  }
];

<CoreConcept {...CORE_CONCEPTS[0]} />

function CoreConcept(props) {
  return (
    <li>
      <img src={props.image} alt={props.title} />
      <h3>{props.title}</h3>
      <p>{props.description}</p>
    </li>
  );
}

Children Prop

The special children prop contains content between component tags:

TabButton.jsx

export default function TabButton({ children }) {
  return (
    <li>
      <button>{children}</button>
    </li>
  );
}

App.jsx

<TabButton>Components</TabButton>
<TabButton>JSX</TabButton>
<TabButton>Props</TabButton>

The children prop is a special prop that React provides automatically.

Events

Reacting to Events

Handle user interactions with event props:

TabButton.jsx

export default function TabButton({ children }) {
  function handleClick() {
    console.log('Hello World!');
  }

  return (
    <li>
      <button onClick={handleClick}>{children}</button>
    </li>
  );
}

Pass the function reference, not the result: onClick={handleClick} not onClick={handleClick()}

Passing Functions as Props

TabButton.jsx

export default function TabButton({ children, onSelect }) {
  return (
    <li>
      <button onClick={onSelect}>{children}</button>
    </li>
  );
}

App.jsx

function App() {
  function handleSelect(selectedButton) {
    console.log(selectedButton);
  }

  return (
    <menu>
      <TabButton onSelect={() => handleSelect('components')}>
        Components
      </TabButton>
      <TabButton onSelect={() => handleSelect('jsx')}>JSX</TabButton>
    </menu>
  );
}

State

State allows components to create and manage their own data that can change over time.

Managing State with useState

App.jsx

import { useState } from 'react';

function App() {
  const [selectedTopic, setSelectedTopic] = useState('Please click a button');
  
  function handleSelect(selectedButton) {
    setSelectedTopic(selectedButton);
  }

  console.log('APP COMPONENT EXECUTING');

  return (
    <div>
      <section id="examples">
        <h2>Examples</h2>
        <menu>
          <TabButton onSelect={() => handleSelect('components')}>
            Components
          </TabButton>
          <TabButton onSelect={() => handleSelect('jsx')}>JSX</TabButton>
          <TabButton onSelect={() => handleSelect('props')}>Props</TabButton>
          <TabButton onSelect={() => handleSelect('state')}>State</TabButton>
        </menu>
        {selectedTopic}
      </section>
    </div>
  );
}

Import useState

import { useState } from 'react';

Call useState with initial value

const [selectedTopic, setSelectedTopic] = useState('Please click a button');

Returns an array with:

Current state value
Function to update it

Update state

setSelectedTopic('components');

Calling the setter triggers a component re-render.

How NOT to Update the UI

This won’t work - React doesn’t track regular variables:

function App() {
  let selectedTopic = 'Please click a button';
  
  function handleSelect(selectedButton) {
    selectedTopic = selectedButton; // Won't trigger re-render!
  }
  
  return <div>{selectedTopic}</div>;
}

You must use state for reactive values.

Rendering Content Conditionally

Conditional Rendering Patterns

Ternary Operator
Logical AND
Variable

{selectedTopic ? (
  <div>
    <h3>{EXAMPLES[selectedTopic].title}</h3>
    <p>{EXAMPLES[selectedTopic].description}</p>
  </div>
) : (
  <p>Please select a topic.</p>
)}

{!selectedTopic && <p>Please select a topic.</p>}
{selectedTopic && (
  <div>
    <h3>{EXAMPLES[selectedTopic].title}</h3>
  </div>
)}

let tabContent = <p>Please select a topic.</p>;

if (selectedTopic) {
  tabContent = (
    <div>
      <h3>{EXAMPLES[selectedTopic].title}</h3>
    </div>
  );
}

return <div>{tabContent}</div>;

Outputting List Data

Use the map() method to transform arrays into lists of components:

const CORE_CONCEPTS = [
  { title: 'Components', description: 'The core UI building block.', image: componentsImg },
  { title: 'JSX', description: 'Return HTML from JavaScript.', image: jsxImg },
  { title: 'Props', description: 'Pass data to components.', image: propsImg },
  { title: 'State', description: 'Manage component data.', image: stateImg },
];

function App() {
  return (
    <ul>
      {CORE_CONCEPTS.map((concept) => (
        <CoreConcept key={concept.title} {...concept} />
      ))}
    </ul>
  );
}

Always provide a key prop when rendering lists. Keys help React identify which items have changed.

Dynamic Styles

Apply styles conditionally:

<button
  className={activeContentIndex === 0 ? "active" : ""}
  onClick={() => setActiveContentIndex(0)}
>
  Why React?
</button>

Key Takeaways

Components

Reusable building blocks that return JSX

Props

Pass data from parent to child components

State

Manage component data that changes over time

Events

Handle user interactions with event handlers

Next Steps

Essentials Deep Dive

Explore advanced React essentials topics and patterns

Get Started

Core Concepts

Styling & UI

State Management

Advanced Topics

NextJS

Testing & TypeScript

Production

Practice Projects

Components

Creating Your First Component

Dynamic Values in JSX

Storing Components in Files

Props

Passing Props

Alternative Props Syntax

Children Prop

Events

Reacting to Events

Passing Functions as Props

State

Managing State with useState

How NOT to Update the UI

Rendering Content Conditionally

Conditional Rendering Patterns

Outputting List Data

Dynamic Styles

Key Takeaways

Components

Props

State

Events

Next Steps

Essentials Deep Dive

Build docs developers (and LLMs) love

Get Started

Core Concepts

Styling & UI

State Management

Advanced Topics

NextJS

Testing & TypeScript

Production

Practice Projects

​Components

​Creating Your First Component

​Dynamic Values in JSX

​Storing Components in Files

​Props

​Passing Props

​Alternative Props Syntax

​Children Prop

​Events

​Reacting to Events

​Passing Functions as Props

​State

​Managing State with useState

​How NOT to Update the UI

​Rendering Content Conditionally

​Conditional Rendering Patterns

​Outputting List Data

​Dynamic Styles

​Key Takeaways

Components

Props

State

Events

​Next Steps

Essentials Deep Dive

Build docs developers (and LLMs) love

Components

Creating Your First Component

Dynamic Values in JSX

Storing Components in Files

Props

Passing Props

Alternative Props Syntax

Children Prop

Events

Reacting to Events

Passing Functions as Props

State

Managing State with useState

How NOT to Update the UI

Rendering Content Conditionally

Conditional Rendering Patterns

Outputting List Data

Dynamic Styles

Key Takeaways

Next Steps