preface

The react family bucket and typescript reference code are stored in Webpack03. Yarn Start can be used to run the webpack directly

Join the react

First we install React and react-dom

yarn add react react-dom --dev
Copy the code

Babel recognizes JSX syntax

yarn add @babel/preset-react --dev
Copy the code

Configuration. Babelrc

{

"presets": ["@babel/preset-env", "@babel/preset-react"]

}
Copy the code

Next, create app.js in the SRC directory with the following code

import React from "react";
import styles from "./App.less";

function App() {
  return <div className={styles.App}>Hello react</div>;
}

export default App;
Copy the code

When we saw the Hello React we wrote displayed on the page, didn’t we feel beautiful? We felt that all our efforts were worth it

Support CSS modules

See this title, we just show our axe, what? According to? How?

The first question is, what are CSS modules? Why use CSS Modules?

Now how do you use it?

Webpack does not support CSS Modules by default. If you want to use it, you need to configure it manually

 module: {
    rules: [
      ....,
      {
        test: /\.(css|less)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[name]_[hash:base64:5]",
              },
            },
          },
          "less-loader",
        ],
      },
    ],
  },
Copy the code

The configuration takes effect

If modules is set, the generated class name is all hash code, so we can tell

So let me just add the localIdentName

Join the react – the router

Yarn add [email protected] - devCopy the code

We are using version 5.1.0

index.js

If you define a path property that begins with a slash, the Home component will be matched every time

How to solve it?

You only need to add exact to the Home route so that the component will be rendered only if the value of path is an exact match

You can also tell the React Router to load only one route at a time by wrapping the route with Switch.

After adding the route, you find that every time the page is refreshed 404, you need to configure historyApiFallback in devServer

webpack.base.js

. devServer: { open: true, historyApiFallback: true, },Copy the code

Join the story

Install the story

What, why, how

Why redux?

  • As projects grow larger, it becomes more difficult to pass data between components
  • These states include the data returned by the server, as well as some UI states
yarn add redux react-redux redux-actions --dev
Copy the code

Create the Store folder under the SRC directory. Create 2 folders actions, reducers and a file index.js below

The contents of count.action.js are as follows

import { createAction } from "redux-actions";
export const addCount = createAction("addCount");
export const reduceCount = createAction("reduceCount");
Copy the code

The content of count.reducer.js is as follows

import { handleActions as createReducer } from "redux-actions"; import { addCount, reduceCount } from ".. /actions/count.action"; const initialState = { count: 0 }; const handleAddCount = (state, action) => { return { ... state, count: action.payload + state.count }; }; export default createReducer( { [addCount]: handleAddCount, }, initialState );Copy the code

The content of root.reducer.js is as follows

import { combineReducers } from "redux";
import countReducer from "./count.reducer";
export default combineReducers({
 count: countReducer,
});
Copy the code

The contents of index.js under store are as follows

import { createStore } from "redux";
import rootReducer from "./reducers/root.reducer";
export const store = createStore(rootReducer);
Copy the code

As mentioned above, we have established our store, action and reducer, and the next step is to connect with the components

How to join in index.js from SRC

import React from "react";
import ReactDom from "react-dom";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import { Provider } from "react-redux";
import { store } from "./store/index";
import App from "./App";
import About from "./About/index";
import Home from "./Home/index";
ReactDom.render(
    <Provider store={store}>
        <Router>
            <Switch>
                <Route path="/" exact component={App} />
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
            </Switch>
        </Router>
    </Provider>,
document.querySelector("#root")
);
Copy the code

Use in component App as follows

typescript

Some students may become familiar with typescript, but others may not like typescript because it is cumbersome and costly to learn, or has too many red spots after using typescript and is troublesome to modify

So we showed our axe, what? According to? How?

The most important feature is the ability to find and correct errors at compile time, so that your online code is less prone to errors

How do you use the React declaration that installs typescript in the first place and typescript

yarn add @types/react @types/react-dom typescript ts-loader --dev
Copy the code

Configuration file tsconfig.json

TSC --init generates the defaultCopy the code

Tsconfig. Json configuration

{
    "compilerOptions": {
        "target": "es2016"."jsx": "react".// Support JSX syntax, otherwise error
        "module": "commonjs"."esModuleInterop": true."forceConsistentCasingInFileNames": true."strict": true."skipLibCheck": true
    },
    "include": ["src"]}Copy the code

Webpack configuration

module: {
    rules: [... {test: /\.ts$/,
        exclude: /node_modules/,
        use: {
          loader: "ts-loader",},},],},...resolve: {
            extensions: [".ts".".tsx".".jsx".".js"].// The default parsing order is no ts, we support ts, we need to write
    },
Copy the code

The React template uses TSX

conclusion

If the above content is helpful to you, please give a thumb-up 👍🏻, I will continue to work hard, write more in-depth articles, Thanks, Thanks to (· ω ·) Blue