React 项目构建 以及 其他配置

React 项目构建 以及 其他配置

   React 是构建用户界面的JavaScript 库，简单的理解成React 是用于构建UI，因此我们可以理解React 是MVC 概念中的 V，即视图层。

项目构建：
  使用 create-react-app 脚手架工程构建 react webpack project

其他配置：
  1、create-react-app 弹出webpack 配置

  2、react-hot-loadder 热加载，实现页面局部刷新

  3、create-react-app 关闭 Eslint 警告提示

  4、react-loadable 实现组件懒加载

  5、create react app webpack devServer config。 本地请求代理配置，跨域处理方案。

  在前端项目开发使用React 做为应用主要的JavaScript 框架，React 拥有较高的性能，然而起初的学习和很好的使用React 恐怕要花费一些功夫，因为我们学习的不仅仅只是是React 作为构建UI 页面的手段，而是在React 技术栈中的应用，比如 react-route-dom、redux、react-native 以及element-react ui 框架等。

  当然如果你 ECMAScript 熟悉使用的话，学习React 就 顺水行舟了，毕竟React 在代码逻辑是比较简单的，虽然俯身探望都是七零八落js代码。

  追求总得眼高手低，闲来让人凌乱不堪。本文介绍如何自己构建react 项目。针对需要创建新的 react 项目框架的同志们！推荐使用官方的脚手架应用程序，该程序就是用来创建 react 开发环境： create-react-app：

React 项目构建

// 1、全局安装 create-react-app
$ npm i create-react-app -g

// 2、创建我们的react 项目
$ create-react-app my-project

// 3、切换到指定项目根目录
$ cd my-project

// 4、运行项目
$ npm run start

  非常简单，如上命令为我们构建一个干净一个 react 项目运行环境，这时候我们在在项目中安装路由控制（react-route-dom）、状态管理(redux)等手段。当然过程中不了webpack 等配置文件的配置，在有效，合理的模块化以及可视化构建过程中，一个完整的 React 技术栈项目构建就完成了。

扩展Create React App 的webpack 配置

  create reacrt app 默认创建应用的脚手架是将一些复杂的工具封装了起来，比如WebPack 配置。更多时候我们希望修改webpack 中的配置，Create React App幸好 提供了弹出webpack 配置的命令，npm run eject 。 执行该命令将会在项目目录下生成config 文件夹,，这时候就可以掌握webpack 的所有配置权限：

config
├── env.js
├── jest
│   ├── cssTransform.js
│   └── fileTransform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js // 开发环境配置
├── webpack.config.prod.js // 生产环境配置
└── webpackDevServer.config.js

react hot loader局部热加载

  create react app 默认使用webpack-dev-server 页面热加载的方式 ，一旦代码有所改动，浏览器就会重新刷新页面，因此就要消耗时间去渲染DOM 以及 网络请求，如何更有效的节约这些时间提高开发效率呢？使用 react-hot-loader 插件实现页面局部的热加载：

安装依赖：

npm run react-hot-loader --save-dev

.babel 配置

// .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}

组件导出方式更改：

// App.js
import React from 'react'
import { hot } from 'react-hot-loader'
 
const App = () => <div>Hello World!</div>
 
export default hot(module)(App)

如上为 react-hot-loader 4 的使用方式：详情参考：
https://www.npmjs.com/package/react-hot-loader

关闭 creact react app 中Eslint 警告提示

  Eslint 是代码风格与语法规范的检查工具，使用Eslint 能够有效的写出代码正确，风格统一的代码。一旦检查出代码不规范，如定义了未使用的变量，空的函数等浏览器 以及 编译控制台都会抛出警告信息。但是我们有时关闭这种存在意义不大的辅助工具：

1、：我们需要弹出create react app 中webpack配置，当然一般我们都会
弹出配置：

npm run eject

2、，在package.json 文件中配置，如下举例了几种，关闭了不规范操作的行为。可根据控制台指定的警告语关闭该警告：

  "eslintConfig": {
    "extends": "react-app",
    "rules": {
      "no-unused-vars": "off", //定了未使用的变量或者引入未使用的模块等
      "eqeqeq": "off", //类型安全，使用 === 和 !== 替换 == 和 !=
      "no-useless-constructor": "off" //显式定义了constructor 而无用的行为
    }
  }

使用 react-loadable 实现组件懒加载

  在web 应用程序加载之前，一大特点是在使用之前不用下载整个应用程序。当我们需要加载某一个资源时才加载该资源，这不仅提高了应用效率，提高页面响应速度，减少网络请求对页面的阻塞等。随着应用程序包体积越来越到，组件懒加载的手段则必不可少。
   react-loadable 作为 react 高级组件，可以很好的帮助我们实现这一点，使用方式示例：

1、首先安装 react-loadable 依赖程序包

npm i react-loadable --save-dev

2、使用方法

import Loadable from 'react-loadable';
import Loading from './my-loading-component';
 
const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});
 
export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

create react app webpack devServer config

   通常在执行网络请求，我们将webpack 启用代理. 在create react app 我们配置在 package.json 中。

// package.json 添加配置对象
  "proxy": {
    "/api": {
      "target": "https://www.sojson.com",
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
  },

   这不是React 的内容，关于webpack 的更多详细配置请参考它：https://www.webpackjs.com/configuration/dev-server/#devserver-proxy

  针对基础的React 开发环境搭建和配置的一些记载。有兴趣的您也可以加入Q群：595377655 进来，畅聊所有关于程序猿（援）有味道的问题 以及 解决疑难杂症。