南昌网站开发培训班,wordpress登录 小工具,wordpress精简,服装网站建设物流配送系统自学React从入门到精通，从使用到写源码 React⼊⻔ 课堂⽬标资源起步 ⽂件结构⽂件结构⼀览React和ReactDomJSX 使⽤JSX组件 组件的两种形式 class组件function组件组件状态管理 类组件中的状态管理函数组件中的状态管理事件处理组件通信 Props属性传递contextredux⽣命周期 变… 自学React从入门到精通，从使用到写源码 React⼊⻔ 课堂⽬标资源起步 ⽂件结构⽂件结构⼀览 React和ReactDomJSX 使⽤JSX 组件 组件的两种形式 class组件function组件 组件状态管理 类组件中的状态管理函数组件中的状态管理 事件处理组件通信 Props属性传递contextredux ⽣命周期 变更缘由新引⼊了两个新的⽣命周期函数：getDerivedStateFromProps ，getSnapshotBeforeUpdate验证⽣命周期 后续展望回顾 课堂⽬标
create-react-app使⽤掌握组件使⽤掌握JSX语法掌握setState理解事件处理、组件⽣命周期掌握组件通信各种⽅式资源
reactcreate-react-app起步
安装官⽅脚⼿架：npm install -g create-react-app创建项⽬：create-react-app lesson1启动项⽬：npm start暴露配置项：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(h1Hello 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 = h2react 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 = phello, Jerry/p
const jsx = h2{greet}/h2;条件语句可以基于上⾯结论实现，index.js
const showTitle = true;
const title = name ? h2{name}/h2 : null;
const jsx = (div{/* 条件语句 */}{title}/div
)
