如何引入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"
)
]);