React
Learn the most popular JavaScript library used to build UIs

React is a JavaScript library for the browser that aims to simplify the development of user interfaces.

It’s called a frontend library, because React is concerned with the frontend only, what runs inside the browser.

It’s not concerned with server-side or how to access data from a database. That is something left to other libraries we can combine with React, or to so-called meta-frameworks like Remix and Next.js

React in itself is basically an abstraction of the DOM API we saw in the DOM unit.

Developed at Facebook and released 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 think about an interface and its state at any point in time, by dividing the UI into a collection of components.

You will find some initial difficulties learning React, but once it “clicks”, I guarantee it will be one of the best experiences you will have, because React makes many things more manageable than ever, and its ecosystem is filled with great libraries and tools.

Basic React usage requires you to know a small set of features, and you basically need to understand 4 concepts to get started:

  • Components
  • JSX
  • State
  • Props

We’ll explore all of these in this unit.

Of course there’s more, for more advanced usage, but we can start with those.

Lessons in this unit:

0: ▶︎ Introduction
1: DEMO Setting up a React project with Vite
2: React Components
3: Introduction to JSX
4: Using JSX to compose UI
5: The difference between JSX and HTML
6: Embedding JavaScript in JSX
7: Handling user events
8: Managing state
9: Component props
10: Data flow
11: Lifecycle events
12: Managing forms in React
13: Install the React Developer Tools
14: DEMO Installing Tailwind CSS in a React app
15: DEMO Build a counter in React