Main Concepts and Terminology of React

Hello, students! In the previous topic, we learned about the importance and use of React in web development.

In this topic, let’s talk about the main concepts and terminology of React.

Components

Components are the foundation of React. They are reusable building blocks that can be used to create a part of the user interface.

Each component is responsible for rendering its own part of the DOM.

Example of a React component:

const MyComponent = () => {
  return (
    <div>
      <h1>My component</h1>
    </div>
  );
};

This component renders a header with the text “My component.”

State

State is a set of data that can be changed over time.

Components can use state to maintain the state of the user interface.

Example of a React component with state:

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Number of items: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Add item</button>
    </div>
  );
};

This component renders a header with the number of items in the shopping cart.

The “Add item” button increases the number of items in the shopping cart.

Props

Props are properties that can be passed to components.

Props can be used to share data between components.

Example of a React component with props:

const MyComponent = ({ title }) => {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
};

This component renders a header with the text from the title prop.

JSX

JSX is a syntax that allows combining HTML and JavaScript to create React components.

JSX makes the creation of React components easier and more concise.

Example of JSX code:

const MyComponent = () => {
  return (
    <div>
      <h1>My component</h1>
    </div>
  );
};

This JSX code renders a header with the text “My component.”

Conclusion

These were just a few of the main concepts and terminology of React.

In the next modules, we’ll learn more about these concepts and how to use them to create React applications.

Until then, keep studying!