Introduction to React

What is React?

React is a JavaScript library that aims to simplify development of visual interfaces.

Developed at Facebook and released to the world in 2013, it drives some of the most widely used apps, powering Facebook and Instagram among countless other applications.

Its primary goal is to make it easy to reason about an interface and its state at any point in time, by dividing the UI into a collection of components.

Why is React so popular?

React has taken the frontend web development world by storm. Why?

Less complex than the other alternatives

At the time when React was announced, Ember.js and Angular 1.x were the predominant choices as a framework. Both these imposed so many conventions on the code that porting an existing app was not convenient at all. React made a choice to be very easy to integrate into an existing project, because that’s how they had to do it at Facebook in order to introduce it to the existing codebase. Also, those 2 frameworks brought too much to the table, while React only chose to implement the View layer instead of the full MVC stack.

Perfect timing

At the time, Angular 2.x was announced by Google, along with the backwards incompatibility and major changes it was going to bring. Moving from Angular 1 to 2 was like moving to a different framework, so this, along with execution speed improvements that React promised, made it something developers were eager to try.

Backed by Facebook, now by a foundation

Being backed by Facebook was a real plus in 2013-2018. Facebook developed React, released it in 2013, and kept a strong interest in it as an open source project.

React, React Native and JSX now live in the React Foundation, hosted by the Linux Foundation. Meta is one of eight Platinum founding members, with Amazon, Callstack, Expo, Huawei, Microsoft, Software Mansion and Vercel.

Is React simple to learn?

Even though I said that React is simpler than alternative frameworks, diving into React is still complicated, but mostly because of the corollary technologies that can be integrated with React, like Redux and GraphQL.

React in itself has a very small API, and you basically need to understand 4 concepts to get started:

• Components
• JSX
• State
• Props

Those four ideas show up together in one small component.

import { useState } from 'react'

function Counter({ label }) {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      {label}: {count}
    </button>
  )
}

export default function App() {
  return <Counter label="Clicks" />
}

Counter is a component: a function that returns UI. The markup inside it is JSX, HTML-like syntax that compiles to JavaScript. label is a prop, data the parent passes in. count is state, data the component owns.

Click the button. setCount updates state. React calls Counter again, gets new JSX, and updates the DOM to match. You describe what the screen should look like for the current state. You do not find the button and change its text yourself.

State changes, React re-renders, and the UI matches the new state.

What React is not

React is a library for the view. It does not give you a router, a data layer, or a build tool.

Those come from other libraries, or from a framework that wraps React. Next.js is the common one: routing, data fetching, and a production build on top of React.

You can use React on its own. Many apps do. Just know that “React” in a job post often means React plus a framework.

If you’re porting HTML snippets into a React component, I built a free HTML to JSX converter that handles the attribute renames for you.

To put React on your machine, see How to install React. React 19 is the current major.

Want me to talk about your product? You can sponsor this site.