ReactJs Basics Tutorial - Essential Edition

1. Introduction to ReactJS

React originated from an internal project of Facebook. Because the company was dissatisfied with all the JavaScript MVC frameworks on the market, it decided to write its own one to build the Instagram website. After it was developed, we found that this system was very useful, so we opened it to the public in May 2013. Because React's design concept is extremely unique, it is a revolutionary innovation with outstanding performance and very simple code logic. Therefore, more and more people are beginning to pay attention to and use it, believing that it may be the mainstream tool for Web development in the future.

ReactJS official website address: http://facebook.github.io/react/

Github address: https://github.com/facebook/react

2. Understanding of ReactJS and the advantages of ReactJS

First of all, there are some misunderstandings about React, which I will summarize here:

• React is not a complete MVC framework. It can be considered as the V (View) in MVC at most. Even React does not fully recognize the MVC development model.
• React's server-side rendering capability is just a nice-to-have feature, not its core purpose. In fact, the React official website barely mentions its server-side application.
• Some people compare React and Web Component, but the two are not completely competitive. You can use React to develop a real Web Component.
• React is not a new template language, JSX is just a representation, and React can work without JSX.

1. Background and principles of ReactJS

In web development, we always need to reflect the changing data to the UI in real time, so we need to operate on the DOM. Complex or frequent DOM operations are usually the cause of performance bottlenecks (how to perform high-performance complex DOM operations is usually an important indicator of a front-end developer's skills). React introduced the Virtual DOM mechanism for this purpose: a set of DOM APIs was implemented using Javascript on the browser side. When developing based on React, all DOM construction is performed through virtual DOM. Whenever the data changes, React will rebuild the entire DOM tree. Then React will compare the current entire DOM tree with the previous DOM tree to get the difference in DOM structure, and then only perform actual browser DOM updates on the parts that need to be changed. React can also batch refresh the virtual DOM. Two data changes within an event loop will be merged. For example, if you continuously change the node content from A to B and then from B to A, React will think that the UI has not changed. If controlled manually, this logic is usually extremely complicated. Although a complete virtual DOM tree needs to be constructed each time, because the virtual DOM is memory data, the performance is extremely high, and only the Diff part is operated on the actual DOM, thus achieving the purpose of improving performance. In this way, while ensuring performance, developers will no longer need to worry about how changes in a certain data are updated to one or more specific DOM elements, but only need to care about how the entire interface is rendered under any data state.

If you have written pure server-side rendered web pages like in the 1990s, you should know that all the server has to do is render HTML based on the data and send it to the browser. If a status text needs to be changed due to a user's click, it is also done by refreshing the entire page. The server does not need to know which small section of HTML has changed, but only needs to refresh the entire page based on the data. In other words, any UI changes are done through an overall refresh. React brings this development model to the front end in a high-performance way. Every time you update the interface, you can think of it as refreshing the entire page. As for how to perform local updates to ensure performance, that is what the React framework needs to accomplish.

Using the chat application example in Facebook's video introducing React, when a new message comes in, the traditional development idea is as shown above. During the development process, you need to know which data has come in and how to add the new DOM node to the current DOM tree. The development idea based on React is as shown below. You only need to care about the data as a whole, and how the UI changes between the two data is completely left to the framework. As you can see, using React greatly reduces the complexity of logic, which means that development difficulty is reduced and there are fewer chances of bugs.

2. Componentization

Virtual DOM not only brings simple UI development logic, but also brings the idea of ​​component-based development. The so-called component is an encapsulated UI part with independent functions. React recommends rethinking the UI composition in the form of components, defining each relatively independent functional module on the UI as a component, and then combining or nesting small components to form large components, and finally completing the construction of the overall UI. For example, Facebook's instagram.com is developed entirely with React. The entire page is a large component that contains a large number of other nested components. If you are interested, you can take a look at the code behind it.

If the MVC idea allows you to separate the view, data, and controller, then the component-based way of thinking brings about the separation between UI functional modules. We use a typical blog comment interface to see the difference between MVC and component-based development ideas.

For the MVC development model, developers define the three as different classes to achieve the separation of presentation, data, and control. Developers tend to split the UI from a technical perspective to achieve loose coupling.

For React, it is a completely new idea. Developers divide the UI into different components from a functional perspective, and each component is independently encapsulated.

In React, you organize and write your code in a way that the interface modules are naturally divided. For the comment interface, the entire UI is a large component composed of small components. Each component only cares about its own part of the logic and is independent of each other.

React believes that a component should have the following characteristics:

(1) Composeable: A component can be easily used together with other components or nested inside another component. If a component creates another component inside, then the parent component is said to own the child component it created. Through this feature, a complex UI can be split into multiple simple UI components;

(2) Reusable: Each component has independent functions and can be used in multiple UI scenarios;

(3) Maintainable: Each small component contains only its own logic, which is easier to understand and maintain;

3. Download ReactJS and write Hello, world

ReactJs is very easy to download. For your convenience, here is the download address http://facebook.github.io/react/downloads.html. After the download is complete, we will see a compressed package. After decompression, we create a new html file and reference the two js files react.js and JSXTransformer.js. The html template is as follows (change the js path to your own):

<!DOCTYPE html>
<html>
 <head>
 <script src="build/react.js"></script>
 <script src="build/JSXTransformer.js"></script>
 </head>
 <body>
 <div id="container"></div>
 <script type="text/jsx">
  // ** Our code goes here! **
 </script>
 </body>
</html>

You may be wondering why the script type is text/jsx. This is because React has its own unique JSX syntax, which is incompatible with JavaScript . Wherever JSX is used, type="text/jsx" should be added. Second, React provides two libraries: react.js and JSXTransformer.js, which must be loaded first. Among them, the function of JSXTransformer.js is to convert JSX syntax into JavaScript syntax. This step is very time-consuming. When it is actually online, it should be completed on the server.

Now we can start writing code. First, let's get to know the React.render method in ReactJs:

React.render is the most basic method of React, which is used to convert the template into HTML language and insert it into the specified DOM node.

Next, we write code in the script tag to output Hello, world. The code is as follows:

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

It should be noted here that react does not rely on jQuery. Of course, we can use jQuery, but the second parameter in render must use JavaScript's native getElementByID method, and jQuery cannot be used to select DOM nodes.

Then, open this page in the browser, and you can see that the browser displays a big Hello, world, because we used the <h1> tag.

At this point, congratulations, you have stepped into the door of ReactJS~~ Next, let's learn ReactJs further~~

4. Jsx syntax

The HTML language is written directly in the JavaScript language without any quotes. This is the syntax of JSX, which allows the mixing of HTML and JavaScript. If you have learned about AngularJs, you will feel very familiar with the following code. Let's look at the code:

var names = ['Jack', 'Tom', 'Alice'];

  React.render(
  <div>
  {
   names.map(function (name) {
   return <div>Hello, {name}!</div>
   })
  }
  </div>,
  document.getElementById('container')
  );

Here we declare a names array, then traverse it and add Hello in front of it, and output it to the DOM. The output result is as follows:

JSX allows to insert JavaScript variables directly in the template. If the variable is an array, all members of the array will be expanded. The code is as follows:

var arr = [
  <h1>Hello world!</h1>,
  React is perfect!
  ];
  React.render(
  <div>*{arr}*</div>,
  document.getElementById('container')
  );

The results are as follows:

The asterisk here is just for identification, don't be confused by it~~

If you have read this far, it means you are quite interested in React. Congratulations, you have made it this far. Now, let’s start learning the real skills of React. Are you ready?

5. ReactJS components

1. Component properties

As mentioned before, ReactJS is based on component-based development. Now let's start learning the components in ReactJS. React allows you to encapsulate the code into components, and then insert the components into the web page like inserting ordinary HTML tags. The React.createClass method is used to generate a component class.

Next, let's write the first component Greet, which has a name attribute and outputs the value of hello + name. The code is as follows:

var Greet = React.createClass({
  render: function() {
   return <h1>Hello {this.props.name}</h1>;
  }
  });

  React.render(
  <Greet name="Jack" />,
  document.getElementById('container')
  );

Seeing this code, friends who have been exposed to AngularJS may feel familiar, but there are a few points to note:

1. To get the value of the property, use this.props.property name

2. The first letter of the created component name must be capitalized.

3. When adding CSS classes to elements, use className.

4. It is also worth noting how the component's style attribute is set. It should be written as style={{width: this.state.witdh}}

2. Component status

Components inevitably interact with users. One of React's major innovations is to view components as state machines. At the beginning, there is an initial state, and then user interaction causes the state to change, thereby triggering re-rendering of the UI. Let's write a small example with a text box and a button. By clicking the button, you can change the editing state of the text box to prohibit editing or allow editing. Use this example to understand the state mechanism of ReactJS. Let’s look at the code first:

var InputState = React.createClass({
  getInitialState: function() {
   return {enable: false};
  },
  handleClick: function(event) {
   this.setState({enable: !this.state.enable});
  },
  render: function() {
   
   return (
   <p>
    <input type="text" disabled={this.state.enable} />
    <button onClick={this.handleClick}>Change State</button>
   </p>
   );
  }
  });

  React.render(
  <InputState />,
  document.getElementById('container')
  );

Here, we use a method getInitialState again. This function is executed when the component is initialized and must return NULL or an object. Here we can access the attribute value through this.state. attribute name. Here we bind the enable value to the disabled value of the input. When you want to modify this attribute value, use the setState method. We declare the handleClick method to bind to the button to change the value of state.enable. The effect is as follows:

Principle analysis:

When the user clicks on a component, causing the state to change, the this.setState method modifies the state value. After each modification, the this.render method is automatically called to render the component again.

A few points worth noting here are as follows:

1. The getInitialState function must have a return value, which can be NULL or an object.

2. The method to access state is this.state.property name.

3. Variables are enclosed in {}, and no double quotes are needed.

3. Component life cycle

The component life cycle is divided into three states:

• Mounting: Inserted into the real DOM
• Updating: being re-rendered
• Unmounting: Moved out of the real DOM

React provides two processing functions for each state. The will function is called before entering the state, and the did function is called after entering the state. There are a total of five processing functions for the three states.

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

In addition, React also provides two special state processing functions.

• componentWillReceiveProps(object nextProps): called when the loaded component receives new parameters
• shouldComponentUpdate(object nextProps, object nextState): Called when the component determines whether to re-render

Let's look at an example:

var Hello = React.createClass({
  getInitialState: function () {
   return {
   opacity: 1.0
   };
  },

  componentDidMount: function () {
   this.timer = setInterval(function () {
   var opacity = this.state.opacity;
   opacity -= .05;
   if (opacity < 0.1) {
    opacity = 1.0;
   }
   this.setState({
    opacity: opacity
   });
   }.bind(this), 100);
  },

  render: function () {
   return (
   <div style={{opacity: this.state.opacity}}>
    Hello {this.props.name}
   </div>
   );
  }
  });

  React.render(
  <Hello name="world"/>,
  document.body
  );

After the hello component is loaded, the above code sets a timer through the componentDidMount method to reset the transparency of the component every 100 milliseconds, thereby triggering re-rendering.

4. Nesting of components

React is based on component-based development, so what is the biggest advantage of component-based development? There is no doubt that it is reuse. Let's take a look at how to implement component reuse in React. Here we will write an example. The code is as follows:

var Search = React.createClass({
  render: function() {
   return (
   <div>
    {this.props.searchType}:<input type="text" />
    <button>Search</button>
   </div>
   );
  }
  });
  var Page = React.createClass({
  render: function() {
   return (
   <div>
    <h1>Welcome!</h1>
    <Search searchType="Title" />
    <Search searchType="Content" />
   </div>
   );
  }
  });
  React.render(
  <Page />,
  document.getElementById('container')
  );

Here we create a Search component, and then create a Page component. Then we call the Search component in the Page component and call it twice. Here we pass in the value through the attribute searchType, and the final result is shown in the figure:

6. ReactJs Summary

That’s all we have learned about ReactJS today. Let’s summarize it below. There are mainly the following points:

1. ReactJs is based on component-based development, so in the end your page should be a large component composed of several small components.

2. You can pass values ​​to the component through attributes. Similarly, you can pass internal results to the parent component through attributes (left for everyone to study); if you want to perform DOM operations on changes in certain values, put these values ​​in the state.

3. When adding external CSS styles to a component, the class name should be written as className instead of class; when adding internal styles, it should be style={{opacity: this.state.opacity}} instead of style="opacity:{this.state.opacity};".

4. The first letter of the component name must be capitalized.

5. The variable name should be enclosed in {} and double quotes should not be included.

6. References

React Chinese documentation http://reactjs.cn/

React Getting Started Tutorial http://www.ruanyifeng.com/blog/2015/03/react.html

Subversion front-end UI development framework: React http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react

This is the end of this article about the ReactJs Basics Tutorial that can be understood at a glance - the essence version. For more relevant ReactJs tutorial content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!