一、React项目构建

React 快速开始(环境搭建及脚手架配置)

  1. 全局安装 yarn: npm install -g yarn;
  2. 全局安装 react 官方脚手架 create-react-app: npm install -g create-react-app;
  3. 新建react项目(myapp):create-react-app myapp;
    注:myapp为项目名称;
  4. 进入 react 项目根目录 myapp:cd myapp;
  5. 显示隐藏的配置文件:npm run eject;
  6. 安装项目默认的全部依赖:yarn 或者 yarn install;
    注:此时已可以使用 yarn start 或者 npm start 启动项目了
           项目会运行在 http://localhost:3000/
           之后就是安装 react全家桶相关依赖了;

  7. 路由 react-router-dom
  1. 状态管理 redux
  • 文档 : http://www.redux.org.cn/
  • 安装:
    需要先安装 redux(yarn add redux)
    然后安装 react-redux(yarn add react-redux)
    异步数据 redux-thunk (yarn add redux-thunk)
  1. 请求数据 fetch
  1. css预处理器 sass
  • 安装:yarn add sass-loader node-sass

  • 配置文件路径:config/webpack.config.dev.js config/webpack.config.prod.js
    注:修改位置可通过搜索 oneOf 或者 exclude 来定位,增加内容如下:

      oneOf: [
        { // 配置css预处理器sass
          test: /\.scss$/,
          loaders: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
          exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.scss$/], // 排除sass文件
          loader: require.resolve('file-loader'),
          options: {
            name: 'static/media/[name].[hash:8].[ext]',
          },
        },
      ],
    
  1. 设置开发环境代理(处理开发环境跨域):
    注:在package.json文件中添加字段proxy,开发环境下dev-server将会自动转发请求

      "proxy": "http://aaa.bbb.com/"

推荐阅读更多精彩内容