React Tutorial For Beginners

by

React tutorial from Codingcompiler. React is a JAVASCRIPT library for building user interfaces. React is mainly used to build UI, and many people think React is a V (view) in MVC.

React originated from Facebook’s internal project, used to build Instagram sites, and was open sourced in May 2013. React has high performance, code logic is very simple, and more and more people have begun to pay attention to and use it. Let’s start learning React JavaScript.

React Tutorial – React Features

  • Declarative design – React uses a declaration paradigm that makes it easy to describe an application.
  • Efficient- React minimizes interaction with the DOM by simulating the DOM.
  • Flexibility – React works well with known libraries or frameworks.
  • JSX − JSX is an extension of the JavaScript syntax. React development does not necessarily use JSX, but we recommend using it.
  • Components − Building components through React makes the code easier to reuse and can be well used in the development of large projects.
  • One-way response data flow – React implements a one-way response data stream, which reduces duplicate code, which is why it is simpler than traditional data binding.

Related Article: [ Vuejs Tutorial ]

What you need to know before reading this React tutorial

Before you start learning React, you need to have the following basics:

  • HTML5
  • CSS
  • JavaScript

[Related Article: RxJS Tutorial ]

React Hello World Program!

In each chapter, you can copy edit the sample programs using any online editor to check the results.

This tutorial uses the version of React 16.4.0, you can download the latest version at https://reactjs.org/ .

React Hello World Program

< div id = " example " >  
 < script type = " text/babel " > 
   ReactDOM.render(
      < h1 > Hello world!  , document.getElementById('example') );

React installation

React can be downloaded and used directly, and many examples of learning are provided in the download package.

This tutorial uses the version of React 16.4.0, you can download the latest version at https://reactjs.org/ .

You can also use the React CDN library of the Staticfile CDN directly at the following address:

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- Production environment is not recommended -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

Official CDN address:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Production environment is not recommended -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Note: Using Babel in a browser to compile JSX is very inefficient

Use case

The following example outputs Hello world!

React sample program

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8"/>
<title>Hello React!</title>
<scriptsrc="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<scriptsrc="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"> </script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello world!</h1>,
    document.getElementById('example')
);
</script>
 
</body>
</html>

Instance resolution:

In the example we introduced three libraries: react.min.js , react-dom.min.js , and babel.min.js:

  • React.min.js – the core library of React
  • React-dom.min.js – provides DOM-related functionality
  • Babel.min.js – Babel can convert ES6 code to ES5 code so that we can execute React code on ES6 browsers that don’t currently support it. Babel has built-in support for JSX. Syntax rendering of source code can be taken to a whole new level by using Babel with the babel-sublime package.
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

The above code inserts an h1 header into the id=”example” node.

Note: If we need to use JSX, the type attribute of the tag needs to be set to text/babel.</p>:

Use React with npm

If your system does not yet support Node.js and NPM, We recommend using the CommonJS module system in React, such as browserify or webpack. This tutorial uses webpack.

Domestic use of npm is very slow, you can use Taobao’s customized cnpm (gzip compression support) command line tool instead of the default npm:

$ npm install - g cnpm - registry = https : //registry.npm.taobao.org 
$ npm config set registry https : //registry.npm.taobao.org

This will allow you to install the module using the cnpm command:

$ cnpm install [name]

More information can be found at https://npm.taobao.org/ .

Quickly build a React development environment with create-react-app

Create-react-app is from Facebook, and with this command we can quickly build a React development environment without configuration.

The project created automatically by create-react-app is based on Webpack + ES6.

Create a project by executing the following command:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my - app / 
$ npm start

Open https://localhost:3000/ in your browser and the result is as shown below:

The directory structure of the project is as follows:

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

The manifest.json specifies the start page index.html, starting with everything from here, so this is the source of code execution.

Try modifying the src/App.js file code:

src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img Src = { logo } className = " App-logo " alt = " logo " /> 
< h2 > Welcome to the rookie tutorial </ h2 > 
</ div > 
< p className = " App-intro " > You can at < code > src / App . js </ code > Modifications in the file. </ p > 
</ div >
     ) ;  
 App;

After modification, open https://localhost:3000/ (general automatic refresh).

Run React in Cloud Studio

Below we describe how to install and use React in Cloud Studio:

Step1: Visit the Tencent Cloud Developer Platform to register/login.

Step2: Select the runtime environment menu on the right “ubuntu”:

Step3: Create a new html directory in the code directory on the left, and write your HTML code, such as index.html

Step4: You can download the latest version at https://reactjs.org/ . You can also use the React CDN library of the Staticfile CDN directly at the following address:

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- Not recommended in production environments -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

