React起手式

老老老老李

已于 2022-05-12 12:28:34 修改

阅读量699

点赞数 1

文章标签： React起手式

于 2022-04-17 12:56:40 首次发布

本文链接：https://blog.csdn.net/baidulixueqin/article/details/124227727

版权

React起手式

目录
1.如何引入React
2.函数的本质–延迟如何使用React里的函数？
3.JSX的用法
4.条件判断与循环

引入React(3种方法)

1’ CDN引入(不推荐)
需要引入2个库：先引react 后引react-dom,注意顺序

<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>

  <script src="src/index.js"></script> //引入之后就可以使用你自己的js了
</body>

测试是否引用成功
本地运行parcel src/index.html
⚠️注意:CDN引入的都会变成全局变量window

console.log(window.React); //打印出一个对象
console.log(window.React.createElement); //打印出一个函数
console.log(window.ReactDOM); //对象
console.log(window.ReactDOM.render); //函数

这种方法没人用，如果想升级就需要重新复制版本号，麻烦。

其它
1.cjs和umd的区别？(优先用umd)
在这里插入图片描述

cjs全称CommonJS,是Node.js支持的模块规范。
模块规范指"如何声明一个模块",平时我们是const x = {...}然后导出export default x就声明一个可以被别人导入的模块。Node.js有自己的模块定义方法，这个方法就叫cjs。

umd是统一模块定义，兼容各种模块规范(含浏览器)
理论上优先使用umd,同时兼容Node.js上的模块和浏览器模块。
最新的模块规范是使用import和export关键字。

2’ 通过webpack引入React(不推荐)
这种方法需要配置webpack，也麻烦，不用。
除webpack外，rollup、parcel也支持上面写法。这2个工具都支持，把浏览器不支持的JS变成浏览器支持的JS。

3’ 用命令行create-react-app (推荐)

create-react-app跟vue-cli是同一个级别的东西。
新手用create-react-app,老手用webpack/rollup

🔍create react app

//打开终端工具iTerm
yarn global add create-react-app 
cd ~/Desktop 
create-react-app react-demo //新建项目react-demo
cd react-demo
yarn start //启动服务
中断control+c，用VSCode打开项目
yarn start //启动服务

测试是否引用成功console.log(React)
在这里插入图片描述

补充
1.npx在windows上兼容性不好，用yarn
2.启动失败的话就运行yarn run eject让配置文件可见，然后再yarn start

React初体验

例子:用React实现+1

//用codesandbox
console.log(window.React);
console.log(window.React.createElement);
console.log(window.ReactDOM);
console.log(window.ReactDOM.render);

const React = window.React;
const ReactDOM = window.ReactDOM;

let n = 0;
const App = () => React.createElement("div", null, [
    n,
    React.createElement(
      "button",
      {
   
        onClick: () => {
   
          n += 1;
          console.log(n); //这一句是精髓
          ReactDOM.render(App(), document.querySelector("#app"))

最低0.47元/天解锁文章

老老老老李

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
React起手式

React起手式目录1.如何引入React2.函数的本质–延迟如何使用React里的函数？3.JSX的用法4.条件判断与循环引入React(3种方法)1’ CDN引入(不推荐)需要引入2个库：先引react 后引react-dom,注意顺序<body> <div id="app"></div> <script src="https://cdn.bootcss.com/react/16.10.2/umd/react.developm
复制链接

扫一扫