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

VIP文章不怕麻烦的鹿丸

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

阅读量1.9w

点赞数 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 [email protected] --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>
          <