第一节：认识reactreact react的主观意愿总结： React只负责视图渲染，不要要求它去做别的事情简单使

react

它是构建用户界面的javascript库 → 严格上来说不是框架

react的主观意愿

1 → React 仅仅负责View的层的渲染

2 → 它是一个视图渲染库，不做框架的事情

总结： React只负责视图渲染，不要要求它去做别的事情

简单使用react

1 → 添加根容器 id app

2 → 完全CDN方式引入进行开发 → 打包会体积小，cdn是加速的

crossorigin 是允许跨域 → 写上

<!-- react CDN 开发环境 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  
<!-- 生产环境 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

3 → 创建 React组件

React： React API → 提供处理视图的API集合
ReactDOM: 从render函数 → 虚拟DOM → 真实DOM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- react CDN 开发环境 -->
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
  <div id="app"></div>

  <script src="./index.js"></script>
</body>
</html>

index.js

const span = React.createElement('span', {
  className: 'text',
  key: 1
},"This is a span")

ReactDOM.render(
  React.createElement('div', {
    'data-tag': 'div'
  },
  [span]
  ),
  document.getElementById('app')
)

组件渲染

class MyButton extends React.Component{
  constructor(props) {
    super();
    // MyButton中的状态
    this.state = {
      openStatus: false
    }
 
  }
  render() {
    return '视图'
  }
}

ReactDOM.render(
  React.createElement(MyButton),//组件
  document.getElementById('app')
)

react组件

1 → 继承React.Component这个类

2 → render函数返回一个视图

class MyButton extends React.Component{
  constructor(props) {
    super();
    // 状态
    this.state = {
      openStatus: false
    }
 
  }

  render() {
    const oP = React.createElement(
      'p',
      {
        className: 'text',
        key: 1
      },
      this.state.openStatus ? '打开' : '关闭'
    );

    const oBtn = React.createElement(
      'button',
      {
        key: 2,
        onClick: () => {this.setState({
          openStatus: !this.state.openStatus
        })}
      },
      this.state.openStatus ? '关闭 ->' : '<- 打开'
    );
    const wrapper = React.createElement(//=> 容器组件
      'div',
      {
        className: 'wrapper'
      },
      [oP, oBtn]//=> 子组件
    )
    return wrapper;
  }
}


ReactDOM.render(
  React.createElement(MyButton),
  document.getElementById('app')
)

版本选择

创建React 17.0

Node ≥ 10.16

NPM ≥ 5.6

创建React项目

1 → npx create-react-app my-react

内部的工程化: babel → js 、 webpack

2 → cd my react → 进入项目中

3 → yarn start / npm start → 启动

4 → yarn build / npm run build → 打包项目