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 进来,畅聊所有关于程序猿(援)有味道的问题 以及 解决疑难杂症。