一. cdn 方式, 新建测试 react 项目
- )NPM init -y
- )NPM i react -S (yarn add react)
直接找 node_modules/react/umd 目录 react.development.JS 文件
3)NPM i react-dom -S (yarn add react-dom)
直接找 node_modules/react-dom/umd 目录 react-dom.development.JS 文件
4)NPM i babel-standalone -S (yarn add babel-standalone)
5) 页面当中的引入顺序:
- a)react.development.JS
- b)react-dom.development.JS
- c)babel.JS
6)script 的 type 属性需要变成 type="text/babel"
a)es6 的语法转换成 es5 的语法
b) 解析 jsx 代码
二. react 简易环境的搭建
三. jsx 的原理
jsx 是一种语法糖
相当于 JS+xml
jsx 的使用, 可以帮助我们提高开发效率
jsx 的原理就是通过 React.createElement(tag,{attrs},content)> 相当于底层创建了 JS 内存对象 (虚拟 dom)=> ReactDOM.render()
四. jsx 一些注意事项
a)jsx ==> JavaScript + xml
b) 有且只能有一个根元素
c) 因为借鉴了 xml 的语法规范, 标签必须要闭合
d)class ==> className
e)jsx 里面事件名需要改成驼峰式写法, 例如 onclick => onClick
f)jsx 里面内联样式 style={{backgroundColor:'yellow'}}
五. react 的插值表达式是一个 { 表达式 }
{} 里面如果放置的是 boolean|undefined|null 的话, 都不会渲染出来
{} 里面如果放置数组的话, 会转成字符串的形式出现
{} 里面如果放置对象的话, 直接报错了. ===> 所以对象不能直接被渲染出来
来源: http://www.bubuko.com/infodetail-3506083.html