REACT实战项目从0到1搭建（仅供参考）

不怕麻烦的鹿丸

已于 2024-01-31 09:25:56 修改

阅读量2.3w

点赞数 31

分类专栏： React JavaScript HTML5 文章标签： react.js javascript 前端 REACT 前端框架 html5 reactjs

于 2021-12-06 14:59:48 首次发布

本文链接：https://blog.csdn.net/qq_31851435/article/details/121740400

版权

1、React Router（路由配置管理）

7、使用代理proxy（http-proxy-middleware）

一、环境搭建

1、安装node.js

官网地址：Node.js

2、安装webpack

npm install -g webpack

3、配置淘宝镜像（看个人需求）

如果在本地一直装不上npm的包，可以考虑用国内的淘宝镜像，使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org

4、安装create-react-app

npm install -g create-react-app

5、创建项目

create-react-app my-project // 创建名为my-project的项目

cd my-project // 进入项目文件夹

6、本地服务启动

npm run start // 启动本地server用于开发

二、项目框架结构

|- node_modules // 项目依赖包
|- public // 一般用于存放静态文件，打包时会被直接复制到输出目录(./buidle)
|- src // 项目源代码
  |  |- assets // 静态资源文件夹，用于存放静态资源，打包时会经过 webpack 处理
  |  |- components // 组件文件夹，存放 React 组件，一般是该项目公用的无状态组件
          |  |- MLayout
                  |  |- MLayout.js
                  |  |- MLayout.module.less
  |  |- containers // 页面视图文件夹
          |  |- Index
                  |  |- Index.js
                  |  |- Index.module.less
  |  |- redux // redux文件夹
          |  |- actions
                  |  |- actions.js
          |  |- reducers
                  |  |- reducers.js
          |  |- store
                  |  |- store.js
          |  |- state.js
  |  |- router // 路由配置文件夹
          |  |- router.js // 路由文件配置
  |  |- service // 服务请求文件夹
          |  |- http.js // 请求接口文件
          |  |- request.js // 请求配置文件
  |  |- App.js // 入口文件
  |  |- App.less
  |  |- index.js //注册路由与服务
  |  |- index.css
  |  |- serviceWorker //开发配置
|- .env // 环境配置文件
|- .env.development // dev环境配置文件
|- .env.test // test环境配置文件
|- .env.production // prd环境配置文件
|- craco.config.js // craco配置文件
|- package.json // 包管理代码
|- .gitignore // Git忽略文件

三、常用的集成和配置

1、React Router（路由配置管理）

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

1.1、安装react-router

npm install react-router@4.3.1 --save

Router下面只能包含一个盒子标签，类似这里的div。

Link代表一个链接，在html界面中会解析成a标签。作为一个链接，必须有一个to属性，代表链接地址。这个链接地址是一个相对路径。

Route，有一个path属性和一个组件属性（可以是component、render等等）。

1.2、基本使用：

render () {
    return (
          <Router>
             <div>
                <ul>
                   <li><Link to="/index">首页</Link></li>
                   <li><Link to="/other">其他页</Link></li>
                 </ul>
                 <Route path="/index" component={Index}/>
                 <Route path="/other" component={Other}/>
             </div>
          </Router>
    )
}

1.3 路由嵌套使用

const Test = () => (
   <div>
      <Switch>
         <Route
            path="/"
            render={props => (
               <App>
                  <Switch>
                     <Route path="/" exact component={Index} />
                     <Route path="/index" component={Index} />
                     <Route path="/other" component={Other} />
                     <Route path="/message/:id/:TestId" component={Message} />
                      {/*路由不正确时，默认跳回home页面*/}
                     <Route render={() => <Redirect to="/" />} />
                  </Switch>
               </App>
            )}
         />
      </Switch>
   </div>
);

export default Test;

1.4、把路由路径写在一个配置文件router.js里，示例代码如下

import Login from '../containers/Login/Login.js';
import Index from '../containers/Index/Index.js';
import Home from '../containers/Home.js';
import New from '../containers/New.js';
import NewOne from '../containers/NewOne.js';

let routes = [
  {
    path: "/",
    component: Home,
    exact: true
  },
  {
    path: "/login",
    component: Login,
    exact: true
  },
  {
    path: "/index",
    component: Index,
    exact: true
  },
  {
    path: "/news",
    component: New,
    routes: [  // 嵌套路由
      {
        path: "/news/newsone",
        component: NewOne,
        exact: true
      }
    ]
  }
];

export default routes;

在App.js里导入使用

import './App.less';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import routes from './router/router';
import Home from './containers/Home.js';

// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/lib/locale/zh_CN';
import { ConfigProvider } from 'antd';

function App() {
  return (
    <ConfigProvider locale={locale}>
      <div className="App">
      <Router>
        <Switch>
        {
          routes.map((route, key) => {
            console.log(route)
            if (route.exact) {
              return <Route key={key} exact path={route.path} component={route.component}/>
            } else {
              return <Route key={key} path={route.path}
                render={props => <route.component {...props} routes={route.routes} />
              }/>
            }
          })
        }
        <Route component={Home}/>
        </Switch>
      </Router>
      </div>
    </ConfigProvider>
  );
}

export default App;

new.js（父页面）

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function New(props) {
  return <div>
    new
    {
      props.routes.map((route, key) => {
        console.log(route.path)
        return <Route key={key} exact path={route.path} component={route.component}/>
      })
    }  
  </div>
}

export default New

newOne.js（嵌套的子页面）

function NewOne() {
  return <div>new one</div>
}

export default NewOne

2、redux（数据管理）

React是单向数据流，所以有些情况下单单依赖React自身无法实现组件之间的通信，故此需要redux

需要安装Redux相关依赖，由于不同版本之间可能存在兼容性问题，所以安装的时候最好制定版本，安装好之后，就可以在项目中引入redux了

npm install redux@3.7.2 --save

npm install redux-thunk@2.1.0 --save

npm install react-redux@5.0.6 --save

2.1 在函数组件里使用

state.js（声明变量默认值）

// state的默认值统一放置在state.js文件

// state.js
// 声明默认值
// 这里我们列举两个示例
// 同步数据：pageTitle
// 异步数据：infoList（将来用异步接口获取）

export default {
  pageTitle: '首页',
  infoList: []
}

actions.js（定义触发事件）

// actions.js
// action也是函数

export function increaseAction (data) {
  return (dispatch, state) => {
    dispatch({ type: 'increase', data: data })
  }
}

export function setInfoList (data) {