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

此文根据 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

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

Step 4：启动项目

npm start

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

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 测试结果：