菜鳥webpack/react/redux/react-router/ts一步步搭建架子

阿新 • • 發佈：2020-07-10

mkdir stage && cd stage // 建立專案資料夾進入專案
npm init // 初始化依賴
npm install -S react react-dom  // 安裝react相關依賴
npm install -D webpack webpack-cli webpack-dev-server // 安裝webpack相關依賴
npm install -D html-webpack-plugin clean-webpack-plugin // 安裝生成html和清理html檔案的外掛
npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react // 安裝babel-loader解析react
 
npm install -D less style-loader css-loader less-loader // 安裝less依賴及相關的開發loader
mkdir src config build // 根目錄下建立src、config、build資料夾
touch babel.config.js // 根目錄下建立babel.config.js
cd build && touch webpack.config.js // build目錄下建立webpack.config.js
cd ../src && touch index.js && touch index.less && touch index.html // src目錄下建立index.js、index.less和index.html

// babel.config.js
module.exports = {
    presets: [
        "@babel/preset-env",
        "@babel/preset-react",
    ],
}

// build/webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports  
= {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        port: 3001,
    },
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { modules: true } },
                    'less-loader',
                ]
            },
        ]
    }
};

// src/index.js
import React from 'react'
import { render } from 'react-dom'
import styles from './index.less'

const App = () => (
    <div className={styles.hohoho}>STAGE HOHOHO</div>
)

render(<App />, document.getElementById('root'))

// src/index.less
.hohoho {
    color: #008000;
}

<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>STAGE</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

修改package.json，新增執行指令碼

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --config ./build/webpack.config.js --open",
    "build": "webpack --config ./build/webpack.config.js"
  },

此時執行npm run build可以看到build目錄下生成了dist資料夾，npm start可以啟動3001埠訪問到寫的index.js中的內容（如果有報錯請檢查依賴是否安裝成功）

###### ###### ###### ###### ############ ###### ###### ##################

接入react-router

npm install -D react-router-dom // 安裝react-router-dom依賴

修改src/index.js檔案，此處使用的是HashRouter，如果使用BrowserRouter需要服務端做相應的響應，原理可以對比hash路由和history的區別（可以分別使用兩種Router，切換路由時看具體網路請求就明白了）

// src/index.js
import React from 'react'
import { render } from 'react-dom'
import {
    HashRouter,
    Route,
    Switch,
    Redirect,
} from 'react-router-dom'
import styles from './index.less'

const Home = () => (
　　<div>HOME HOHOHO</div>
)
const Page1 = () => (
　　<div>PAGE1 HOHOHO</div>
)
const Page2 = () => (　　
　　<div>PAGE2 HOHOHO</div>
)

const App = () => (
    <>
        <div className={styles.hohoho}>STAGE HOHOHO</div>
        <li><a href='#/home'>去home</a></li>
        <li><a href='#/page1'>去page1</a></li>
        <li><a href='#/page2'>去page2</a></li>
        <hr />
        <HashRouter>
            <Switch>
                <Route exact path='/home' component={Home} />
                <Route exact path='/page1' component={Page1} />
                <Route exact path='/page2' component={Page2} />
　　　　　　　　　 <Redirect from='/' to='/home' />
            </Switch>
        </HashRouter>
    </>
)

render(<App />, document.getElementById('root'))

此時可以來回切換home、page1、page2三個頁面

###### ###### ###### ###### ############ ###### ###### ##################

接入redux

npm install -S redux react-redux // 安裝redux相關依賴
mkdir models && cd models && mkdir stores actions reducers // 在src目錄下建立redux相關的資料夾，並分別在目錄下建立index.js
cd stores && touch index.js && cd ../actions && touch index.js && cd ../reducers && touch index.js // 分別建立index.js檔案

// src/models/actions/index.js
export const CREATE_TODO = 'CREATE'; // 增加一個todo
export const DELETE_TODO = 'DELETE'; // 刪除一個todo
export const CREATE_TYPE = 'CREATE_TYPE'; // 新增操作
export const DELETE_TYPE = 'DELETE_TYPE'; // 刪除操作

