This series of articles will integrate the essence of my React video tutorial and React Native books to introduce the learning methods of React and React Native. This section mainly introduces the underlying principles and mechanisms of React.

React is the most popular framework in the front-end world, with high performance and easy to use features. After mastering the React framework, it will be easier to learn other frameworks like React.

The reasons for the high performance of the React framework and the underlying important concepts will be discussed in subsequent chapters. In this chapter, we will first explore the important concepts and features of React through a practical case.

If you’re already familiar with the React framework, you can optionally skip this chapter and go straight to subsequent chapters.

1. Install the React framework

Learning the React framework, we can set up a development environment for rapid learning in the following ways.

1.1 Use an online code editor to write and learn

There is flexibility in the online editor to switch between React versions and choose Babel as a pre-processed conversion of JSX code to JavaScript. For example, the official recommended online code editor React environment: CodePen.

1.2 Local Development Environment Setup

1.2.1 installation Node. Js

Node.js is a JavaScript runtime environment based on Chrome V8 engine. Node.js uses an event-driven, non-blocking I/O model, making it lightweight and efficient. Node.js package manager NPM is the world’s largest open source library ecosystem.

Node.js itself is not a new development language, nor is it a JavaScript framework, but rather a JavaScript runtime. The bottom layer is the Google Chrome V8 engine, which can be used to create fast, efficient, and extensible web applications. Node.js uses an event-driven and non-blocking I/O model to make Node.js lightweight and efficient.

Node.js includes the NPM system, which is the package ecosystem of Node.js and the largest open source ecosystem. Based on the Node.js framework, developers all over the world submit a wide variety of libraries to NPM, and most of the functionality that other developers need to use in their development process can be found in NPM. There is no need to “build the wheel”.

To install the Node.js framework, go to the Node.js official website and download the installation package for your platform.

1.2.2 Installation of official scaffolding project

The create-React-app scaffolding project exists in the NPM package system, so it can be installed directly from the command line tool using the NPM command.

npm install -g create-react-app
Copy the code

The React project can then be initialized using the command line.

create-react-app your-app-project-name
Copy the code

2. JSX, state, and props in React

JSX, State, and Props are the most important and basic knowledge points of the React framework. Basically, you can use React for project development after you have mastered these three points. Other knowledge points can be quickly mastered by looking through the documents.

2.1 Introduction to component instance design

Here we use React componentization to design two page components:

  1. The entry component is defined as Index;
  2. The Index component loads a child component, defined as BodyIndex;
  3. The Index component passes two parameters to the BodyIndex component: ID and name;
  4. The BodyIndex component also has its own property username, which automatically changes its value five seconds after the component is loaded.

Through this example, you need to pay attention to the following points:

  1. React component definition;
  2. Syntax structure of JSX code;
  3. Definition of component property state;
  4. Method by which a component passes parameters through props.

2.2 Component instance code implementation

2.2.1 Component Index code implementation

/** * index.js defines the React project entry, the index component */    
      
var React = require('react');    
var ReactDOM = require('react-dom');    
import BodyIndex from './components/bodyindex';    
class Index extends React.Component {      
      
    // Page presentation component rendering
    render() {    
        return (    
            <div>    
                <BodyIndex id={1234567890} name={"IndexPage} "/ >    
            </div>    
        );    
    }    
}    
      
ReactDOM.render(<Index/>, document.getElementById('example'));  
Copy the code

2.2.2 Sub-component BodyIndex code implementation

/** * bodyIndex. js defines a bodyIndex sub-component */    
      
import React from 'react';    
export default class BodyIndex extends React.Component {    
    constructor() {    
        super(a);this.state = {    
            username: "Parry"    
        };    
    }    
      
    render() {    
        setTimeout((a)= > {    
            // Change the state after 5 seconds
            this.setState({username: "React"});    
        }, 5000);    
      
        return (    
            <div>    
              
                <h1>Child component page</h1>    
              
                <h2>State of the current component itself</h2>    
                <p>username: {this.state.username}</p>    
              
                <h2>Arguments passed by the parent component</h2>    
                <p>id: {this.props.id}</p>    
                <p>name: {this.props.name}</p>    
          
            </div>)}}Copy the code

2.3 Page presentation and code interpretation of component instances

The result in the browser is shown below, and after 5 seconds the state of the child component’s username value changes from Parry to React.

You can either write the code locally to run the test or download the source code directly to run it. After running it, notice the updated part of the state page value. The entire page is not reloaded, but only partially updated.

Notice the local updates here. You might think of the familiar Ajax page update without refreshing, but the logic code doesn’t do any DOM element manipulation. This is the core of React and its high performance features.

Explanation of several important points in the example code:

  1. Component defines header usagerequire 或 importSome of the necessary components were introduced, and the third party NPM framework loaded later in React development was also introduced in this way.
  2. componentIndexA child component introduced inBodyIndexThe page layout can be referenced directly in the form of HTML tags.
  3. Child componentsBodyIndexThrough thepropsGets the property values passed by the parent component;
  4. Its attributes passstateTo define, the page display is also directly throughstateBinding, which is later modified in the logical functionstateThe React framework is an important feature of the React framework. All changes to the page are implemented through the React frameworkstateValue change driven.

The complete code can be downloaded at juebook-react-native Demo.

Other related resources in the series

My “React. Introduction to js and actual combat” video tutorial: coding.imooc.com/class/83.ht…

React Native: Rn.parryqiu.com/

More of my free original video tutorials: Devopen. club/

3. Summary

Learn the basics of React by building the React development environment and using an actual component example: JSX, State and props, and realized that the React built page update is completely driven by the change of the background state value. This is different from the foreground framework we have been exposed to before, which is to update the page by directly manipulating the HTML DOM structure.

The advantages of the React framework and the underlying principles behind it will be discussed in detail in the next few chapters, so as to fit the purpose of this series of articles. If you have any other details about developing React, please feel free to ask me in the comments below. There is no space here to explain the basic use of the React framework.