Basics of React: everything you need to know to get started

Want to know what React is, but you still don’t have a chance to study it? Or, maybe you have already tried to master React, but could not really understand? Or maybe you understand the basics, but you want to put in order the knowledge? This article is written specifically for those who positively answered at least one of these questions. Today we will create a simple music player, revealing the basic concepts of React as we move towards the goal.





Having dealt with this material, you will learn the following:

• React components.
  
  
• Rendering ReactDOM.
  
  
• Classes of components and functional components.
  
  
• Jsx
  
  
• State
  
  
• Event handling
  
  
• Asynchronous setState method.
  
  
• Properties (props).
  
  
• References (refs).
  
  

This is almost everything you need to know in order to create and maintain React-applications.

Preliminary preparation

Consider this situation: a small startup turns to you for help. They created a nice page, using which users can download music to their service and play it. They want you to do the most difficult thing - breathe life into this page.

')

First, create a new project directory and add three files there. Here they are on GitHub, and here is their code.









To successfully complete this tutorial, you need a fresh version of the Google Chrome browser , otherwise the animation will not work. Thanks to Stephen Fabre for the CSS for the play button and Justin Vindle for the render code (you can see the original here ).



Open index.html in the code editor and in the browser. It's time to get to know React.

What is React?

React is a tool for creating user interfaces. Its main task is to provide a display of what can be seen on web pages. React makes it easy to create interfaces by splitting each page into small sections. We call these fragments components.



Here is an example of splitting the page into components:





Each selected fragment of the page shown in the figure is considered a component. But what does this mean for a developer?

What is the React component?

The React component is, if in simple terms, a piece of code that represents part of a web page. Each component is a JavaScript function that returns a piece of code representing a page fragment.



To form a page, we call these functions in a specific order, collect the results of calls together and show them to the user.