// src/models/reducers/index.js
import {
    CREATE_TODO,
    DELETE_TODO,
    CREATE_TYPE,
    DELETE_TYPE,
} from '../actions'

export function todos(state = [], action) {
    switch (action.type) {
        case CREATE_TODO: {
            return [...state, { id: action.id, text: action.text, completed: false }]
        }
        case DELETE_TODO: {
            return [...state].filter(({ id }) => id !== action.id)
        }
        default: {
            return state;
        }
    }
}

export function operateCounter(state = { createCounter: 0, deleteCounter: 0 }, action) {
    const { createCounter, deleteCounter } = state;
    switch (action.type) {
        case CREATE_TYPE: {
            return { ...state, createCounter: createCounter + 1 }
        }
        case DELETE_TYPE: {
            return { ...state, deleteCounter: deleteCounter + 1 }
        }
        default: {
            return state;
        }
    }
}

// src/models/stores/index.js
import { combineReducers, createStore } from 'redux'
import * as reducers from '../reducers'

const todoApp = combineReducers(reducers)
export default createStore(todoApp)

修改src/index.js，裡面的HOME，PAGE1，PAGE2元件應該分別抽離在不同的頁面中

// src/index.js
import React from 'react'
import { render } from 'react-dom'
import {
    HashRouter,
    Route,
    Switch,
    Redirect,
} from 'react-router-dom'
import { Provider, connect } from 'react-redux'
import store from './models/stores'
import {
    CREATE_TODO,
    DELETE_TODO,
    CREATE_TYPE,
    DELETE_TYPE,
} from './models/actions'
import styles from './index.less'

const HomeOld = (props) => {
    const {
        todos = [],
        operateCounter: {
            createCounter = 0,
            deleteCounter = 0,
        },
    } = props;
    return (
        <>
            <div>HOME HOHOHO</div>
            <div>當前todos如下，可以在page1與page2中操作todos列表：</div>
            <div className={styles.hohoho}>新增操作： {createCounter} 次，刪除操作： {deleteCounter} 次</div>
            {todos.map(({ text, id }) => (<li key={id}>{`id:${id}-text:${text}`}</li>))}
        </>
    )
}
const mapStateToPropsHome = state => {
    return {
        todos: state.todos,
        operateCounter: state.operateCounter,
    };
};
const Home = connect(mapStateToPropsHome)(HomeOld);





const Page1Old = (props) => {
    const { todos = [], dispatch } = props;
    let input;
    function onClick() {
        const { id = 0 } = [...todos].pop() || {};
        dispatch({
            type: CREATE_TODO,
            id: id + 1,
            text: input.value,
        });
        dispatch({ type: CREATE_TYPE });
    }
    return (
        <>
            <div>PAGE1 HOHOHO</div>
            <input ref={node => { input = node }} />
            &nbsp;&nbsp;
            <button onClick={onClick}>新增</button>
            {todos.map(({ text, id }) => (<li key={id}>{`id:${id}-text:${text}`}</li>))}
        </>
    )
}
const mapStateToPropsPage1 = state => {
    return {
        todos: state.todos,
    };
};
const Page1 = connect(mapStateToPropsPage1)(Page1Old);





const Page2Old = (props) => {
    const { todos = [], dispatch } = props;
    function onClick(id) {
        dispatch({
            type: DELETE_TODO,
            id,
        });
        dispatch({ type: DELETE_TYPE });
    }
    return (
        <>
            <div>PAGE2 HOHOHO</div>
            {todos.map(({ text, id }) => (
                <li key={id}>
                    {`id:${id}-text:${text}`}
                    &nbsp;&nbsp;
                    <a href="javascript:;" onClick={onClick.bind(null, id)}>刪除該項</a>
                </li>
            ))}
        </>
    )
}
const mapStateToPropsPage2 = state => {
    return {
        todos: state.todos,
    };
};
const Page2 = connect(mapStateToPropsPage2)(Page2Old);






