react全家桶从0到1(react-router四、redux、redux-saga)

时间 2019-12-06

标签 react 全家 router redux saga 栏目 React 繁體版

原文原文链接

react全家桶从0到1(最新)

本文从零开始，逐步讲解如何用react全家桶搭建一个完整的react项目。文中针对react、webpack、babel、react-route、redux、redux-saga的核心配置会加以讲解，但愿经过这个项目，能够系统的了解react技术栈的主要知识，避免搭建一次后面就忘记的状况。html

代码库：https://github.com/teapot-py/react-demonode

首先关于主要的npm包版本列一下：react

react@16.7.0
webpack@4.28.4
babel@7+
react-router@4.3.1
redux@4+

从webpack开始

思考一下webpack到底作了什么事情？其实简单来讲，就是从入口文件开始，不断寻找依赖，同时为了解析各类不一样的文件加载相应的loader，最后生成咱们但愿的类型的目标文件。webpack

这个过程就像是在一个迷宫里寻宝，咱们从入口进入，同时咱们也会不断的接收到下一处宝藏的提示信息，咱们对信息进行解码，而解码的时候可能须要一些工具，好比说钥匙，而loader就像是这样的钥匙，而后获得咱们能够识别的内容。git

回到咱们的项目，首先进行项目的初始化，分别执行以下命令github

mkdir react-demo // 新建项目文件夹
cd react-demo // cd到项目目录下
npm init // npm初始化
复制代码

引入webpackweb

npm i webpack --save
touch webpack.config.js
复制代码

对webpack进行简单配置，更新webpack.config.jsnpm

const path = require('path');

module.exports = {
  entry: './app.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 定义输出目录
    filename: 'my-first-webpack.bundle.js'  // 定义输出文件名称
  }
};

复制代码

更新package.json文件，在scripts中添加webpack执行命令json

"scripts": {
  "dev": "./node_modules/.bin/webpack --config webpack.config.js"
}
复制代码

若是有报错请按提示安装webpack-cliredux

npm i webpack-cli
复制代码

执行webpack

npm run dev
复制代码

若是在项目文件夹下生成了dist文件，说明咱们的配置是没有问题的。

接入react

安装react相关包

npm install react react-dom --save
复制代码

更新app.js入口文件

import React from 'react import ReactDom from 'react-dom'; import App from './src/views/App'; ReactDom.render(<App />, document.getElementById('root')); 复制代码

建立目录 src/views/App，在App目录下，新建index.js文件做为App组件，index.js文件内容以下：

import React from 'react';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (<div>App Container</div>);
    }
}
export default App;
复制代码

在根目录下建立模板文件index.html

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
    <div id="root"></div>
</body>
</html>
复制代码

到了这一步其实关于react的引入就OK了，不过目前还有不少问题没有解决

如何解析JS文件的代码？
如何将js文件加入模板文件中？

Babel解析js文件

Babel是一个工具链，主要用于在旧的浏览器或环境中将ECMAScript2015+的代码转换为向后兼容版本的JavaScript代码。

安装babel-loader，@babel/core，@babel/preset-env，@babel/preset-react

npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D
复制代码

babel-loader：使用Babel转换JavaScript依赖关系的Webpack加载器, 简单来说就是webpack和babel中间层，容许webpack在遇到js文件时用bable来解析
@babel/core：即babel-core，将ES6代码转换为ES5。7.0以后，包名升级为@babel/core。@babel至关于一种官方标记，和之前你们随便起名造成区别。
@babel/preset-env：即babel-preset-env，根据您要支持的浏览器，决定使用哪些transformations / plugins 和 polyfills，例如为旧浏览器提供现代浏览器的新特性。
@babel/preset-react：即 babel-preset-react，针对全部React插件的Babel预设，例如将JSX转换为函数.

更新webpack.config.js

module: {
    rules: [
      {
        test: /\.js$/, // 匹配.js文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
复制代码

根目录下建立并配置.babelrc文件

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
复制代码

配置HtmlWebPackPlugin

这个插件最主要的做用是将js代码经过