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代碼經過

相關標籤/搜索

react+webpack+redux+react

webpack+react+redux+react

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。