一、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/"
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容