导航

认识

介绍
- 构建用户界面的 JavaScript 库
- 不是框架
React 主观意愿
1. React 仅仅负责 View 层渲染
2. 是一个视图渲染的工具库，不做框架的事情
总结
- 只负责视图渲染，不要要求 React 干其他的事情

简单使用

添加根容器 <div id="app">...</div>
引入 CDN 脚本
创建 React 组件
1. React: 提供 React API（处理视图的 API 集合）
2. React-DOM：从 render → 虚拟 DOM → 真实 DOM
3. 继承 React.Component
4. render 函数返回一个视图

<!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>Learning React</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- 开发环境 -->
    <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> -->
    <script src="./js/01简单使用.js"></script>
  </body>
</html>

const span = React.createElement(
  "span",
  {
    className: "text",
    key: 1,
  },
  "This is a span"
);
ReactDOM.render(
  React.createElement(
    "div",
    {
      className: "container",
    },
    [span]
  ),
  document.getElementById("app")
);

Untitled

使用 class 创建组件

class MyButton extends React.Component {
  constructor(props) {
    super(props);
    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 oWrapper = React.createElement(
      "div",
      {
        className: "container",
      },
      [oP, oBtn]
    );
    return oWrapper;
  }
}

const span = React.createElement(
  "span",
  {
    className: "text",
    key: 1,
  },
  "This is a span"
);
ReactDOM.render(React.createElement(MyButton), document.getElementById("app"));

Untitled

Create a New React App

npx: npm5.2+ 的包运行工具
create-react-app 内部的工程化依赖: babel/webpack

npx create-react-app my-react-app
cd my-react-app
npm start

函数组件写法

function App() {
  return (
    <div className="App">
      <h1>This is my first react app</h1>
    </div>
  );
}

export default App;

class 写法

import React, { Component } from 'react';

class App extends Component {
  render() {
      return (
        <div className="App">
          123
        </div>
      );
  }
}
export default App;

index.html

Untitled

React.StrictMode

用 React.StrictMode 包裹后，能够检查一些 React 警告与错误，例如一些编写一些将来要弃用的语法或使用方法（e.g. ref=“demo”），控制台能够给出警告

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);