​ 动态路由在Router组件的path属性: {/url/:parameter} 1<Router path='/xxx/:id' component={xxx} /> Switch组件配置404页面：

React路由基础组件: 1.路由组件(router components) <BrowserRouter> （推荐）和<HashRouter>两种路由组件 Eg: 1234567import { BrowserRouter } from "react-router-dom";ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root')) 2.路由匹配组件（router matching components) <Route>和<Switch>路由匹配组件。

前段路由是一套映射规则，在React中，是URL路径与组件的对应关系。就是配置路径和组件（一一对应） 1.React路由安装： 1$ npm i react-router-dom 2.导入路由的三个核心组件：Router / Route / Link 1import { BrowserRouter as Router , Route, LInk } from 'react-router-dom' 3.使用Router组件包裹整个应用（重要！！！）

使用脚手架初始化项目： 1.初始化项目，命令npx create-react-app xxx 2.启动项目，在项目根目录执行命令：npm start 12345678910public/ // 公共资源 index.html // 首页（必须） manifest.jsonsrc / index.js // 项目入口文件（必须） App.js // 项目的根组件 App.test.js // App组件的测试文件 serviceworker.js // 实现pwa（可选） 扩展：

受控组件(双向绑定（v-model）)：

state的基本使用：状态（state）即是数据,是组件内部的私有数据，只能在组件内部使用，且state的值是对象，表示一个组件中可以有多个数据 初始语法： 123456789101112131415class KEL extends React.Component { constructor() { super () { // 初始化state this.state = { count: 0 } } render () { return { <div>有状态组件</div> } } }} 简化语法：

只有类组件下有这个问题（函数组件没有this） 利用bind修改this指向组件： 1234567891011121314class HEL extends React.Comonent { num = 0; addNum() { this.num += 1; alert(this.num) } render () { return ( <div> <h1 onClick={this.addNum.bing(this)}>数字加一</h1> </div> ) }} 利用箭头函数方法（推荐）：该语法是实验性语法，由于babel的存在可以直接使用

​ 事件绑定：React事件绑定语法与DOM事件语法相似，而语法则是on+事件名称={事件处理程序fn}需要注意的是React事件则采用小驼峰命名法：除第一个单词之外，其他单词首字母大写。 类 组件绑定： 12345678910class KL extends React.Component { headrClick () { ... } render () { return ( <button onClick={this.headrClick}></button> ) } } 函数组件绑定:

React组件创建：特点：复用 独立 可组合 函数创建：使用JS函数或箭头函数创建的组件 1234567891011import React from 'react';const Dnz = () => { return ( <div> <h2>函数组件</h2> <p onClick={fn}>点击</p> </div> )}ReactDOM.render(<Dnz />, root) 【注意事项： ​ 1.类与函数名称都需以大写字母开头，使用大驼峰命名法。 ​ 2.函数组件必须有返回值，表示该组件的结构，而类组件则需提供render()方法。

Babel会把JSX转译成一个名为React.createElement()函数调用 原生创建recat元素： 1const span = React.createElement('span', null, 'span') 用JSX创建react元素： 1const ul = <div><ul><li><span>hello worde!!!</span></li></ul></div> JSX中使用JS表达式： 语法：{JavaScript表达式} 注：语法中是单大括号，不是双大括号

引入react react-dom 安装包：npm Install react react-dom react：创建元素 react-dom：渲染元素 创建元素： 1const h1 = React.createElement('h1', {classNmae: 'k', id: 'hh'}, 'hello react') 渲染元素： 1React.render(div, document...