Following the official React documentation, these are the core concepts I learned in the "Getting Started" section.

Creating Components

React apps are built from components — functions that return JSX markup. The simplest component is just a function that returns a button:

function MyButton() {
  return (
    <>
      <button>I'm a button</button>
    </>
  );
}

export default MyButton;

Nesting Components

Components can be composed together. Here an AboutPage component nests MyButton:

function AboutPage() {
  return (
  <>
    <h1>About</h1>
    <p>Hello there.<br />How do you do?</p>
    < MyButton />
  </>
  );
}

export default AboutPage;

Displaying Data with JSX

You can embed JavaScript expressions in JSX using curly braces. This profile component reads from a user object and renders the name and avatar image dynamically:

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <br />
      <img
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
          borderRadius: '50%',
        }}
      />
    </>
  );
}

export default Profile;

Rendering Lists

Use .map() to transform an array of data into a list of elements. Fruits are colored magenta, vegetables are green:

const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

const listItems = products.map(product =>
  <li
    key={product.id}
    style={{
      color: product.isFruit ? 'magenta' : 'darkgreen'
    }}
  >
    {product.title}
  </li>
);

function RenderList() {
  return (
    <>
      <div>
        <ul>{listItems}</ul>
      </div>
    </>
  );
}

export default RenderList;

Responding to events and updating the screen

You can respond to events by declaring event handler functions inside your components:

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

To remember some information and display it, add state to your component. Now you can declare a state variable

import { useState } from 'react';

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1); // change the state by calling setCount
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

Each component will get its own state, if you render it multiple times

import { useState } from 'react';

export default function MyCounter() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

Sharing data between components

To make multiple components display the same data and update together, you need to move the state from the individual buttons “upwards” to the closest component containing all of them.

1. Move the state up to MyCounter
2. Pass the state down from MyCounter to each component (MyButton), together with the shared click handler. -> The information you pass down like this is called props.
3. Change MyButton to read the props you have passed from its parent component:

import { useState } from 'react';

export default function MyCounter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

Resources

• React Learn Documentation