How do you React

1. CDN introduction (2 files)

  1. React.min.js:cdn.bootcss.com/react/16.10… Cdn.bootcss.com/react/16.10…
  2. The react – dom. Min. Js:

CJS (commonJS) and UMD (umD) are used in the same way as umD (umD). They are compatible with various modules (including browsers).

2. Webpack introduced

yarn add react react-dom
Copy the code
import React form "react"
Copy the code
import ReactDOM from "react-dom"
Copy the code

3. create-react-app

yarn global add create-react-app
Copy the code

Create a React app

create-react-app app-name
Copy the code

JSX optimizes React

JSX is similar to Vue’s VUe-loader, allowing the creation of an external component, but Webpack’s Babel-Loader has merged its functionality

How to create a React component seeReact learn notes (2)

1. CDN introduction (not recommended)

< script SRC = "https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js" > < / script >

Then write the script part to the tag

<script type="text/babel">
      let n = 0;
      const App = (a)= > (
        <div>{n} // Insert variables with {}<button
            onClick={()= >{ n += 1; render(); }} // Insert function with {} > +1</button>
        </div>
      );
      const render = (a)= >
        ReactDOM.render(<App />, document.querySelector("#app")); // Since we are using JSX syntax here, the render argument is used<App />Render ();</script>
Copy the code

2. webpack+babel-loader

3. Use create-react-app directly

4 Grammar precautions

1.className

<div className="name"></div>
// We cannot write class directly because this is JSX syntax, it will be translated into JS and class is the keyword
// Class ="name"
Copy the code

2. Insert variable must use {}

{n}/ / variable n
{jscode}/ / js code
{fn}/ / function
{obj}/ / object
Copy the code

3. Add () when return

fn(){
    return (....)
} 
Copy the code

React if and for

1. if

const testApp=(a)= >{
  return (
    <div>
      {
        n%2===0?<div>{n} is even</div>:<div>{n} is odd</div>
      }
    </div>)}Copy the code

React is more like native JS and more flexible than Vue, which can only be written in V-if

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

2. loop

const testApp=(props) = >{
  return (
    <div>
      {
        props.number.map((n,index)=>{
            return <div>{n} is subscript {index}</div>})}</div>)}Copy the code
// Or so it goes
const testApp=(props) = >{
  const arr=[]
  for(let i=0; i<props.number.length; i++){ arr.push(<div>{props. Number [I]} is subscript {I}</div>)}}Copy the code

Compare Vue

< the template > < div > < div v - for = "(n, index) in Numbers" : the key = "index" > {{n}} the subscript is {{index}} < / div > < / div > < / template >Copy the code