Learn React in 5 minutes

Can you learn React in five minutes? Well, it depends on what you mean by "learn React". In this blog post you will "learn the basics of React" in five minutes, by going over a few of the core concepts of React.

Click the image below to watch the YouTube video version of this blog post:

What is React?

React is a JavaScript library that is widely used for building user interfaces, particularly for single-page applications. It allows you to create reusable components that can be rendered on the web, mobile, or desktop. Today, it is one of the most popular tools for front-end web development.

So, if you're interested in learning React, where do you start?

JavaScript

First, it's important to have a solid understanding of JavaScript. React is built with JavaScript, so you'll need to be comfortable with the basics of the language before you dive into React.

Once you've got a handle on JavaScript, the next step is to familiarize yourself with the React syntax and concepts.

Components

One of the core principles of React is that a component should be a self-contained piece of code that is easy to understand and maintain.

This is what a component looks like:

function MyComponent() {
  return (
    <div>
      <h1>My Component</h1>
    </div>
  );
}

A component is a JavaScript function that returns a React element. It can be a simple function that returns a single element, or it can be a more complex component that returns multiple elements or has state.

Data flows

In React, data flows in a single direction from the parent component to the child component, following the unidirectional data flow principle. This helps make applications easier to reason about and debug.

Parent components can pass data to child components using props, below is an example of a child compoinent that receives data from a parent component:

function MyComponent() {
  return (
    <div>
      <Title title='My Component' />
    </div>
  );
}

function Title({ title }) {
  return <h1>{title}</h1>;
}

Props are used to keep track of data that is passed from a parent component to a child component. They are immutable, which means that they cannot be changed once they are passed to a child component.

State

State is a special type of data that is managed by a component. It is used to store data that is specific to a component and it can be passed on to other components lower in the tree. State is often used to store data that is used to render the UI, such as a list of items or a user's name.

State can be managed using the useState hook, which is a function that returns an array with two values: the current state and a function that can be used to update the state:

import React, { useState } from 'react';

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

  return (
    <div>
      <Counter count={count} setCount={setCount} />
    </div>
  );
}

function Counter({ count, setCount }) {
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Virtual DOM

React uses a virtual DOM (Document Object Model) to optimize updates and minimize the number of DOM mutations. This makes applications built with React faster and more efficient.

The Virtual DOM is a virtual representation of a user interface, which is kept in memory and synchronized with the "real" DOM by for example ReactDOM.

Ecosystem

React also has a large ecosystem of tools and libraries that can be leveraged to build amazing applications. Some popular ones include Tanstack Query for data fetching, Tailwind for styling and Next.js or Remix for server-rendered React applications.

Building Projects

It's also a good idea to start building some small projects with React to get a feel for how it works in practice. There are plenty of resources available online that can help you get started with your first React project, including templates and starter kits.

Need inspiration for a project?

you might want to have a look at my book React Projects. Which walks you through all the React concepts in 10 chapters. You'll build 10 unique projects. These are a "movie list" (like IMDB), a developer portfolio website using Github, a mobile game application and much more.

Keep learning

Finally, keep in mind that learning React is an ongoing process. As you build more complex projects and encounter new challenges, you'll continue to learn and improve your skills.

The comings months I'll livestreams on building these projects - and the first ones are already uploaded. So if you're interested in learning React, make sure to subscribe to my YouTube channel.

> Subscribe to my YouTube channel

Or find me on Twitter at @gethackteam. I'd love to hear from you!