Why and how to get started with React in 2021

What is React?

According to the official website, React is ...

A JavaScript library for building user interfaces

React has been open-sourced by Facebook in 2013 and is one of the most popular front-end libraries today. Many companies, like Twitter, Netflix, Microsoft, Paypal, and Airbnb, just to name a few, use it to power their front-end experiences.

So, if you've been online today, it's very likely that you've been using applications powered by React.js.

According to the 2020 State of JS survey, React has been constantly leading in terms of usage. It's was also ranked either 1st or 2nd in terms of developer satisfaction over the last years. Have a look at the two charts to see how React compares to other front-end frameworks according to this survey.

Usage

Satisfaction

Why is React so popular?

React makes it incredibly easy for developers to create interactive UIs by using declarative and reusable components.

Components manage their own state and can be composed to build complex UIs. Logic within components is implemented with JavaScript and rendered as a UI element using a powerful syntax called JSX, which is an XML-like syntax extension to JavaScript.

React takes care of efficiently updating and rendering the components only when needed, i.e. only when the data changes. This approach also eliminates the need for full page reloads and provides a much better user experience. Web applications using this approach are also known as Single-Page Applications (SPA).

React.js has a huge ecosystem with tons of powerful extensions that help to build complex applications quickly, without having to implement everything from scratch. It's also got loads of resources to help getting started. Compared to fully fledged front-end frameworks like e.g. Angular, React is considered to have a slightly less steep learning curve, as it can be adapted progressively (see this article).

How does it work?

To give you and idea of how React works, let's have a look at a simple React app to illustrate some of its concepts:

• Components,
• props, and
• hooks for managing state.

The demo application simply displays two checkboxes. When the user toggles the selected state, the label of each checkbox is updated to display the new state.

The app consists of two components:

1. the App component (A), that renders two Checkbox components with different labels, and
2. a Checkbox component (C) that renders a checkbox element with a label.

// src/App.js
import React, { useState } from "react";

function Checkbox({ label }) {  // C
  const [checked, setChecked] = useState(false);  // D

  return (
    <>
      <label>
        <input
          type="checkbox"
          value={checked}  //  E
          onChange={() => setChecked(!checked)}  // F
        />
        {label}
      </label>{" "}
      ({checked ? "checked" : "unchecked"})  {/* G */}
    </>
  );
}

function App() {  // A
  return (  // B
    <div style={{padding: "16px"}}>
      <Checkbox label="Beach" />
      <br />
      <Checkbox label="Mountains" />
    </div>
  );
}

export default App;

A component in React is simply a JavaScript function, that returns some markup for the UI in JSX sytax (B). As mentioned earlier, JSX is a JavaScript syntax extension that looks similar to HTML.

In JSX, you can use regular HTML tags as well as our own React components that you've defined elsewhere in the code. When using the Checkbox component, we're providing an attribute called label with a corresponding string value. In the definition of the Checkbox component (C) you can see, that the component takes an argument called label. This is called a prop in React. Components can take props from their parent components in order customize their behavior.

React components manage state using so-called hooks. The Checkbox component uses the useState hook to provide a state variable checked, as well a a setter function setChecked (D). The hook useState takes the initial value as an argument, which in this case has been set to false (i.e. unchecked). Every time that state changes, the component is re-rendered.

The Checkbox component returns a simple markup containing an HTML checkbox with a label. The element assigns the state checked to it's value (E) and provides an function to it's onChange event to invert the state using the setter function setChecked (F).

Lastly, we're using the JavaScript ternary operator (G) to display a string indicating whether the checkbox is checked or not. If checked is true, we'll display checked, otherwise unchecked.

Of course, there is much more to learn. But I think this should suffice to give you a flavour of some of the key concepts.

How to learn React?

If you want to learn more, here are a few recommendations of where to start.

A great resource to get started quickly can be found on LinkedIn Learning: React.js Essential Training by Eve Porcello. (LinkedIn Learning is offering the first month for free, so you don't have to pay to do the course.)

Within just about 1.5h of video content, Eve is doing an amazing job in explaining the core concepts of React and is also getting into some of the more advanced features like testing, data fetching, and routing. So if you're interested in learning React or finding out whether it is interesting to you, I recommend you to check it out and get some hands-on experience!

Another great video course for beginners is The beginners guide to React by Kent C. Dodds. Kent is the creator of the React Testing Library, the industry standard for testing React applications, and he's also a full-time educator.

If you've used other front-end frameworks in the past, I'd recommend you to have a look at the official React Tutorial, where you being guided to build a fully functional tic-tac-toe game.

If you haven't done any JavaScript before, it's probably worth taking a step back and learning the fundamentals. Check out the MDN Web Docs. They provide loads of resources for getting started with Javascript and other web technologies such as HTML and CSS.

For a deeper dive, I can recommend the book The Road to React by Robin Wieruch. For about $29 I found it good value for money and it's helped my to build proper foundations in React.

Robin also writes comprehensive articles about React, which he publishes on his blog.

For more information and resources, check out the React Getting Started Guide on the official docs.

I hope you found this article useful! Any questions or comments let me know in the comments.