React 项目记录（一）——项目搭建

最新推荐文章于 2025-08-01 00:00:23 发布

原创最新推荐文章于 2025-08-01 00:00:23 发布 · 504 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#React

React 记录专栏收录该内容

6 篇文章

订阅专栏

本文详细记录了使用create-react-app创建React项目的步骤，包括自定义配置、启动项目、配置@重定向、安装sass依赖和设置代理，以实现前端项目的初步构建。

此文根据 FungLeo 专栏博客 https://blog.csdn.net/FungLeo/column/info/24249 搭建 React 项目

Step 1：安装 create-react-app 脚手架

npm i create-react-app -g

Step 2：创建项目

create-react-app demo

如图，就创建成功了：
在这里插入图片描述

Step 3：自定义配置

进入项目目录，执行：

npm run eject

若此时控制台如图报错，则需要将此项目与远程仓库相关联

QQ截图20190114201854

Step 4：启动项目

npm start

浏览器中会自动打开此页面，就是启动成功了。

QQ截图20190114202414

Step 5：配置@重定向符号

打开项目根目录 config 文件夹下的 webpack.config.js 文件中找到 ‘react-native’: ‘react-native-web’，并在这行下面加入：

'@': path.join(__dirname, '..', 'src'),

Step 6：安装 sass 依赖

npm i node-sass

此时，若 node-sass 安装失败可参考此文章整理 node-sass 安装失败的原因及解决办法

Step 7：配置代理

在根目录下的 src 文件夹下创建 setupProxy.js 文件，此处我们代理的是 https://cnodejs.org，在此文件中写入：

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy(
      '/api/v1', {
        target: 'https://cnodejs.org',
        changeOrigin: true
      }
    )
  )
}

重启项目，在浏览器中输入 http://localhost:3000/api/v1/topics 测试结果：

QQ截图20190114210829