不定期更新 ~
好久没用了,这次自己重新熟悉下;有不对的地方或错误,希望大家多指正
快速构建
使用 create-react-app 快速构建 React 开发环境
cnpm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
到这里项目就已经启动了 : 默认会访问 http://localhost:3000/,这里不多阐述了
项目结构
这里src下新增几个文件夹,后面会一一阐述
components - 组件
containers - 页面
Router - 路由
utils - 封装工具类
store - react-redux
路由配置
项目构建出来默认是没有路由文件的,这里需要我们自己手动建一个
需要注意的是到这里并不是已经完成了,我们在官网上看到的使用路由是 import { Router, Route, Link } from 'react-router'
,
但是实际上我们看到需要引用的是import { BrowserRouter as Router, Route } from "react-router-dom";
原因是因为 后者比前者多出了 <Link> <BrowserRouter>
这样的 DOM 类组件。
因此我们只需引用 react-router-dom
这个包就行了。
import React from 'react'
import {
BrowserRouter as Router, Route } from "react-router-dom";
import Login from './../containers/login';
import Home from './../containers/home';
function router() {
return (
<Router>
<Route path="/home" component={
Home} />
<Route path="/login" component={
Login} />
</Router>);
}
export default router;
然后需要到 src下index.js 引入路由 并挂载
import React from 'react';
import {
render } from