React脚手架

创建 React 脚手架

！！！注：项目名称不许有大写字母
执行 create-react-app 项目名称
在这里插入图片描述
创建完成后

他会提示你四条命令
！！！注：yarn eject 命令是不可逆的谨慎操作

yarn start 		运行项目
yarn build		打包项目
yarn test		启动测试运行程序
yarn eject 		暴露配置文件

根据提示使用cd进入项目目录在执行 yarn start 启动项目
启动成功后
在这里插入图片描述
页面状态如下图

react 文件目录

在这里插入图片描述

public ---- 静态资源文件夹
favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------- logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件

src ---- 源码文件夹
App.css -------- App组件的样式
App.js --------- App组件
App.test.js ---- 用于给App做测试
index.css ------ 样式
index.js ------- 入口文件
logo.svg ------- logo图
reportWebVitals.js — 页面性能分析文件(需要web-vitals库的支持)
setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)

创建组件

首先创建一个 components 文件夹
在 components 放要写的组件每个组件放一个文件夹
在index.js里写入

import React, { Component } from 'react'

export default class One extends Component {
    render() {
        return (
            <div>
                我是One组件
            </div>
        )
    }
}

在app组件中引入

//	因为我们写的时index命名的文件所以可以省略不写
//	组件命名一定要大写字母开头
import One from './components/one'
function App() {
  return (
    <div className="App">
      <One/>
    </div>
  );
}

export default App;

页面呈现
在这里插入图片描述

路由

他需要借助一个叫 react-router-dom 的 react 的插件库来实现

react-router-dom相关API

<BrowserRouter>
<HashRouter>
<Route>
<Redirect>
<Link>
<NavLink>
<Switch>

如何实现路由

安装 react-router-dom 指令 npm install --save react-router-dom
准备好两个组件
借助 react-router-dom 里的 Link api 给路由指定路径

import One from './components/one'
import Tow from './components/tow'
import { Link } from 'react-router-dom'

function App() {
  return (
    <div>
      <div>
        <Link to="/one">About</Link>
        <Link to="/tow">Home</Link>
      </div>
    </div>
  );
}

export default App;

如果需要显示高亮请使用 NavLink 代替 Link 他会给选中的连接加一个 class 为 active 可以手动编写样式

import One from './components/one'
import Tow from './components/tow'
import { NavLink } from 'react-router-dom'
import './app.css'
function App() {
  return (
    <div>
      <div>
        <NavLink to="/one">About</NavLink>
        <NavLink to="/tow">Home</NavLink>
      </div>
    </div>
  );
}

export default App;

app.css

.active {
    background: rgb(141, 197, 235);
}

在使用 react-router-dom 里的 Route api 检查路由的变化显示对应的组件

import One from './components/one'
import Tow from './components/tow'
import { Link, Route } from 'react-router-dom'

function App() {
  return (
    <div>
      <div>
        <Link className="list-group-item" to="/one">About</Link>
        <Link className="list-group-item" to="/tow">Home</Link>
      </div>
      <div >
        <Route path="/one" component={One} />
        <Route path="/tow" component={Tow} />
      </div>
    </div>
  );
}

export default App;

给根路径下的index.js 使用 BrowserRouter 或 HashRouter 确认一个路由模式

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

使用 Redirect 写默认重定向

import One from './components/one'
import Tow from './components/tow'
import { Link, Route, Redirect } from 'react-router-dom'

function App() {
  return (
    <div>
      <div>
        <Link className="list-group-item" to="/one">About</Link>
        <Link className="list-group-item" to="/tow">Home</Link>
      </div>
      <div >
        <Route path="/one" component={One} />
        <Route path="/tow" component={Tow} />
        <Redirect to="/one" />
      </div>
    </div>
  );
}

export default App;

这样我们就完成一个简单的路由了

嵌套路由、单一匹配路由和严格匹配

在需要嵌套路由的地方重复一遍以上操作
只需把路径更改为父级路径加上自己的路径即可

Switch的使用

1.通常情况下，path和component是一一对应的关系。
2.Switch可以提高路由匹配效率(单一匹配)。

路由的严格匹配与模糊匹配

1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2.开启严格匹配：<Route exact={true} path="/one" component={One}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

import React, { Component } from 'react'
import MyNavLink from '../../components/MyNavLink'
import {Route,Switch,Redirect} from 'react-router-dom'
import News from './News'
import Message from './Message'

export default class Home extends Component {
	render() {
		return (
			<div>
				<h3>我是Home的内容</h3>
				<div>
					<ul className="nav nav-tabs">
						<li>
							<MyNavLink to="/one/news">News</MyNavLink>
						</li>
						<li>
							<MyNavLink to="/one/message">Message</MyNavLink>
						</li>
					</ul>
					<Switch>
						<Route exact path="/one/news" component={News}/>
						<Route exact path="/one/message" component={Message}/>
						<Redirect to="/one/news"/>
					</Switch>
				</div>
			</div>
		)
	}
}