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

﹏ヽ暗。殇╰゛Y 2022-03-26 01:10 432阅读 0赞

> 此文根据 FungLeo 专栏博客 [https://blog.csdn.net/FungLeo/column/info/24249][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

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

## Step 3：自定义配置 ##

进入项目目录，执行：

npm run eject

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

![QQ截图20190114201854][QQ_20190114201854]

## Step 4：启动项目 ##

npm start

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

![QQ截图20190114202414][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 安装失败的原因及解决办法][node-sass]

## Step 7：配置代理 ##

在根目录下的 src 文件夹下创建 `setupProxy.js` 文件，此处我们代理的是 [https://cnodejs.org][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][http_localhost_3000_api_v1_topics] 测试结果：

![QQ截图20190114210829][QQ_20190114210829]

[https_blog.csdn.net_FungLeo_column_info_24249]: https://blog.csdn.net/FungLeo/column/info/24249
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0F1Z3VzdF9sZW8_size_16_color_FFFFFF_t_70]: /images/20220326/1582f45fc4f14f5aa330843756cfa567.png
[QQ_20190114201854]: /images/20220326/b3b451da466d4be2a5f821de51d276ea.png
[QQ_20190114202414]: /images/20220326/d14ca1b56ad14a4da14e2d4b25f6ca13.png
[node-sass]: https://segmentfault.com/a/1190000010984731
[https_cnodejs.org]: https://cnodejs.org
[http_localhost_3000_api_v1_topics]: http://localhost:3000/api/v1/topics
[QQ_20190114210829]: /images/20220326/08161cab52e34f7497540157755600d5.png