# react-study

**Repository Path**: zhenghun/react-study

## Basic Information

- **Project Name**: react-study
- **Description**: 用于react学习
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 使用Require Hook
因为性能问题，最好只在开发时使用，生产环境使用编译好的内容。

1. 安全babel-register
```
npm install babel-register --save-dev
```
2. 在入口文件顶部使用babel-register
```
require('babel-register');
require('./src/server.js');
```
3. 安全ES2015和React的预设
```
npm install babel-preset-es2015 babel-preset-react --save-dev
```
4. 添加配置文件.babelrc来激活ES2015和React的预设
```
{
    "presets":[
        "es2015", "react"
    ]
}
```
**React和ES2015预设主要用于编译JSX和ES2015语法。babel之所以k可以按照各种要求编译JavaScriptd代码文件，是因为使用了各种插件和预设(预设是插件的打包封装)。插件或预设是编译任务的核心“执行者”。如果没有配置插件或预设，即便运行Babel，也只是将代码复制了一遍。**

# 2.使用webpack打包编译
这个程序使用了ES2015和JSX语法，浏览器目前还不能完全支持,所以需要使用webpack编译打包代码。

因为webpack本身自有打包功能，所以还需要使用babel-loader来完成编译工作。使用babel-loader不是必须的，如果先使用Babel CLI进行编译，在使用webpack打包也是可以的。

1. 安全webpack 和 babel-loader
```
npm install --save-dev webpack babel-loader babel-core
```
2. 添加webpack.config.js
需要注意的是 webpack4 和webpack1（好久没有做前端，直接从webpack1跳到webpack4）之间存在一点区别，就是module中的loaders不在是loaders而是rules。 babel不在是babel而是babel-loader。同时需要指定mode（development或production）。可以直接在webpack.config.js中通过mode标签指定：
```
module.exports = {
    mode: 'development',
    entry: './src/client'
}
```
或者在package.json中指定：
```
"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack && http-server -p 80"
},
```
development模式下，将侧重于功能调试和优化开发体验，包含如下内容：
```
浏览器调试工具
开发阶段的详细错误日志和提示
快速和优化的增量构建机制
```
production模式下，将侧重于模块体积优化和线上部署，包含如下内容：
```
开启所有的优化代码
更小的bundle大小
去除掉只在开发阶段运行的代码
Scope hoisting和Tree-shaking
自动启用uglifyjs对代码进行压缩
```
# 参考
- [react-redux-book](https://github.com/lewis617/react-redux-book)