react模板创建
1. js文件的引入
react.js
核心的js文件
react-dom.js
dom操作
babel.js
将jsx(允许js和html混写) 转化为浏览器能够支持的es5
2. 结构的书写
M:dataModel={} 数据部分
V :<p id='root'></p>
实现两者的交互 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/babel-standalone@6.15.0/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>