Quick Start

Creating and nesting components

React apps are made out ofcomponents. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.

React components are JavaScript functions that return markup:

functionMyButton(){
return(
<button>I'm a button</button>
);
}

Now that you’ve declaredMyButton, you can nest it into another component:

exportdefaultfunctionMyApp(){
return(
<div>
<h1>Welcome to my app</h1>
<MyButton/>
</div>
);
}

Notice that<MyButton /> starts with a capital letter. That’s how you know it’s a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.

Have a look at the result:

Theexport default keywords specify the main component in the file. If you’re not familiar with some piece of JavaScript syntax,MDN andjavascript.info have great references.

Writing markup with JSX

The markup syntax you’ve seen above is calledJSX. It is optional, but most React projects use JSX for its convenience. All of thetools we recommend for local development support JSX out of the box.

JSX is stricter than HTML. You have to close tags like<br />. Your component also can’t return multiple JSX tags. You have to wrap them into a shared parent, like a<div>...</div> or an empty<>...</> wrapper:

functionAboutPage(){
return(
<>
<h1>About</h1>
<p>Hello there.<br/>How do you do?</p>
</>
);
}

If you have a lot of HTML to port to JSX, you can use anonline converter.

Adding styles

In React, you specify a CSS class withclassName. It works the same way as the HTMLclass attribute:

<imgclassName="avatar"/>

Then you write the CSS rules for it in a separate CSS file:

/* In your CSS */
.avatar{
border-radius:50%;
}

React does not prescribe how you add CSS files. In the simplest case, you’ll add a<link> tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.

Displaying data

JSX lets you put markup into JavaScript. Curly braces let you “escape back” into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will displayuser.name:

return(
<h1>
{user.name}
</h1>
);

You can also “escape into JavaScript” from JSX attributes, but you have to use curly bracesinstead of quotes. For example,className="avatar" passes the"avatar" string as the CSS class, butsrc={user.imageUrl} reads the JavaScriptuser.imageUrl variable value, and then passes that value as thesrc attribute:

return(
<img
className="avatar"
src={user.imageUrl}
/>
);

You can put more complex expressions inside the JSX curly braces too, for example,string concatenation:

In the above example,style={{}} is not a special syntax, but a regular{} object inside thestyle={ } JSX curly braces. You can use thestyle attribute when your styles depend on JavaScript variables.

Conditional rendering

In React, there is no special syntax for writing conditions. Instead, you’ll use the same techniques as you use when writing regular JavaScript code. For example, you can use anif statement to conditionally include JSX:

letcontent;
if(isLoggedIn){
content =<AdminPanel/>;
}else{
content =<LoginForm/>;
}
return(
<div>
{content}
</div>
);

If you prefer more compact code, you can use theconditional? operator. Unlikeif, it works inside JSX:

<div>
{isLoggedIn ?(
<AdminPanel/>
) :(
<LoginForm/>
)}
</div>

When you don’t need theelse branch, you can also use a shorterlogical&& syntax:

<div>
{isLoggedIn &&<AdminPanel/>}
</div>

All of these approaches also work for conditionally specifying attributes. If you’re unfamiliar with some of this JavaScript syntax, you can start by always usingif...else.

Rendering lists

You will rely on JavaScript features likefor loop and thearraymap() function to render lists of components.

For example, let’s say you have an array of products:

constproducts =[
{title:'Cabbage',id:1},
{title:'Garlic',id:2},
{title:'Apple',id:3},
];

Inside your component, use themap() function to transform an array of products into an array of<li> items:

constlistItems =products.map(product=>
<likey={product.id}>
{product.title}
</li>
);

return(
<ul>{listItems}</ul>
);

Notice how<li> has akey attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items.

Responding to events

You can respond to events by declaringevent handler functions inside your components:

functionMyButton(){
functionhandleClick(){
alert('You clicked me!');
}

return(
<buttononClick={handleClick}>
      Click me
</button>
);
}

Notice howonClick={handleClick} has no parentheses at the end! Do notcall the event handler function: you only need topass it down. React will call your event handler when the user clicks the button.

Updating the screen

Often, you’ll want your component to “remember” some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, addstate to your component.

First, importuseState from React:

import{useState}from'react';

Now you can declare astate variable inside your component:

functionMyButton(){
const[count,setCount] =useState(0);
// ...

You’ll get two things fromuseState: the current state (count), and the function that lets you update it (setCount). You can give them any names, but the convention is to write[something, setSomething].

The first time the button is displayed,count will be0 because you passed0 touseState(). When you want to change state, callsetCount() and pass the new value to it. Clicking this button will increment the counter:

functionMyButton(){
const[count,setCount] =useState(0);

functionhandleClick(){
setCount(count +1);
}

return(
<buttononClick={handleClick}>
      Clicked{count} times
</button>
);
}

React will call your component function again. This time,count will be1. Then it will be2. And so on.

If you render the same component multiple times, each will get its own state. Click each button separately:

Notice how each button “remembers” its owncount state and doesn’t affect other buttons.

Using Hooks

Functions starting withuse are calledHooks.useState is a built-in Hook provided by React. You can find other built-in Hooks in theAPI reference. You can also write your own Hooks by combining the existing ones.

Hooks are more restrictive than other functions. You can only call Hooksat the top of your components (or other Hooks). If you want to useuseState in a condition or a loop, extract a new component and put it there.

Sharing data between components

In the previous example, eachMyButton had its own independentcount, and when each button was clicked, only thecount for the button clicked changed:

However, often you’ll need components toshare data and always update together.

To make bothMyButton components display the samecount and update together, you need to move the state from the individual buttons “upwards” to the closest component containing all of them.

In this example, it isMyApp:

Now when you click either button, thecount inMyApp will change, which will change both of the counts inMyButton. Here’s how you can express this in code.

First,move the state up fromMyButton intoMyApp:

exportdefaultfunctionMyApp(){
const[count,setCount] =useState(0);

functionhandleClick(){
setCount(count +1);
}

return(
<div>
<h1>Counters that update separately</h1>
<MyButton/>
<MyButton/>
</div>
);
}

functionMyButton(){
// ... we're moving code from here ...
}

Then,pass the state down fromMyApp to eachMyButton, together with the shared click handler. You can pass information toMyButton using the JSX curly braces, just like you previously did with built-in tags like<img>:

exportdefaultfunctionMyApp(){
const[count,setCount] =useState(0);

functionhandleClick(){
setCount(count +1);
}

return(
<div>
<h1>Counters that update together</h1>
<MyButtoncount={count}onClick={handleClick}/>
<MyButtoncount={count}onClick={handleClick}/>
</div>
);
}

The information you pass down like this is calledprops. Now theMyApp component contains thecount state and thehandleClick event handler, andpasses both of them down as props to each of the buttons.

Finally, changeMyButton toread the props you have passed from its parent component:

functionMyButton({count,onClick}){
return(
<buttononClick={onClick}>
      Clicked{count} times
</button>
);
}

When you click the button, theonClick handler fires. Each button’sonClick prop was set to thehandleClick function insideMyApp, so the code inside of it runs. That code callssetCount(count + 1), incrementing thecount state variable. The newcount value is passed as a prop to each button, so they all show the new value. This is called “lifting state up”. By moving state up, you’ve shared it between components.

Next Steps

By now, you know the basics of how to write React code!

Check out theTutorial to put them into practice and build your first mini-app with React.