引入React

1、从CDN引入React
引入React：https://.../react.x.min.js
引入ReactDOM:https://.../react-dom.x.min.js
2、使用JSX的方式

• 2.1 使用create-react-app的方式(推荐)
  1、全局安装: yarn global add create-react-app
  2、初始化目录: create-react-app react-demo
  3、进入目录:cd react-demo
  4、开始开发:yarn start
• 2.2 使用CDN
  1、引入babel.min.js
  2、把<script>改成<script type="text/babel">

实现+1功能

我们分别使用jsx和非jsx来实现。

非jsx方式

选择 codesandbox里的原生js，，通过cdn的方式引入React

在index.js里实现+1功能

jsx方式实现:

还是跟上面一样，通过引入cdn的方式

对比之下，是不是觉得jsx写的比较清爽呢?

JSX注意事项

• 注意className
  <div className="red">n</div>被转译为React.createElement('div',{className:'red'},"n")
• 插入变量
  标签里的所有js代码都要用{}包起来
  如果需要变量n,就用{}把n包起来
  如果需要对象，就用{}把对象包起来，如{{name:'jack'}}
• 习惯return后面加（()