React 使用方法

282 阅读1分钟

如何引入React

新手用create-react-app(命令,类似vue-cli)

yarn global add create-react-app//安装Create React App

cd ~/jirengu//进入目标文件夹,输入以下命令

create-react-app 文件名(如react-demo-1)//安装react

//运行以下两句命令
cd react-demo-1
yarn start

然后出现一个http://localhost:3000/端口的react页面,如下图:

老手用webpack/rollup(自己配置)

React 是用于构建用户界面的 JavaScript 工具库。

1、进入https://www.bootcdn.cn/

2、复制对应的链接

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
    <script src="src/index.js"></script>
</body>

cjs和umd的区别

cjs(CommonJS),Node.js支持的模块规范(模块声明定义方法)。Node.js有一个自己的模块声明定义方法,这个方法就叫cjs。

umd是统一模块定义,兼容各种模块规范。因此优先使用umd。

使用React需要更加扎实的JS基础知识

代码示例1:App直接等于表示div的对象

const App = React.createElement("div",{},[n,...]);

代码示例2: App等于一个函数,这个函数执行之后,才会返回这个对象

const App = () =>
  React.createElement("div",{},[
    n,
    React.createElement(
      "button",
      {
        onClick: () => {
          n += 1;
          ReactDOM.render(App(), root);
        }
      },
      "+1"
    )
  ]);

函数在执行的时候会重新读取n的值,因此示例2中n的值会变化,示例1中n的值不会变化。

codesandbox.io/s/funny-mat…

React类组件的使用: n+1 的 demo

codesandbox.io/s/stoic-eas…

React函数组件的使用: n+1 的 demo

codesandbox.io/s/vigorous-…