Official CDN address:

 
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Not recommended in production environments -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Step5: Enter the command in the terminal sudo vim /etc/nginx/site-enable/default. Modify the red box of the configuration file as shown below, and then enter the command: sudo service nginx restart the nginx service (nginx installation will start and listen to port 80 by default. We need to change the site directory of nginx and the port number of the listener to what we need. )

Step6: Click the [Access Link] tab on the far right, fill in the port number in the access link panel: 8080 (consistent with the port number in the nginx configuration file), click the Create link, and click on the generated link to visit us. Just write the code to see the React effect.

React element rendering

An element is the smallest unit that makes up a React application and is used to describe what is output on the screen.

Const element = <h1> Hello , world !</ h1 >;

Unlike the browser’s DOM element, the elements in React are in fact ordinary objects, and React DOM ensures that the data content of the browser DOM is consistent with the React element.

Render elements into the DOM

First, we add a page in an HTML id = “example” of <div> :

<div id = "example" ></div>

Everything in this div will be managed by React DOM, so we call it the “root” DOM ​​node.

When we develop an application with React, we usually only define one root node. But if you are introducing React into an existing project, you may need to define the React root node separately in different sections.

[Related Article: JavaScript Guide ]

To render the React elements into the root DOM node, we render them to the page by passing them all to ReactDOM.render() :

Source code:

Const element = < h1 > Hello , world !</ h1 >;
 ReactDOM.render ( element ,
     document.getElementById ( ' example ' ) ) ;

React Hello World Program

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
const element =<h1>Hello world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);
</script>
 
</body>
</html>

Update element rendering

React elements are immutable. When an element is created, you cannot change its content or properties.

The only way to update the interface today is to create a new element and pass it to the ReactDOM.render() method:

Take a look at this timer example:

Syntax:

