玩转React全家桶：基于Vite4，一个都不能少！

2023-05-21 05:21:28

React全家桶教程：基于Vite4，掌握React开发奥秘

简介

React全家桶是一个强大的工具集，集成了React、Redux、React Router和Antd等必备库，为React开发人员提供了一站式解决方案。本教程将深入探讨如何使用Vite4构建基于React全家桶的应用程序，带领你掌握React开发的精髓。

安装Vite4和React全家桶

首先，安装Vite4和React全家桶依赖：

npm install vite@4 react react-dom redux redux-toolkit react-router-dom antd@5

创建React项目

使用Vite4创建新的React项目：

vite create my-app

添加React全家桶到项目

在项目根目录创建以下文件：

src/index.js
src/App.js
src/store.js
src/routes.js

在这些文件中，引入React、Redux、React Router和Antd5。

代码编写

App.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import { Button } from 'antd';

const App = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div className="App">
      <h1>Hello, World!</h1>
      <Button type="primary" onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</Button>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
};

export default App;

store.js

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    count: (state = 0, action) => {
      switch (action.type) {
        case 'INCREMENT':
          return state + 1;
        default:
          return state;
      }
    },
  },
});

export default store;

routes.js

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import Home from './Home';
import About from './About';

const Routes = () => {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
};

export default Routes;