Quick Start
Last updated
Was this helpful?
Last updated
Was this helpful?
Welcome to the React documentation! Here is an overview of what you can find on this site.
This is a tiny React app. To get your first taste of React, edit the code below and make it display your name:
React is a JavaScript library for building user interfaces.
React stands at the intersection of design and programming. It lets you take a complex user interface, and break it down into nestable and reusable pieces called that fit well together. If you have a programming background, this might remind you of making a program out of functions. If you’re a designer, this might remind you of composing a design out of layers. If you’re new to both disciplines, that’s okay! Many people get into them with React. Using React might also remind you of building a castle out of toy bricks. Sometimes, it’s even fun.
React does not prescribe how you build your entire application. It helps you define and compose components, but stays out of your way in other questions. This means that you will either pick one of the ecosystem solutions for problems like routing, styling, and data fetching, or that provides great defaults.
Quite a lot, really! People use React to create all kinds of user interfaces—from small controls like buttons and dropdowns to entire apps. These docs will teach you to use React on the web. However, most of what you’ll learn here applies equally for which lets you build apps for Android, iOS, and even .
If you’re curious which products you use everyday are built with React, you can install the . Whenever you visit an app or a website built with React (like this one!), its icon will light up in the toolbar.
With React, you will describe your visual logic in JavaScript. This takes some practice. If you’re learning JavaScript and React at the same time, you’re not alone—but at times, it will be a little bit more challenging! On the upside, much of learning React is really learning JavaScript, which means you will take your learnings far beyond React.
There are a few ways to get started:
The rest of this documentation is organized in chapters that introduce each concept step by step—with many interactive examples, detailed explanations, and challenges to check your understanding. You don’t have to read them sequentially, but each next page assumes you’re familiar with concepts from the previous pages.
To save you time, we provide a brief overview of each chapter below.
You can add state to a component with a [useState](https://beta.reactjs.org/reference/usestate) Hook. Hooks are special functions that let your components use React features (state is one of those features). The useState Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it.
This Gallery component needs to remember two things: the current image index (initially, 0), and whether the user has toggled “Show details” (initially, false):
Notice how clicking the buttons updates the screen:
For example, this form has a redundant fullName state variable:
You can remove it and simplify the code by calculating fullName while the component is rendering:
This might seem like a small change, but many bugs in React apps are fixed this way!
This page was fast-paced! If you’ve read this far, you have already seen 80% of React you will use on daily basis.
Your next steps depend on what you’d like to do:
Check your knowledge level with . It will take you between 30 minutes and an hour but you will feel more confident learning React. and are two great resources to use as a reference.
If you’re feeling impatient and learn by example, head straight to . This tutorial doesn’t explain the syntax in detail, but it will give you an idea of what it feels like to build user interfaces with React.
If you’re familiar with the concepts and want to browse the available APIs, check out .
React applications are built from isolated pieces of UI called . A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here, a parent Gallery component renders three child Profile components:
The markup in the example above looks a lot like HTML. This syntax is called , and it is a bit stricter (for example, you have to close all the tags). Note that the CSS class is specified as className in JSX.
Just like you can pass some information to the browser <img> tag, you can also pass information to your own components like <Profile>. Such information is called . Here, three <Profile>s receive different props:
You might wonder why className="avatar" uses quotes but src={imageUrl} uses curly braces. In JSX, curly braces are like a . They let you run a bit of JavaScript right in your markup! So src={imageUrl} reads the imageUrl prop declared on the first line and passed from the parent Gallery component.
In the above example, all the data was written directly in markup. However, you’ll often want to keep it separately. Here, the data is kept in an array. In React, you use JavaScript functions like [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to of things.
Read to learn how to make things appear on the screen, including declaring components, importing them, writing JSX with the curly braces, and writing conditions and lists.
Components often need to change what’s on the screen as a result of an interaction. Typing into the form should update the input field, clicking “next” on an image carousel should change which image is displayed, clicking “buy” puts a product in the shopping cart. Components need to “remember” things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called .
State can hold complex values, too. For example, if you’re implementing a form, you can keep an object in state with different fields. The ... syntax in the below example lets you .
You can also hold arrays in state. This lets you add, remove, or change things in a list in response to user interactions. Depending on what you want to do, there are .
Read to learn how to update the screen on interaction, including adding event handlers, declaring and updating state, and the different ways to update objects and arrays in state.
You’ll often face a choice of what exactly to put into state. Should you use one state variable or many? An object or an array? How should you ? The most important principle is to avoid redundant state. If some information never changes, it shouldn’t be in state. If some information is received from parent by props, it shouldn’t be in state. And if you can compute something from other props or state, it shouldn’t be in state either!
Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as , and it’s one of the most common things you will do writing React code. For example, in an accordion like below, only one panel should be active at a time. Instead of keeping the active state inside each individual panel, the parent component holds the state and specifies the props for its children.
Read to learn how to keep your components maintainable, including how to structure state well, how to share it between components, and how to pass it deep into the tree.
Go to if you’d like to set up a React project locally.
Read if you’d like to see what building a UI in React feels like in practice.
Or, start with to get a closer look at the first chapter.
And don’t forget to check the when you need the API without the fluff!