const App = () => (
    <Provider store={store}>
        <div className={styles.hohoho}>STAGE HOHOHO</div>
        <li><a href='#/home'>去home</a></li>
        <li><a href='#/page1'>去page1</a></li>
        <li><a href='#/page2'>去page2</a></li>
        <hr />
        <HashRouter>
            <Switch>
                <Route exact path='/home' component={Home} />
                <Route exact path='/page1' component={Page1} />
                <Route exact path='/page2' component={Page2} />
                <Redirect from='/' to='/home' />
            </Switch>
        </HashRouter>
    </Provider>
)

render(<App />, document.getElementById('root'))

接入react-router和react-redux完成，可以看到todolist，此處貼上完整的package.json

{
  "name": "stage",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --config ./build/webpack.config.js --open",
    "build": "webpack --config ./build/webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.6.0",
    "html-webpack-plugin": "^4.3.0",
    "less": "^3.11.3",
    "less-loader": "^6.2.0",
    "react-router-dom": "^5.2.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

###### ###### ###### ###### ############ ###### ###### ##################

接入typescript

npm install -D @types/react @types/react-dom @types/react-router-dom @types/react-redux typescript ts-loader
npm install -g typescript
tsc -init

修改生成的tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es5", 
    "module": "commonjs", 
    "sourceMap": true,                     
    "removeComments": true,                
    "strict": true, 
    "noImplicitAny": true,                 
    "esModuleInterop": true, 
    "skipLibCheck": true, 
    "forceConsistentCasingInFileNames": true 
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "build",
  ]
}

