1. React 初始化项目 JSX 的基本使用 创建组件（函数、类） 将组件抽离到js文件中

1. React 基本使用

创建一个 package.json 文件， 用 npm init -y 来创建

// 先下载 react 和 react-dom 
npm i react react-dom

// 在html中写后续代码
<div id="root"></div>

    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    

    <script>
        const title = React.createElement('h1', null, 'hello  world')

        ReactDOM.render(title, document.getElementById('root'))
    </script>

2. React 脚手架初始化项目

npx create-react-app my-app

cd my-app
npm start  或者  yarn start

3. React脚手架中使用React

4. JSX 的基本使用 JSX 才是React的核心内容

import React from 'react'
import ReactDOM from 'react-dom'

const title = <h1>hello JSX<span>我是span标签</span></h1>

ReactDOM.render(title, document.getElementById('root'))

5. JSX 的注意事项

6. JSX 的表达式 {变量名}

const name = 'Jack'

const title = (
  <h1 className='name'>hello JSX， {name}<span /></h1>
)

7. JSX 的表达式 的注意事项

8. React 和 Vue 的区别

Vue 是给 html 标签添加 指令（v-for   v-model） 属于造轮子的方法来增强 html 的功能

React 是 用 js 的（方法）特性来增强 html 的功能

8. 组件是 React 的一等公民， 使用 React 就是在用组件

用函数来创建组件

// 函数组件
// function Hello() {
//   return (
//     <div>我的第一个函数组件</div>
//   )
// }

// 箭头函数
const Hello =  () => <div>我的第一个函数组件</div>


ReactDOM.render(<Hello />, document.getElementById('root'))

用类来创建组件

// 类组件
class Hello extends React.Component {
  render() {
    return (
      <div>我的第一个类组件</div>
    )
  }
}

ReactDOM.render(<Hello />, document.getElementById('root'))

9. 将组件抽离到js文件中