react基础

1. react 基础

1.1 本地引入或CDN引入react的三个js文件

注意：必须先导入react.js再导入react-dom.js

babel.js支持原生jsx语法，作用：把jsx转化为js语法，才能被浏览器识别渲染出视图

<script src="./react/react.js"></script>
<script src="./react/react-dom.js"></script>
<script src="./react/babel.js"></script>

1.2 定义react数据 渲染根标签，相当于vue的el

<div id="myAPP"></div>

1.3 在script标签中实现react的模板、数据和逻辑

使用 type=“text/babel” 把script中的js环境切换为jsx环境，因为babel支持原生jsx语法

• 而vue的模板是在根标签中，数据和逻辑在js中

<script type="text/babel">
    var zhangsan = {name: "张三"}
    function add(a,b){return a+b}
    // 4, 使用react内置API ReactDOM.render() 把模板和数据渲染到视图上
    ReactDOM.render(
      // 第一个参数：需要渲染的模板和数据
      <h1>这是react模板信息-{zhangsan.name}-{add(4,5)}</h1>,  // jsx语法会把标签解析为一个对象，不会报错
      // 第二个参数：模板数据渲染的位置（根标签）
      document.getElementById("myAPP")
    )
</script>

1.4 使用react内置API ReactDOM.render() 把模板和数据渲染到视图上

ReactDOM.render() 有两个参数：

• 第一个参数：需要渲染的模板和数据
• 第二个参数：模板数据渲染的位置（根标签）

两个参数中间记得加 逗号

ReactDOM.render(
  // 第一个参数：需要渲染的模板和数据
  <h1>这是react模板信息-{zhangsan.name}-{add(4,5)}</