如何引入React

一、 CDN引入（按照顺序）

• 引入React: https://..../recat.x.min.js
• 引入ReactDOm:https://.../react-dom.x.min.js

小补充

• cjs和umd区别
  1. cjs全程CommonJS，是Node.js支持的模块规范
  2. umd是统一模块定义，兼容各种模块规范（含浏览器）
  3. 理论上优先使用umd,同时支持Node.js和浏览器
  4. 最新的模块规范是使用import和export关键字

二、命令行引入

• yarn global add create-react-app
• create-react-app 项目目录名
• yarn add react@x.x.xreact-dom@x.x.x 回退到旧版本，默认会安装最新版，根据需要回退旧版本

实现一个小功能-使用最原始代码

 - 按下按钮，使得数组+1

• 显示数字

const React=window.React       

const ReactDOM=window.ReactDOM;    

const root=document.querySelector('#root') 

let n=0;

const App=React.createElement("div",null,n)  //最基本格式，创建div

ReactDOM.render(App,root)  //渲染

• 显示按钮

const React = window.React;
const ReactDOM = window.ReactDOM;
const root = document.querySelector("#root");
let n = 0;
const App = React.createElement("div", null, [
  n,
  React.createElement(
    "button",
    {
      onClick: () => {
        n += 1;
      }
    },
    "+1"
  )
]);
ReactDOM.render(App, root);

• 代码改进

const React = window.React;
const ReactDOM = window.ReactDOM;
const root = document.querySelector("#root");
let n = 0; 
const App=()=> React.createElement("div", null, [  //App由对象变成函数
  n,
  React.createElement(
    "button",
    {
      onClick: () => {
        n += 1;
        ReactDOM.render(App(), root);
      }
    },
    "+1"
  )
]);
ReactDOM.render(App(), root);

JSX

注意事项

• 注意className
  • <div className='red'>n</div>被转义为
  • React.createElment("div",{className:"red"},"n")
• 插入变量
  • 标签里面所有JS代码都要用{}包起来
  • 使用变量n : {n}
  • 使用对象: {{name:"jack"}}
• return后面最好加()

React代码风格

以条件判断为例

• 方法一

const Component = () => {
    return n % 2 ===0? <div>n是偶数</div> :
        <span>n是奇数</span>
}
//如果外面是div可以写成
const Component = () => {
    return (
        <div>
            {n % 2 === 0 ? <div>n是偶数</div> : <span>n是奇数</span>}
        </div>
    )
}

• 方法二

//将return的标签赋值给变量，返回变量
const Component = () => {
    const content=(
        <div>
            {n % 2 === 0 ? <div>n是偶数</div> : <span>n是奇数</span>}
        </div>
    )
    return content
}

• 方法三

//将内部判断的标签作为变量，然后将变量传入content中
let n = 1;
const Component = () => {
    const inner = n % 2 === 0 ? <div>n是偶数</div> : <span>n是奇数</span>
    const content = (
        <div>
            {inner}
        </div>
    )
    return content
}

• 方法四

//传统的if/else判断
const Component = () => {
    
    let inner
    if (n%2 === 0) {
        inner = <div>n是偶数</div>
    } else {
        inner = <span>n是奇数</span>
    }
    const content = (
        <div>
            {inner}
        </div>
    )
    return content
}

循环遍历

• 例1

const Component = (props) => {
    return props.numbers.map((n, index) => {
        return <div>下标为{index }值为{n}</div>
    })
    
}
//如果外面包裹着div
const Component = (props) => {
    return (
        <div>
            {
        props.numbers.map((n, index) => {
        return <div>下标为{index }值为{n}</div>
    })
            }
        </div>
        
    )
}

• 例2

//数组面放入标签
const Component = (props) => {
    const array = []
    for (let i = 0; i < props.numbers.length;i++){
        array.push(
            <div>下标为{i}值为{props.numbers[i]}</div>
        )
    }
    return <div>{array}</div>
}