• React⼊⻔
  • 课堂⽬标
  • 资源
  • 起步
    • ⽂件结构
    • ⽂件结构⼀览
  • React和ReactDom
  • JSX
    • 使⽤JSX
  • 组件
    • 组件的两种形式
      • class组件
      • function组件
    • 组件状态管理
      • 类组件中的状态管理
      • 函数组件中的状态管理
  • 事件处理
  • 组件通信
    • Props属性传递
    • context
    • redux
  • ⽣命周期
    • 变更缘由
    • 新引⼊了两个新的⽣命周期函数：
    • getDerivedStateFromProps ，
    • getSnapshotBeforeUpdate
    • 验证⽣命周期
  • 后续展望
  • 回顾

课堂⽬标

1. create-react-app使⽤
2. 掌握组件使⽤
3. 掌握JSX语法
4. 掌握setState
5. 理解事件处理、组件⽣命周期
6. 掌握组件通信各种⽅式

资源

1. react
2. create-react-app

起步

1. 安装官⽅脚⼿架：npm install -g create-react-app
2. 创建项⽬：create-react-app lesson1
3. 启动项⽬：npm start
4. 暴露配置项：npm run eject
   ⽂件结构

⽂件结构⼀览

 |—— README.md                         ⽂档|—— public                                     静态资源| 		  |—— favicon.ico|        |—— index.html|        |—— manifest.json|—— src                                          源码|—— |—— App.css|—— App.js                            根组件|—— App.test.js|—— index.css                      全局样式|—— index.js                         ⼊⼝⽂件|—— logo.svg|—— serviceWorker.js           pwa⽀持|—— package.json                         npm 依赖

env.js⽤来处理.env⽂件中配置的环境变量

 // node运⾏环境：development、production、test等const NODE_ENV = process.env.NODE_ENV;// 要扫描的⽂件名数组var dotenvFiles = [`${paths.dotenv}.${NODE_ENV}.local`, // .env.development.local`${paths.dotenv}.${NODE_ENV}`,         // .env.developmentNODE_ENV !== 'test' && `${paths.dotenv}.local`, // .env.localpaths.dotenv, // .env].filter(Boolean);// 从.env*⽂件加载环境变量dotenvFiles.forEach(dotenvFile => {if (fs.existsSync(dotenvFile)) {require('dotenv-expand')(require('dotenv').config({path: dotenvFile,}));}});

实践⼀下，修改⼀下默认端⼝号，创建.env⽂件
PORT=8080

webpack.config.js 是webpack配置⽂件，开头的常量声明可以看
出cra能够⽀持ts、sass及css模块化

 // Check if TypeScript is setupconst useTypeScript =fs.existsSync(paths.appTsConfig);// style files regexesconst cssRegex = /\.css$/;const cssModuleRegex = /\.module\.css$/;const sassRegex = /\.(scss|sass)$/;const sassModuleRegex = /\.module\.(scss|sass)$/;

React和ReactDom

删除src下⾯所有代码，新建index.js

 import React from 'react';import ReactDOM from 'react-dom';// 这⾥怎么没有出现React字眼？// JSX => React.createElement(...)ReactDOM.render(<h1>Hello React</h1>, document.querySelector('#root'));React负责逻辑控制，数据 -> VDOMReactDom渲染实际DOM，VDOM -> DOMReact使⽤JSX来描述UI⼊⼝⽂件定义，webpack.config.jsentry: [// WebpackDevServer客户端，它实现开发时热更新功能isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),// 应⽤程序⼊⼝：src/indexpaths.appIndexJs,].filter(Boolean),

JSX

JSX是⼀种JavaScript的语法扩展，其格式⽐较像模版语⾔，但事实
上完全是在JavaScript内部实现的。

JSX可以很好地描述UI，能够有效提⾼开发效率，体验JSX

JSX实质就是React.createElement的调⽤，最终的结果是
React“元素”（JavaScript对象）。

  const jsx = <h2>react study</h2>;ReactDOM.render(jsx,document.getElementById('root'));

使⽤JSX

表达式{}的使⽤，index.js

const name = "react study";
const jsx = <h2>{name}</h2>;

函数也是合法表达式，index.js

const user = { firstName: "tom", lastName: "jerry"};
function formatName(user) {return user.firstName + " " + user.lastName;
}
const jsx = <h2>{formatName(user)}</h2>;

jsx是js对象，也是合法表达式，index.js

const greet = <p>hello, Jerry</p>
const jsx = <h2>{greet}</h2>;

条件语句可以基于上⾯结论实现，index.js

const showTitle = true;
const title = name ? <h2>{name}</h2> : null;
const jsx = (<div>{/* 条件语句 */}{title}</div>
)