react起手式

从CDN引入React（不推荐）

引入React要比Vue要麻烦，Vue只需引入一个即可，而React同时要引入三个: React，ReactDOM, babel-standalone，在bootCDN中引入，注意引入顺序，先React，再ReactDOM,最后引入babel-standalone

引入
  • React: <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
  • ReactDOM: <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
  • babel-standalone：<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
上面三个东西是什么
  • React：React是react的核心库，
  • ReactDOM：提供操作DOM的react的扩展库，
  • babel-standalone：解析JSX语法代码，转化为js代码的库
代码示例：显示hello lucidity
  <body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <script type="text/babel">    type的类型便不再是javascript，而是babel，
      const Vdom =( <div>          虚拟DOM
          <h1>hello lucidity</h1>
      </div>)
      ReactDOM.render(Vdom, document.getElementById('app'))   渲染到真实DOM上
    </script>
  </body>

其实，我们不引入babel-standalone也是可以写代码的，但是很不方便，看下面的栗子：要求div里面有一个span标签和h1标签

引入babel-standalone的代码

  <body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <script type="text/babel">
      const Vdom =( <div>
        <span>hello lucidity</span>
          <h1>hello lucidity</h1>
      </div>)
      ReactDOM.render(Vdom, document.getElementById('app'))
    </script>
  </body>

下面是不引入的代码

  <body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script>
        const Demo = React.createElement('div',null,[
          React.createElement('span',null,'hello lucidity'),
          React.createElement('h1',null,'hello lucidity') 
          //////React.createElement括号里面（标签，标签属性，标签内容）对应h1，属性无，'hello lucidity'，标签属性也可以写成对象的形式
        ]);
        ReactDOM.render(Demo,document.querySelector('#app'))
    </script>
  </body>

通过对比，显然引入babel-standalone，使用jsx语法看起来更加简洁

通过webpack引入React（老手用）

webpack已经将上面三个东西配置好了

通过create-react-app引用

和vue-cli类似，
做项目再用，学习用cdn引入就行

虚拟DOM与真实DOM

什么是虚拟DOM？什么是真实DOM，看栗子

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <script type="text/babel">   
    const Tdom = document.querySelector("#app")
      const Vdom =( <div>          
          <span>hello lucidity</span>
      </div>)
      ReactDOM.render(Vdom, Tdom)   
      console.log(Vdom);
      console.log(Tdom);
    </script>

  </body>

我们分别打印上面的Vdom和Tdom，看看它们到底是什么东西

image.png

关于虚拟DOM

  • 本质是Object类型的一般对象
  • 虚拟DOM与真实DOM相比较‘轻’，因为虚拟DOM是React内部在用，无需真实DOM上那么多属性（点开控制台中打印的内容即可查看）
  • 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

JSX语法规则

如何给元素添加类名
  • 要用className，比如要给上面图中span添加一个.red类名：
    <span className = "red">hello lucidity</span>
  • 如何用内联样式写呢
    <span className="red" style = {{fontSize: '100px',color: 'white'}}>hello lucidity</span>
    内联样式要用{{}}，外面{}表示要写js表达式了，里面的{}表示要写的是一个对象；注意：要写多个属性是，用逗号隔开；像font-size这样的，要使用驼峰
绑定一个数据

比如说：let n= 'HELLO'，把n放在lucidity的前面，要用{}包裹<span className = "red">{n.toLowerCase()}lucidity</span>

只有一个根标签
      const Vdom =( 
        <div>          
          <span>{n.toLowerCase()} lucidity</span>
        </div>
        <div></div>
      )

写成这样就会报错

如何进行循环
  <body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <script type="text/babel">   

    const Tdom = document.querySelector("#app")   真实DOM
    let arr = [1,2,3]
      const Vdom =( 
        <ul>          
          {
            arr.map((num,index)=>{
                return <li key={index}>{num}</li>    要加key，要不然会报错
            })
          }  
        </ul>
      )
      ReactDOM.render(Vdom, Tdom)   
    </script>
  </body>

ul下面的{}里面为什么用map，而不用for循环，因为{}里面必须为js表达式，而for循环不是表达式，而是js代码语句
表达式有：

  • a
  • a+b
  • demo(1)
  • arr.map()
  • function demo() {}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 2020-01-18-react起手式
    1.cdn引入，要引入两个react,react-dom,注意顺序先react,cdn很麻烦一般不使用, 2.um...
    Ories阅读 2,817评论 0赞 0
  • React起手式
    引入React CDN引入Reactbootcdn cjs 和 umd 的区别 cjs 全称是 Common JS...
    fanison阅读 3,456评论 0赞 0
  • React框架大笔记
    React框架学习 React的起源和发展 起初facebook在建设instagram（图片分享）的时候嘞，因为...
    hcySam阅读 4,001评论 0赞 1
  • React
    初识React与JSX 加载引入 -基于浏览器\ 的模式 -基于自动化的集成环境模式 基于浏览器\ 的模式 Rea...
    kino2046阅读 1,396评论 0赞 0
  • react
    React框架学习 React的起源和发展 React的出发点 React与传统MVC的关系 React高性能的体...
    J_Ronaldo阅读 3,355评论 0赞 1

友情链接更多精彩内容