React的使用【函数式组件】和【类组件】

React脚手架

1. CRA
2. dav
3. umi

用CRA【create-react-app】脚手架构建项目

全局安装create-react-app

$ npm install -g create-react-app

如果不想全局安装，可以直接使用npx

npx create-react-app your-app	也可以实现相同的效果

创建一个项目
create-react-app your-app 注意命名方式
create-react-app your-app --typescript这是React+TS脚手架构建
npx create-react-app demo --template typescript(ts推荐用这个，比较完整)
启动项目项
npm start // 开发环境下运行
npm run build // 生产环境打包
npm test // 测试环境下运行
npm run eject // 配置文件抽离

// webpack配置放在了node_modules/react-scripts里面 通过npm run eject配置文件抽离

• 生成项目的目录结构如下：
  ├── README.md 使用方法的文档
  ├── node_modules 所有的依赖安装的目录
  ├── yarn-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。
  ├── package.json 项目依赖配置记录文件 、 记录项目脚本命令
  ├── public 静态公共目录（ 生产环境 ） 不会被webpack编译
  |-- config 项目webpack配置文件
  |-- scripts 项目wepback脚本命令执行文件
  └── src 开发用的源代码目录
  • index.js 项目入口文件
  • index.css 项目全局样式
  • App.js 构建了一个App组件，是项目最大的组件 【 类似根组件 】
  • App.css 是App组件的样式文件
  • App.test.js 是App组件测试文件
  • logo.svg 初始项目的界面logo
  • serverWorker 内部文件，我们不操作

编写第一个react应用程序

把通过CRA创建的工程目录下的src目录清空，然后在里面重新创建一个index.js. 写入以下代码:
// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。
import ReactDOM from 'react-dom'

// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDOM.render(
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。
  <h1>欢迎进入React的世界</h1>,
// 渲染到哪里
  document.getElementById('root')
)

函数式组件（ 无状态组件 PureComponent）

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

// 特别注意这里的写法，如果要在JSX里写js表达式(只能是表达式，不能流程控制)，就需要加 {}，包括注释也是一样，并且可以多层嵌套
const app = (props) => <h1>欢迎进入{props.name}的世界</h1>

ReactDOM.render(
  app({
    name: 'react'
  }),
  document.getElementById('root')
)

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

const App = (props) => <h1>欢迎进入{props.name}的世界</h1>

ReactDOM.render(
  // React组件的调用方式
  <App name="react" />,
  document.getElementById('root')
)

class组件

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

class App extends React.Component {
  render () {
    return (
      // 注意这里得用this.props.name, 必须用this.props
      <h1>欢迎进入{this.props.name}的世界</h1>
  	)
  }
}
ReactDOM.render(
  <App name="react" />,
  document.getElementById('root')
)