We write the component inside the <script> the index.html file with the type set to "text/babel" :

 <script type="text/babel"> function OurFirstComponent() {   return (     //   ,       ); } </script> 

When we call the OurFirstComponent() function, a page fragment is OurFirstComponent() .



Functions can be written like this:

 const OurFirstComponent = () => { return (   // ,     ,   ); } 

React uses a programming language called JSX, which is similar to HTML, but works inside JavaScript, which distinguishes it from HTML.



You can add plain HTML here so that it gets into the user interface:

 <script type="text/babel"> function OurFirstComponent() {   return (     <h1>Hello, I am a React Component!</h1>   ); } </script> 

When we call the OurFirstComponent() function, it returns a fragment of JSX code. We can use the so-called ReactDOM to output what this code represents to the page:

 <script type="text/babel"> function OurFirstComponent() {   return (     <h1>Hello, I am a React Component!</h1>   ); } const placeWeWantToPutComponent = document.getElementById('hook'); ReactDOM.render(OurFirstComponent(), placeWeWantToPutComponent); </script> 

Now the <h1> will be inside the element with the ID hook . When you refresh your browser page, it should look like this:





You can also write your own component on JSX. This is done like this:

 ReactDOM.render(<OurFirstComponent />, placeWeWantToPutComponent); 

This is the standard approach - call components as if you are working with HTML.

Component assembly

Components React can be placed in other components.

 <script type="text/babel"> function OurFirstComponent() {   return (     <h1>I am the child!</h1>   ); } function Container() {   return (     <div>       <h1>I am the parent!</h1>       <OurFirstComponent />     </div>   ); } const placeWeWantToPutComponent = document.getElementById('hook'); ReactDOM.render(<Container />, placeWeWantToPutComponent); </script> 

Here is what the above code displays:





This is how pages are assembled from fragments written in React - putting components into each other.

Component classes

So far, we have written components as functions. They are called functional components. However, components can be written differently, in the form of JavaScript classes. They are called component classes.

 class Container extends React.Component { render() {   return (     <div>       <h1>I am the parent!</h1>       <OurFirstComponent />     </div>   ); } } const placeWeWantToPutComponent = document.getElementById('hook'); ReactDOM.render(<Container />, placeWeWantToPutComponent); 

Component classes must contain a function called render() . This function returns the JSX code of the component. They can be used in the same way as functional components, for example, referring to them with the help of a construction:

 <AClassComponent /> 

In the event that you are interested in stateless components, preference should be given to functional components, in particular, they are easier to read. The status of the components will be discussed below.

Javascript jsx

JavaScript variables can be placed in JSX code. It looks like this:

 class Container extends React.Component { render() {   const greeting = 'I am a string!';   return (     <div>       <h1>{ greeting }</h1>       <OurFirstComponent />     </div>   ); } } 

Now the text «I am a string» will be inside the <h1> .



In addition, here you can do things more complicated, like function calls:

 class Container extends React.Component { render() {   const addNumbers = (num1, num2) => {     return num1 + num2;   };   return (     <div>       <h1>The sum is: { addNumbers(1, 2) }</h1>       <OurFirstComponent />     </div>   ); } } 

Here is how the page will look after processing the above code snippet:

JSX pitfalls

Rename OurFirstComponent() to PlayButton . We need this component to return the following:

 <a href="#" title="Play video" class="play" /> 

However, here we encounter a problem: the class is a JavaScript keyword, so we cannot use it. How do you assign a play class to the <a> element?



In order to achieve this, you need to use the className property:

 <script type="text/babel"> function PlayButton() {   return <a href="#" title="Play video" className="play" />; } class Container extends React.Component {   render() {     return (       <div>         <PlayButton />       </div>     );   } } const placeWeWantToPutComponent = document.getElementById('hook'); ReactDOM.render(<Container />, placeWeWantToPutComponent); </script> 

Features of the created component

Class-based components can store information about the current situation. This information is called a state, it is stored in a JS object. The following code shows an object representing the state of our component. Its key is isMusicPlaying , and the value false is associated with it. This object is assigned to this.state in the constructor method, which is called when the class is first used.

 class Container extends React.Component { constructor(props) {   super(props);   this.state = { isMusicPlaying: false }; } render() {   return (     <div>       <PlayButton />     </div>   ); } } 

The constructor method of the React component must always call super(props) before doing anything else.

So, what should we do with this “state”? Why is it invented?

Change a React component based on its state

State is a tool to update the user interface based on events. Here we will use the state to change the appearance of the music playback button, based on a click on it. The button can be displayed in one of two options. The first indicates the possibility of starting playback, the second - that the music is playing, and this process can be suspended. When a user clicks a button, the state changes and then the user interface is updated.



This is where we begin. Find out the state of a component using this.state construction. In the following code, we check the status and use it to decide which text to show to the user.

 class Container extends React.Component { constructor(props) {   super(props);   this.state = { isMusicPlaying: false }; } render() {   const status = this.state.isMusicPlaying ? 'Playing' : 'Not playing';   return (     <div>       <h1>{ status }</h1>       <PlayButton />     </div>   ); } } 

In the render function, the keyword this always refers to the component inside which it is located.





All this is not particularly useful if we have no way to change this.state.isMusicPlaying .

How does the component respond to events?

The user can interact with the component by clicking on the play music button. We want to respond to these events. This is done through a function that handles event handling. These functions are called event handlers.

 class Container extends React.Component { constructor(props) {   super(props);   this.state = { isMusicPlaying: false }; } handleClick(event) {   //     }; render() {   let status = this.state.isMusicPlaying   ? 'Playing :)'   : 'Not playing :(';   return (     <div>       <h1 onClick={this.handleClick.bind(this)}>{ status }</h1>       <PlayButton />     </div>   ); } } 

When the user clicks on the text represented by the <h1> , the component calls the handleClick function. The function receives the event object as an argument, which means that it can, if necessary, use it.



We use the handleClick function's .bind method to have the this keyword handleClick to the entire component, not just <h1> .

How the component should work

When the state of the component changes, it will call the render function again. We can change the state with this.setState() , if we pass this object an object representing the new state. The component on the page will always represent its current state. React independently provide this behavior to the components.

 handleClick() {   if (this.state.isMusicPlaying) {     this.setState({ isMusicPlaying: false });   } else {     this.setState({ isMusicPlaying: true });   } }; 

Now, having dealt with this mechanism, let's do the processing of clicking on the button.

Data exchange between components

Components can "communicate" with each other. Let's see how it works. We can tell the PlayButton music is playing or not using so-called properties (props). Properties are information shared by the parent component and its descendant components.



Properties in JSX look the same as HTML properties. We assign a PlayButton property called isMusicPlaying , which is the same as isMusicPlaying in this.state .

 class Container extends React.Component { constructor(props) {   super(props);   this.state = { isMusicPlaying: false }; } handleClick() {   if (this.state.isMusicPlaying) {     this.setState({ isMusicPlaying: false });   } else {     this.setState({ isMusicPlaying: true });   } }; render() {   return (     <div>       <PlayButton isMusicPlaying={this.state.isMusicPlaying} />     </div>   ); } } 

When the state of the Container changes, the PlayButton property also changes, and the PlayButton function PlayButton called again. This means that the appearance of the component on the screen will be updated.



Inside the PlayButton we can react to changes, since the PlayButton takes properties as an argument:

 function PlayButton(props) { const className = props.isMusicPlaying ? 'play active' : 'play'; return <a href="#" title="Play video" className={className} />; } 

If we change the state to this.state = { isMusicPlaying: true }; and reload the page, the pause button should appear on it:

Events as properties

Properties do not have to be any data. They can be functions.

 function PlayButton(props) { const className = props.isMusicPlaying ? 'play active' : 'play'; return <a onClick={props.onClick} href="#" title="Play video" className={className} />; } class Container extends React.Component { constructor(props) {   super(props);   this.state = { isMusicPlaying: false }; } handleClick() {   if (this.state.isMusicPlaying) {     this.setState({ isMusicPlaying: false });   } else {     this.setState({ isMusicPlaying: true });   } }; render() {   return (     <div>       <PlayButton         onClick={this.handleClick.bind(this)}         isMusicPlaying={this.state.isMusicPlaying}       />     </div>   ); } } 

Now, when we click on the PlayButton button, it changes the state of the Container , which will change the props PlayButton , which will lead to an update of the button on the page.

Unpleasant feature setState

When you call setState the state change is not performed instantly. React waits a bit to see if it is necessary to make some other changes, and only then makes a state change. This means that you cannot know exactly what the state of the component will be after calling setState .



Therefore, one should not do this:

 handleClick() { this.setState({ isMusicPlaying: !this.state.isMusicPlaying }); }; 

If you change the state based on the previous state, you need to do it differently. Namely, you should pass the setState function, not the object. This function takes the old state as an argument and returns an object representing the new state.



It looks like this:

 handleClick() { this.setState(prevState => {   return {     isMusicPlaying: !prevState.isMusicPlaying     }; }); }; 

This construction is more complicated, but it is necessary only if you use the old state to form a new state. If not, you can simply pass the setState object.

What are links?

It's time to turn on the music. To begin, add the <audio> :

 class Container extends React.Component { constructor(props) {   super(props);   this.state = { isMusicPlaying: false }; } handleClick() {   this.setState(prevState => {     return {       isMusicPlaying: !prevState.isMusicPlaying       };   }); }; render() {   return (     <div>       <PlayButton         onClick={this.handleClick.bind(this)}         isMusicPlaying={this.state.isMusicPlaying}       />       <audio id="audio" />     </div>   ); } } 

We need a way to access the <audio> and call either its play() method or pause() . You can do this with the document.getElementById('audio').play() construct, but React offers something better.



We assign an attribute to the element, called ref , which takes a function. This function takes the <audio> element as the first argument, and assigns it to this.audio .



<audio id="audio" ref={(audioTag) => { this.audio = audioTag }} />

This function will be called every time the Container is displayed, that is, this.audio will always be up to date and will point to the <audio> .

Now we can start and pause the music:

 handleClick() { if (this.state.isMusicPlaying) {   this.audio.pause(); } else {   this.audio.play(); } this.setState(prevState => {   return {     isMusicPlaying: !prevState.isMusicPlaying     }; }); }; 

Upload the music file to the page (preferably in .mp3 format) using the Choose files button, click on the play button and listen to the music.

React outside index.html

As you may have guessed, the React code should not "live" solely inside the <script> . React supports many build configurations. Fortunately, using tools like the Create React App, you can automate all the routine work of building an application framework. Install create-react-app , create a new project, look at the manual and start working with JS-files in the src project folder, applying all the knowledge of React you received today.

Results

Congratulations! You have taken the first steps in the development of React-applications, have mastered the basics that allow you to start creating your own projects and productively study further.



Dear readers! If today you had your first acquaintance with React, please share your impressions.