安装react的环境
npm install -g create-react-app 复制代码
最后利用脚手架建立项目demo01
create-react-app demo01 复制代码
（关于create-react-app很慢的问题）由于某原因,在拉取各种资源时,往往会巨慢
解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已，而在寻求create-react-app的相关配置希望修改registry时失败了，最后发现create-react-app指令默认调用npm，于是直接把npm的register给永久设置过来就好了，这样使用cnpm或者npm就没差别了。
npm config set registry https://registry.npm.taobao.org -- 配置后可通过下面方式来验证是否成功 npm config get registry -- 或npm info express 复制代码
设置成功后，再执行create-react-app my-app，就会有惊喜。
\
react的优缺点：
优点：
1、JSX写在javascript里，执行更快，编译为javascript代码时进行优化
2、类型更安全，编译过程如果出错就不能编译，及时发现错误
3、JSX编写模板更加简单快速（不要跟vue比）
\
注意：
1、JSX必须要有根节点
2、正常的普通HTML元素要小写，如果是大写，默认认为是组件
\
JSX表达式
1、由HTML元素构成
2、中间如果需要插入变量用{}，且不用写""或者''
3、{}中间可以使用表达式
4、{}中间表达式中可以使用JSX对象
5、属性和html内容一样都是用{}来插入内容
\
JSX的class是className, 而不是直接class（当然，直接class也不会出错）
import React from 'react' import ReactDOM from 'react-dom' const classStr = "regBg" const element = ( <div> <h1 className={"abc " + classStr}>hello world</h1> </div> ) ReactDOM.render(element, document.getElementById('root')) 复制代码
结果：
如果classname是数组形式 =>
如：
import React from 'react' import ReactDOM from 'react-dom' const classStr = ["regBg", "red"] const element = ( <div> <h1 className={classStr}>hello world</h1> </div> ) ReactDOM.render(element, document.getElementById('root')) 复制代码
则会报错， {}内可写数组，可无法识别
结果：
如果数组的拆分再合并，则可以 如 =>
import React from 'react' import ReactDOM from 'react-dom' const classStr = ["regBg", "red"].join(' ') const element = ( <div> <h1 className={classStr}>hello world</h1> </div> ) ReactDOM.render(element, document.getElementById('root')) 复制代码
结果：
JSX的style
如果在JSX里面写style，是没有-的，并且第二个字母需要大写（borderBottom: 1px solid #ddd;）
import React from 'react' import ReactDOM from 'react-dom' const exampleStyle = { background: "skyblue", borderBottom: "1px solid #red" } const element = ( <div> <h1 style={exampleStyle}>hello world</h1> </div> ) ReactDOM.render(element, document.getElementById('root')) 复制代码
1、class、style中，不可以存在多个class或者style属性
<div class='abc' class={active}></div> // 错误的表示 复制代码
2、style样式中，如果存在多个单词的属性组合， 第二个单词开始， 首字母大写, 也可以用引号''写起来
const exampleStyle = { backgroundColor: "skyblue", borderBottom: "4px solid red", 'background-image': "url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png)" } 复制代码
3、注释
必须要括号的表达式内书写，否则报错 => {/* 代码 */}