將src/models/*/index.js 都改為index.ts並加入相應變數型別

// src/models/actions/index.ts
export const CREATE_TODO: string = 'CREATE'; // 增加一個todo
export const DELETE_TODO: string = 'DELETE'; // 刪除一個todo
export const CREATE_TYPE: string = 'CREATE_TYPE'; // 新增操作
export const DELETE_TYPE: string = 'DELETE_TYPE'; // 刪除操作

// src/models/reducers/index.ts
import {
    CREATE_TODO,
    DELETE_TODO,
    CREATE_TYPE,
    DELETE_TYPE,
} from '../actions'

interface TodoAction {
    type: string;
    id: number;
    text: string;
}
interface OperateAction {
    type: string;
}
export interface TodoState {
    id: number;
    text: string;
    completed: boolean;
}
export interface OperateState {
    createCounter: number;
    deleteCounter: number;
}

export function todos(state: TodoState[] = [], action: TodoAction) {
    switch (action.type) {
        case CREATE_TODO: {
            return [...state, { id: action.id, text: action.text, completed: false }]
        }
        case DELETE_TODO: {
            return [...state].filter(({ id }) => id !== action.id)
        }
        default: {
            return state;
        }
    }
}

export function operateCounter(state: OperateState = { createCounter: 0, deleteCounter: 0 }, action: OperateAction) {
    const { createCounter, deleteCounter } = state;
    switch (action.type) {
        case CREATE_TYPE: {
            return { ...state, createCounter: createCounter + 1 }
        }
        case DELETE_TYPE: {
            return { ...state, deleteCounter: deleteCounter + 1 }
        }
        default: {
            return state;
        }
    }
}

// src/models/stores/index.ts
import { combineReducers, createStore } from 'redux'
import * as reducers from '../reducers'

const todoApp = combineReducers(reducers)
export default createStore(todoApp)

將src/index.js 改為src/index.tsx，並新增相應介面，指定變數型別

// src/index.tsx
import React from 'react'
import { render } from 'react-dom'
import {
    HashRouter,
    Route,
    Switch,
    Redirect,
} from 'react-router-dom'
import { Provider, connect } from 'react-redux'
import { Dispatch } from 'redux'
import store from './models/stores'
import {
    CREATE_TODO,
    DELETE_TODO,
    CREATE_TYPE,
    DELETE_TYPE,
} from './models/actions'
import { TodoState, OperateState } from './models/reducers'
import styles from './index.less'

interface HomeProps {
    todos: TodoState[];
    operateCounter: OperateState;
    dispatch: Dispatch;
}

const HomeOld: React.FC<HomeProps> = (props) => {
    const {
        todos = [],
        operateCounter: {
            createCounter = 0,
            deleteCounter = 0,
        },
    } = props;
    return (
        <>
            <div>HOME HOHOHO</div>
            <div>當前todos如下，可以在page1與page2中操作todos列表：</div>
            <div className={styles.hohoho}>新增操作： {createCounter} 次，刪除操作： {deleteCounter} 次</div>
            {todos.map(({ text, id }) => (<li key={id}>{`id:${id}-text:${text}`}</li>))}
        </>
    )
}
const mapStateToPropsHome = (state: HomeProps) => {
    return {
        todos: state.todos,
        operateCounter: state.operateCounter,
    };
};
const Home = connect(mapStateToPropsHome)(HomeOld);





const Page1Old: React.FC<HomeProps> = (props) => {
    const { todos = [], dispatch } = props;
    let input: HTMLInputElement | null;
    function onClick() {
        const { id = 0 } = [...todos].pop() || {};
        dispatch({
            type: CREATE_TODO,
            id: id + 1,
            text: (input as HTMLInputElement).value,
        });
        dispatch({ type: CREATE_TYPE });
    }
    return (
        <>
            <div>PAGE1 HOHOHO</div>
            <input ref={node => { input = node }} />
            &nbsp;&nbsp;
            <button onClick={onClick}>新增</button>
            {todos.map(({ text, id }) => (<li key={id}>{`id:${id}-text:${text}`}</li>))}
        </>
    )
}
const mapStateToPropsPage1 = (state: HomeProps) => {
    return {
        todos: state.todos,
    };
};
const Page1 = connect(mapStateToPropsPage1)(Page1Old);





const Page2Old: React.FC<HomeProps> = (props) => {
    const { todos = [], dispatch } = props;
    function onClick(id: number) {
        dispatch({
            type: DELETE_TODO,
            id,
        });
        dispatch({ type: DELETE_TYPE });
    }
    return (
        <>
            <div>PAGE2 HOHOHO</div>
            {todos.map(({ text, id }) => (
                <li key={id}>
                    {`id:${id}-text:${text}`}
                    &nbsp;&nbsp;
                    <a href="javascript:;" onClick={onClick.bind(null, id)}>刪除該項</a>
                </li>
            ))}
        </>
    )
}
const mapStateToPropsPage2 = (state: HomeProps) => {
    return {
        todos: state.todos,
    };
};
const Page2 = connect(mapStateToPropsPage2)(Page2Old);






const App = () => (
    <Provider store={store}>
        <div className={styles.hohoho}>STAGE HOHOHO</div>
        <li><a href='#/home'>去home</a></li>
        <li><a href='#/page1'>去page1</a></li>
        <li><a href='#/page2'>去page2</a></li>
        <hr />
        <HashRouter>
            <Switch>
                <Route exact path='/home' component={Home} />
                <Route exact path='/page1' component={Page1} />
                <Route exact path='/page2' component={Page2} />
                <Redirect from='/' to='/home' />
            </Switch>
        </HashRouter>
    </Provider>
)

render(<App />, document.getElementById('root'))

同時需要修改build/webpack.config.js，修改入口檔案將原來的index.js改為index.tsx，新增resolve配置

// build/webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.tsx',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
    },
    devServer: {
        port: 3001,
    },
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
        })
    ],
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: 'ts-loader',
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { modules: true } },
                    'less-loader',
                ]
            },
        ]
    }
};

cd ../../ && mkdir types && cd types && touch global.d.ts // 在src目錄下建立types資料夾新增global.d.ts檔案

// src/types/global.d.ts
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'
declare module '*.less'

重啟服務

菜鳥webpack/react/redux/react-router/ts一步步搭建架子

mkdir stage && cd stage // 建立專案資料夾進入專案 npm init // 初始化依賴 npm install -S react react-dom// 安裝react相關依賴

使用 ts + and design + react-redux + react-router-dom + ahook 開發管理後臺

初始化： yarn create react-app skill--template typescript 安裝依賴: antd@ant-design/icons // ant design 相關

220、react-redux，把redux狀態和React-Router路由連起來

注意：前端單頁面應用，就是把狀態和路由連起來，同時注意巢狀 class App extends Component {

react+redux+ts

react+redux+ts 1. 初始化專案 yarn create react-app my-app --template typescript 2.安裝依賴 yarn add redux react-redux redux-devtools-extension

手寫一個React-Redux，玩轉React的Context API

上一篇文章我們手寫了一個Redux，但是單純的Redux只是一個狀態機，是沒有UI呈現的，所以一般我們使用的時候都會配合一個UI庫，比如在React中使用Redux就會用到React-Redux這個庫。這個庫的作用是將Redux的狀態機和Re

React-redux使用

為什麼要使用react-redux 由於redux的store與元件的耦合度太高所以，我們用react官方提供的react-redux可以使兩者耦合度降低，更好的實現模組化開發。

React Redux

寫在前面在前面介紹了 Redux，並用原生的 Redux 配合 React 開發了一個 todo-list 小 demo。

react-redux不完全指北

1、首先react-redux是用來在元件之間方便傳輸資料以及改變資料的工具 2、常用的react-redux的方法是包含注入已經呼叫

簡述react、redux、react-redux、redux-saga、dva之間的關係

react】定位：React 是一個用於構建使用者介面的JavaScript庫。特點：它採用聲明範式來描述應用，建立虛擬dom，支援JSX語法，通過react構建元件，能夠很好的去複用程式碼；

React Redux 元件更新/渲染原理 connect之mapStateToProps 看這篇就夠了！比中文文件好用！

本文深入淺出mapStateToProps，解答：為什麼修改state，元件未渲染/更新？如何從新舊state判斷更新的值、未更新的值，從而決定是否re-render？

react-redux的學習

react,taro看的頭暈眼花，慢慢記錄一些吧。今天記錄下react-redux： ReactDOM.render( <Provider store={store}>

react-redux筆記

參考地址：https://blog.csdn.net/q1056843325/article/details/54880804 使用：（一）、首頁js引入react-redux和store

react-redux簡單使用

react-redux 簡單使用步驟一、建立 action 1. action 實質上是一個包含type屬性的Object物件

帶著問題看React-Redux原始碼

React-Redux在專案中的應用在這裡，我就預設大家已經會使用Redux了，它為我們的應用提供一個全域性的物件（store）來管理狀態。那麼如何將Redux應用在React中呢？想一下，我們的最終目的是實現跨層級元件間通訊與狀

react系列學習（三）——react-redux使用方法

技術標籤：react 1，react-redux是作者為了方便使用redux封裝的庫，可用可不用，看個人的習慣。

react-redux的使用

react-redux的使用，前面已經介紹了redux的使用（https://www.cnblogs.com/cupid10/p/13629368.html）

使用React+redux+Node.js+MongoDB開發(一)

1. 全域性安裝create-react-app npm install -g create-react-app 2. 建立新專案 create-react-app my-app

react-redux應用

技術標籤：# Reactreact-redux 目錄 1.元件分類 2.專案結構 3.原始碼效果 counter.jsx app.jsx

react-redux操作過程中，出現的問題：Uncaught ReferenceError: Cannot access ‘SET_XXXXX‘ before initialization

技術標籤：React-TypeScriptReactreacttypescript 在react-redux的action操作中，我試圖在一個action中去dispatch操作另一個action，結果出現了詳細程式碼如下（一個action函式）：

react-redux @connect的使用 - Kaiqisan

技術標籤：React知識庫reactjs裝飾器babelredux 大家好，都吃晚飯了嗎？我是Kaiqisan,是一個已經走出社恐的一般生徒,我第一次見識到這個知識是在使用taro的時候看到的，當時覺得奇怪，自己寫了一年的js卻從來沒

菜鳥webpack/react/redux/react-router/ts一步步搭建架子

相關推薦