react入门---------- 第二章如何使用react

react模板创建

       1. js文件的引入

              react.js

                     核心的js文件

              react-dom.js

                     dom操作

              babel.js

                     将jsx(允许js和html混写)   转化为浏览器能够支持的es5

       2. 结构的书写

              M:dataModel={}    数据部分

扫描二维码关注公众号，回复： 2433216 查看本文章

              V :<div id='root'></div>

              实现两者的交互 ReactDOM.render(内容,位置)

       3. 注意事项

              <scripttype="text/babel"> 调用babel解析页面内容

              内容部分必须有根元素包裹

如何使用react

       react的使用离不开三个核心库

              react.js  核心的js文件

              react-dom.js  dom操作

              babel.js  将jsx(允许js和html混写)   转化为浏览器能够支持的es5

使用方法

              使用nodejs NPM安装 react

              使用 nodejs里的Create React App  进行react安装

              安装react

                     全局安装：npm install -g create-react-app

                     创建 react项目：create-react-app +项目名

                     运行react   npm start

              直接使用script引用

                     js核心库

新版（new）

              <scriptsrc="https://unpkg.com/react@16/umd/react.development.js"></script>

              <!--react的与dom相关的一些功能-->

        <scriptsrc="https://unpkg.com/reactdom@16/umd/reactdom.development.js"></scrit>

              <!--将浏览器不支持的jsx语法转化为js语法-->

       <scriptsrc="https://unpkg.com/[email protected]/babel.min.js"></script>

旧版（old）

       <scriptsrc="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>

       <scriptsrc="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

       <scriptsrc="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>