Function tick ( ) { const element = ( 
     < div > < h1 > Hello , world !  < h2 > is now { new Date ( ) . toLocaleTimeString ( ) } .  
    ) ;
    ReactDOM . render ( element ,
      document . getElementById ( ' 
     Example ' ) ) ;
  } setInterval ( tick , 1000 ) ;

React Code Example for ReactDOM

First, we add a page in an HTML id = “example” of < div > :

< div id = "example" >< /div >

Everything in this div will be managed by React DOM, so we call it the “root” DOM ​​node.

When we develop an application with React, we usually only define one root node. But if you are introducing React into an existing project, you may need to define the React root node separately in different sections.

To render the React elements into the root DOM node, we render them to the page by passing them all to ReactDOM.render() :

< !DOCTYPE html >
 < html >
 < head >
 < meta charset="UTF-8" / >
 < title >Hello React!< /title >
 < script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js" >< /script >
 < script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js" >< /script >
 < script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js" >< /script >
 < /head >
 < body >
 < div id="example" >< /div >
 < script type="text/babel" >
 function tick() {
   const element = (
     < div >
       < h1 >Hello, world!< /h1 >
       < h2 >It's Now: {new Date().toLocaleTimeString()}.< /h2 >
     < /div >
   );
   ReactDOM.render(
     element,
     document.getElementById('example')
   );
 }
 setInterval(tick, 1000);
 < /script >
 < /body >
 < /html >

The above example calls ReactDOM.render() every second through the setInterval() method.

We can wrap the part to be displayed, the following example is represented by a function:S

Syntax: 

Function Clock ( props ) { return ( 
    < div > < h1 > Hello , world !</ h1 > < h2 > is now { props . date . toLocaleTimeString ( ) } .</ h2 > </ div >
   ) ;
 } function tick ( ) { ReactDOM . render ( 
    < Clock date =  
  { new Date ( ) } />,
     document . getElementById ( ' example ' ) ) ;
 } setInterval ( tick , 1000 ) ;

React Code Example for ReactDOM.render():

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        <h2>It's Now: {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);
</script>
 
</body>
</html>
React Code Example for ReactDOM.render():
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
function Clock(props) {
  return (
    <div>
      <h1>Hello world!</h1>
      <h2>It's Now: {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}
 
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);
</script>
 
</body>
</html>

Instance

Class clock extends React . Component { render ( ) { return ( 
       < div > < h1 > Hello , world ! < h2 > is now { this . props . date . toLocaleTimeString ( ) } . 
      ) ;
    } } function tick ( ) {  
   ReactDOM . render ( 
     < Clock date = { new Date ( ) } / >,
      document . getElementById ( ' example ' ) ) ;
  } setInterval ( tick , 1000 ) ;

React will only update the necessary parts  It’s worth noting that React DOM first compares the content of the elements in succession, and only updates the changed parts during the rendering process.

React JSX

React uses JSX instead of regular JavaScript.

JSX is a JavaScript syntax extension that looks a lot like XML.

We don’t need to use JSX, but it has the following advantages:

  • JSX performs faster because it is optimized after being compiled into JavaScript code.
  • It is type-safe and can detect errors during compilation.
  • Writing templates with JSX is easier and faster.

Let’s take a look at the following code:

const element = < h1 >Hello, world!< /h1 >;

This sort of markup syntax that may seem odd is neither a string nor an HTML.

It is called JSX, a syntax extension for JavaScript. We recommend using JSX in React to describe the user interface.

JSX is implemented inside JavaScript.

We know that elements are the smallest unit that makes up a React application, and JSX is used to declare elements in React.

[Related Article: React Router]

Unlike the browser’s DOM element, the elements in React are in fact ordinary objects, and React DOM ensures that the data content of the browser DOM is consistent with the React element.

To render React elements into the root DOM node, we render them to the page by passing them all to ReactDOM.render() :

React instance

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Example For Beginners</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var arr = [
        <h1>React Beginners Tutorial/h1>,
        <h2>Learning coding with React!</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

note: Because JSX is JavaScript, like a number of identifiers classand foris not recommended as an XML attribute names. Alternatively, React DOM use classNameand htmlFordo the corresponding attribute.

Use JSX

JSX looks like HTML, we can look at the example:

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

We can nest multiple HTML tags in the above code, we need to wrap it with a div element, the p element in the instance adds the custom attribute data-myattribute , and the custom attribute needs to use the data- prefix.

React instance

ReactDOM . render ( 
    < div > < h1 > rookie tutorial</ h1 > < h2 > welcome to learn React </ h2 > < p data - myattribute = " somevalue " > This is a very nice JavaScript library!</ p > < / div > ,
     document . getElementById ( ' example ' ) ) ;

React Code Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Tutorial For Beginners</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
       <div>
       <h1>React Tutorial</h1>
       <h2>Welcome to React</h2>
        <p data-myattribute = "somevalue">This is awesome JavaScript library!</p>
        </div>
       ,
       document.getElementById('example')
      );
    </script>
  </body>
</html>

Independent file

Your React JSX code can be placed on a separate file, for example, we create a helloworld_react.jsfile, the code is as follows:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Then introduce the JS file into the HTML file:

React instance
<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

React Code Example: 

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
  <script type="text/babel" src="helloworld_react.js"></script>
  </body>
</html>

JavaScript expression

We can use JavaScript expressions in JSX. The expression is written in curly braces {} . Examples are as follows:

React instance

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('example')
);
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Tutorial For Beginners</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
       <div>
         <h1>{1+1}</h1>
        </div>
       ,
       document.getElementById('example')
      );
    </script>
  </body>
</html>

The if else statement cannot be used in JSX , but can be replaced with a conditional (ternary) expression. In the following example, if the variable i is equal to 1 the browser will output true , if you modify the value of i, it will output false .

React instance

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

React Code Example:

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Tutorial For Beginners</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
   var i = 1;
      ReactDOM.render(
       <div>
         <h1>{i == 1 ? 'True!' : 'False'}</h1>
        </div>
       ,
       document.getElementById('example')
      );
    </script>
  </body>
</html>

Style

React recommends using inline styles. We can use the camelCase syntax to set inline styles. React will automatically add px after specifying the number of elements . The following example demonstrates adding a myStyle inline style to the h1 element :

React instance

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>React Tutorial</h1>,
    document.getElementById('example')
);

React Code Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Tutorial For Beginners</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      };
      ReactDOM.render(
       <h1 style = {myStyle}>React Tutorial</h1>,
       document.getElementById('example')
      );
    </script>
  </body>
</html>

Comment

Comments need to be written in curly braces, examples are as follows:

React instance

ReactDOM . render ( 
    < div > < h1 > rookie tutorial </ h1 >
     { / * comment... */ } 
     </ div >,
     document.getElementById ( ' example ' ) ) ;

React Code Example: 

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Tutorial For Beginners</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
       <div>
            <h1>React Tutorial</h1>
            {/*Comment...*/}
         </div>,
       document.getElementById('example')
      );
    </script>
  </body>
</html>

[Related Article: UX Trends ]

Array

JSX allows you to insert an array into your template, and the array will automatically expand all members:

React instance

Var arr = [ 
  < h1 > rookie tutorial</ h1 >, < h2 > is not only technology, but also a dream! </ h2 >,
 ] ;
 ReactDOM . render ( 
  < div > { arr } </ div >,
   document . getElementById ( ' example ' ) ) ;

Code Example: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Tutorial For Beginners</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var arr = [
        <h1>React Tutorial</h1>,
        <h2>React Learning is Awesome!</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

Related JavaScript Tutorials For Beginners

JavaScript Introduction Tutorials
Introduction to JavaScript
Javascript Code editors
JavaScript Basics Tutorial
Javascript Developer Console
Javascript Reference and Specifications
External JavaScript Files

Leave a Comment