React Express

What is React?

React is a library for building user interfaces for the web and other platforms. This guide covers the fundamental aspects of React needed to build great web apps. If you're more interested in building mobile apps, consider checking out React Native Express instead.

How to use this guide

You should use this guide as a companion to the official Facebook documentation for getting started. While the official docs are great, this guide focuses on smaller, interactive examples to illustrate React concepts. Additionally, this guide covers important tools and projects in the React ecosystem which are outside the scope of the React docs.

This guide is intended for people who already know JavaScript. If you're new to JavaScript, or could use a refresher, consider first going through JavaScript Express. We'll assume a little knowledge of HTML and CSS, but even if you're not familiar with those, you should still be able to follow this guide.

The interactive examples in this guide work better on desktop than mobile.

Hello world

When you write your first React app, you might start with something like this.

You may notice the JavaScript code has what looks like XML mixed in, e.g. <App />. This is because it uses the JSX language extension created by Facebook in order to simplify writing React code. While this isn't required, most React developers use it because it makes their code easier to understand and maintain. This does mean we need a build step where we transform the JSX into browser-compatible JavaScript, but most React developers are willing to set that up (and most complex web apps already have a build step anyway).

Let's get started!

The first thing we'll cover is how to set up a new React app on your computer. If you don't want to set up an app on your computer, skip to the React section to learn more about the React API.