1.引入React

CDN引入

不常用

<script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>

Webpack引入

安装库

yarn add react react-dom

配置引入

import React from "react"
import ReactDOM from "react-dom"

create-react-app

npx create-react-app my-app

2.基于JS的写法

一个失败的例子 在这段代码中App会立即执行，导致后续的操作无效

区分函数和普通代码

普通代码会立即求值，读取变量的当前值

函数调用时才求值，即延迟求值，且值受到执行时机影像

const App1 = React.createElement()是一个React元素 而const App2 = ()=> React.createElement()则是一个函数组件

一个函数组件可以多次执行,得到最新的虚拟DOM React 使用 DOM Diff算法比较不同，局部更新

3.JSX

CDN引入

1. 页面引入 babel.min.js
2. 使用JSX时修改<script>为<script type="text/babel">

使用reate-react-app

Webpack 默认使用babel-loader 处理JSX

注意事项

1. class是关键字 所以HTML的类使用<div className="XXX"></div>
2. 标签内部的所有变量都要使用{}包括，例如{{name:"XXX"}}
3. return时加()