Concepts

React either implements or uses a lot of abstractions over vanilla web development. This makes it easy to get lost in the sea of concepts and terminologies.

In this section we will cover the most important concepts and terminologies that you need to know to get started with React.

JSX

JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript.

By being similar to HTML, JSX makes it easier to write and read markup code in React (and other frameworks that use JSX).

In the scope of React, JSX produces React "elements"

Some examples are:

const element = <h1>Hello, world!</h1>;

We can also add JavaScript expressions inside JSX by wrapping them in curly braces.

const name = 'John Doe';
const element = <h1>Hello, {name}</h1>;

And finally we can attach listeners to elements.

const Example = () => {
  return (
    <div>
      <button onClick={() => alert('Hello world')}>Click me</button>
    </div>
  );
};

Note that JSX is not a requirement to write React applications. You can use React without JSX, but you would be losing a lot of the developer experience that JSX provides.

Components

Components are the building blocks of React applications. They are small, reusable pieces of code that return a React element to be rendered to the page.

They can be written as a function or a class. However, the class declaration is old fasion and should be avoided.

// Function component
const Example = () => {
  return <div>Example</div>;
};

// or using implicit return in arrow functions
const Example = () => <div>Example</div>;

State

State is a plain JavaScript object that contains some information that may change over the lifetime of a component.

When a state is mutated react will re-render the component and all its children.

In the following example we have a state called count that is initialized to 0. When the button is clicked, the state is updated and the component is re-rendered.

Note that for the example we are using a hook to declare state. We will cover hooks later in this section.

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

VDom

React uses what is called a "Virtual DOM". This is a basically a JS object that represents the DOM.

With this VDom we can compare the current state of the DOM with the desired state of the DOM, allowing react to only update the necessary of our application (sort of).

An easy way to imagine the VDom is like a tree data structure. Each component in the tree can have multiple children.

When a new state is set, React will compare the new state with the old state and update the DOM by checking in the VDom what nodes in the tree need to be updated and then update all the branches that contain the node (and the node itself).

VDom Example

If you want to learn more about the VDom, you can check out this article from Mosh Hamedani.

Hooks

Hooks are functions that let you "hook into" React state and lifecycle features from function components.

The most common hooks are useState and useEffect.

We sort of already saw useState. It is used to create a state in a functional component and providing the current value and mutating function.

useEffect is used to perform side effects in function components. By listening to values in certain states we can determine if we want it to be executed.

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
    // The dependency for this hook is count, meaning that it will only be executed
    // when the count state changes
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

One more important thing about useEffect is the return statement. If we return a function from the useEffect hook, it will be executed when the component is unmounted or when the component is re-rendered and the dependency is changed.

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
    // The dependency for this hook is count, meaning that it will only be executed
    // when the count state changes
    return () => {
      console.log('Cleaning up');
      // This function will be executed when the component is unmounted
      // or re-redendered
    };
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

We recommend you read React's official documentation to learn more about hooks. You can also check out the beta React documentation for shorter and more concise documentation.

Props

Props are the way components receive data from their parents. They are passed as attributes to the component.

const Example = ({ name }) => {
  return <div>Hello {name}</div>;
};

const App = () => {
  return <Example name="John" />;
};

They are also one way data flow. This means that the parent component can pass data to the child component, but the child component cannot change the data.

All React components must act like pure functions with respect to their props.

Eagerworks Training Program