How to introduce React

There are two ways

Import React from the CDN

CND introduction (note the order)

<script src="https://... /react.development.js"></script> <script src="https://... /react-dom.development.js"></script>Copy the code

Difference between CJS and UMD

CommonJS is a module specification supported by Node.js

Umd is a unified module definition, compatible with various module specifications (including browsers)

Theoretically umD is preferred and supports both Node.js and browsers. The latest module specification uses the import and export keywords

Introduce React via Webpack

import … from …

Yarn add react react-dom import react from 'react' import ReactDOM from 'react' // Pay attention to caseCopy the code

other

In addition to webpack, rollup and Parcel are also supported

choose

create-react-app

// Step yarn global add create-react-app create-react-app react-demo-1 CD react-demo-1 yarn startCopy the code

Configure yourself with Webpack/rollup

React implements +1

The sample

Note that because simple APP = React. Create… Execute only once

So what we need to do is declare APP as a function, and the function can get the latest value

Because the function reads the latest value of an external variable when it executes, it prints six sixes.

The essence of a function – delay

Compare normal code with functions

Common code

let b = 1 + a
Copy the code

Functions (no arguments discussed)

let f = () => 1 + a
let b = f()
Copy the code

The difference

Normal code immediately evaluates, reading the current value of A

The function will wait until it is called to evaluate, that is, delayed evaluation, and the latest value of A will not be read until it is evaluated

Compare the React element with the function component

contrast

App1 = react. createElement('div', null, n) // App1 is a React element App2 = () => react. createElement('div', null, n) N) // App2 is a React function componentCopy the code

revelation

Function App2 is lazy code that executes when called

(Note the timing of code execution, not synchronous and asynchronous, synchronous asynchrony is concerned with the timing of results)

conclusion

The React elements

The return value of createElement can represent a div

But an Element is not really a DIV (DOM object), so we call it a virtual DOM object

() => React element

Function that returns element, which can also represent a div

This function can be executed multiple times to get the latest virtual div each time

React will compare two virtual divs, find out the differences, and update the view locally

Finding different algorithms is called the DOM Diff algorithm

The use of the JSX

Vue and React

Vue has a Vue – loader

The.vue file writes

The essence of a function – delay

Compare normal code with functions

Common code

let b = 1 + a
Copy the code

Functions (no arguments discussed)

let f = () => 1 + a
let b = f()
Copy the code

The difference

Normal code immediately evaluates, reading the current value of A

The function will wait until it is called to evaluate, that is, delayed evaluation, and the latest value of A will not be read until it is evaluated

Compare the React element with the function component

contrast

App1 = react. createElement('div', null, n) // App1 is a React element App2 = () => react. createElement('div', null, n) N) // App2 is a React function componentCopy the code

revelation

Function App2 is lazy code that executes when called

(Note the timing of code execution, not synchronous and asynchronous, synchronous asynchrony is concerned with the timing of results)

conclusion

The React elements

The return value of createElement can represent a div

But an Element is not really a DIV (DOM object), so we call it a virtual DOM object

() => React element

Function that returns element, which can also represent a div

This function can be executed multiple times to get the latest virtual div each time

React will compare two virtual divs, find out the differences, and update the view locally

Finding different algorithms is called the DOM Diff algorithm

The use of the JSX

Vue and React

Vue has a Vue – loader

The.vue file writes

The React with JSX

change to react. createElement(‘button’,{onClick:… }, ‘+’ 1 ‘)

This uses compilation principles

Jsx-loader could do this and was later replaced by Babel-Loader, which was built into WebPack

Use the JSX

Method 1: CDN

The sample

This approach does not seem to support SRC

Note:

Never use method 1 in a production environment because it is inefficient

It downloads a babel.min.js and translates JSX into JS on the browser side

This step can be done at build time (see method 2, method 3)

Method 2: webpack + babel-loader

Method 3: Use create-react-app

This is similar to @vue-cli

Install yarn Global add create-react-app globally

Initialize the create-react-app react-demo-1 directory

Go to CD react-demo-1

Start developing YARN Start

In this way, JSX syntax is used by default, and Webpack makes JS go babel-loader by default

Considerations for using JSX

Note the className

n

is translated as

React.createElement('div', {className:'red'},"n")

Insert the variable

All JS code inside the tag should be wrapped with {}

If you need the variable n, wrap it around {}

If you need an object, wrap it around {}, such as {{name:’river’}}

Get used to return followed by ()

Conditional judgment and loop

if... else...Conditional control sentence

In the Vue

< the template > < div > < div v - if = "n % 2 = = = 0" > n is an even number < / div > < span v - else > n is an odd number of < / span > < / div > < / template >Copy the code

JSX conditional judgment

In the React
const Component = () => { return n%2 === 0 ? <div>n = even </div> : <span>n = odd </span>} // Const Component = () => {return (<div> {n%2===0? <div>n is even </div> : <span>n is odd </div>} </div>)}Copy the code
Or we could write it as
const Component = () => { const content = ( <div> { n%2===0 ? </div> : <span>n is odd </span>} </div>) return content}Copy the code
Or we could write it as
const Component = () => { const inner = n%2 === 0 ? <div>n is even </div> : <span>n is odd </span> const content = (<div> {inner} </div>) return content}Copy the code
Or we could write it as
Const Component = () => {let inner if(n%2===0) {inner = <div>n is even </div>} else {inner = <span>n is odd </span>} const content = ( <div> { inner } </div> ) return content }Copy the code

conclusion

In Vue, you can only write conditional judgments using the syntax provided by Vue

When you write anything like React, you’re writing JS

Loop statement

You can iterate through groups and objects in Vue

< the template > < div > < div v - for = "(n, index) in Numbers" : the key = "index" > subscript {{index}}, a value of {{n}} < / div > < / div > < / template >Copy the code
In the React
Const Component = (props) =>{return props. Numbers. Map ((n,index)=>{return <div> subscript {index} is {n}</div>})} // If you need outside Div. Const Component = (props) =>{return (<div> {props. Numbers. Map ((n,index)=>{return <div> subscript {index} is {n}</div>})}}  </div>) }Copy the code
You can do it in React
const Component = (props) => { const array = [] for (let i=0; i<props.numbers.length; I++) {array. Push (< div > subscript values {I} for {props. The Numbers [I]} < / div >)} return < div > < / div >} {array}Copy the code

conclusion

In Vue, you can only write loops using the syntax provided by Vue

In React, you’re writing JS