React: How to React

In the last article we used WebPack to set up the project and get it up and running, but this was not enough for corporate use, so we’ll start learning how to use the React framework for development. This article will not discuss the principles, but how to use them from a novice’s point of view. If you haven’t read my first article, you can read my first article on building projects, “The Back End also needs to know a Little bit about the front End series” using WebPack to build projects

Origin of the React

With copper as a mirror, can be dressed; To people, can be bright gains and losses; History is the mirror of success and failure. To understand a technology, one should first understand how it developed and why.

React grew out of an internal project at Facebook, where the company was unhappy with all the JavaScript MVC frameworks on the market and decided to write one for Instagram. After it was built, it was found to be very useful and opened source in May 2013.

React was designed with a unique and revolutionary design concept, with excellent performance and very simple code logic. As a result, more and more people are paying attention and using it as a possible mainstream tool for future Web development.

Basic concepts of the front-end framework

• Modularization: from the point of view of code to analyze, some reusable code, separated into a single module; Facilitate the maintenance and development of the project
• Componentalization: Analyzing from the UI perspective, separating reusable UI elements into separate components; Facilitate the maintenance and development of the project

In fact, the two concepts mentioned above can be reflected in any language. In fact, in other words, what can be public is public, and what can’t be public is written by yourself.

The core concepts in React

There are two technologies involved in learning React, one is virtual Dom and the other is Diff algorithm. I don’t know the implementation principle here, but I will briefly introduce the concepts and my own understanding of these two concepts. I hope to point out any mistakes.

Virtual DOM

Before we get to the virtual DOM we need to know what is the DOM? The DOM is powered by javascript in the browser, so we have to manipulate DOM objects artificially using the fixed APIS provided by the browser. So if we open up any web page here, we can see that every single one of these tabs is actually a DOM. So what is the virtual DOM? Not provided by the browser, but implemented manually by our programmers, similar to the DOM in the browser, but with essential differences.

So why the virtual DOM? In fact, I think in order to improve the browser rendering performance, here to give you an example. The following form forms are common to the front end and can be sorted by clicking on the corresponding column. For example, we clicked the time order from largest to smallest. Here we can see that we only need to change the order of the first two columns, and that finding and re-rendering would be expensive if the entire DOM tree had to be re-rendered for each update.

React introduced the concept of the virtual DOM to solve this rendering problem. The appearance of the virtual DOM is to modify only the data we need to modify, leaving the rest of the data untouched.

In React, the result of render execution is not a real DOM node, but a lightweight JavaScript object called a virtual DOM.

The Diff algorithm

How does React know that we need new data and old data in a different order than the first two rows? In other words, how do you find the difference between old data and new data? So this is the Diff algorithm.

When it comes to trees, I believe most students immediately think of binary trees, traversal, shortest path and other complex data structure algorithms. In React, the tree algorithm is very simple, that is, two trees only compare nodes at the same level.

React will only compare DOM nodes in the same color box, that is, all children of the same parent node. When a node is found to no longer exist, the node and its children are removed completely and are not used for further comparison. This allows you to compare the entire DOM tree with only one walk through the tree.

How to use

This is a brief introduction to the concept, but now it’s time to use it. In the React learning process, two packages need to be installed.

• reactThis is specifically used to create React components, component life cycles, etc.
• react-domIt mainly encapsulates packages related to DOM operations, such as rendering components to pages.

The command to install these two packages is CNPM I react react-dom-s

Then we can import these two packages in our JS file

1import React from 'react'

2import ReactDOM from 'react-dom'

Copy the code

In React, you can only create DOM elements using the JS API provided by React. Use the React. CreateElement method. The react.createElement () method, used to create a virtual DOM object that accepts three or more parameters.

• Parameter 1: is a string parameter representing the type of element to be created
• Parameter 2: is an attribute object that indicates which attributes exist on the element being created
• Parameter 3: A number of virtual DOM objects can be placed following the position of the third parameter. This parameter represents the child nodes of the current element

1var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, 'This is a div.')

Copy the code

What we wrote above creates just such a div element.

1<div title="this is a div" id="mydiv">This is a div</div>

Copy the code

Once we’ve created the element, we want to render it on the page. How do we render it? We create the following elements in the HTML file.

1<div id="app"></div>

Copy the code

Next we’ll render the div element we created above into the element id=app. How do we do that?

1ReactDOM.render(myDiv, document.getElementById('app'))

Copy the code

Next we run the project and find that it has been rendered to our page.

JSX grammar

React might not have evolved so quickly if we had to do this every time we created an element. React has a JSX syntax specification that allows us to write HTML-like code in JS files and quickly define virtual DOM structures.

JSX syntax essentially uses React. CreateElement internally to create elements for us. This means that even if we write JSX tags, we don’t render our HTML tags directly to the page. Instead, we convert them to javascript code like react. createElement and render them.

We install Babel and run the command CNPM I babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -d

• babel-loader: Webpack loader that uses Babel to transform JavaScript dependencies
• @babel/core: Babel-core, which converts ES6 code to ES5
• @babel/preset-envBabel-preset -env, decide which mineralizations/plugins and polyfills to use depending on which browser you want to support, such as providing new features to modern browsers for old browsers
• @babel/preset-react: i.e. Babel-preset-react, which presets Babel for all React plug-ins, such as JSX conversion to functions

Babel is a toolchain for converting ECMAScript 2015+ version code into backwardly compatible JavaScript syntax so it can run in current and older versions of browsers or other environments

Then we also need to create the.babelrc file in the project root directory and add the following

1{

2  "presets": ["@babel/preset-env"."@babel/preset-react"]

3}

Copy the code

Then in the webpack.config.js file in module.exports do the following

 1module: {

 2    rules: [

 3      {

 4        test: /\.js$/,

 5        exclude: /node_modules/,

 6        use: {

 7          loader: 'babel-loader'

 8        }

 9      }

10    ]

11}

Copy the code

Now we can happily use HTML in our JS files.

1var jsxMyDiv = <div>

2This is a DIV element created using JSX syntax

3</div>

4

5ReactDOM.render(jsxMyDiv, document.getElementById('app'))

Copy the code

Next we look at the page to see the element we created.

Here’s an overview of the JSX syntax considerations.

• If you want to write JS code inside JSX syntax, then all JS code must be written inside {}.

  1var titleNmae = "This is a title."
  
  2var jsxMyDiv = <div>
  
  3    <h1 title = {titleNmae}>Test the title</h1>
  
  4</div>
  
  Copy the code

• When compiling JSX code, if < is encountered, it is compiled as HTML code, and if {} is encountered, it is compiled as normal JS code.

• Inside {}, you can write any code that conforms to the JS specification;

• In JSX, if you want to add a class attribute to an element, you must write className because class is a keyword in ES6. Similar to class, the for attribute of the label tag needs to be replaced with htmlFor.

• When JSX creates the DOM, all nodes must have a unique root element wrapped around them;

• If you want to write a comment, the comment must be placed inside {}.

conclusion

So far, from how to create a project to how to simply use the React framework in a project, it feels like learning Java for the first time. Everything is new to me and there are many mistakes in setting up the environment. But when you finally see what you want successfully displayed on the page, it suddenly feels worth it. Maybe that’s the fun of learning.

Interested can pay attention to my new public number, search [program ape 100 treasure bag]. Or just scan the code below.

This article code address

reference

• React (4) : Virtual DOM Diff algorithm parsing
• React virtual DOM
• Introduction to Babel
• Create the React application from scratch using Webpack 4 and Babel 7