Extensive React Boilerplate 使用教程

Extensive React Boilerplate 使用教程

extensive-react-boilerplateExtensive React Boilerplate: ✔️NextJS ✔️Auth ✔️I18N ✔️MUI ✔️Forms项目地址:https://gitcode.com/gh_mirrors/ex/extensive-react-boilerplate

1. 项目的目录结构及介绍

extensive-react-boilerplate/
├── .github/
│   └── workflows/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── config/
│   ├── hooks/
│   ├── layouts/
│   ├── pages/
│   ├── services/
│   ├── store/
│   ├── styles/
│   ├── utils/
│   ├── App.tsx
│   ├── index.tsx
│   └── react-app-env.d.ts
├── .env
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── commitlint.config.js
├── package.json
├── tsconfig.json
└── README.md

目录结构介绍

• .github/workflows: GitHub Actions 的工作流配置文件。
• public: 存放静态资源文件，如 favicon.ico 和 index.html。
• src: 源代码目录。
  • assets: 存放静态资源，如图片、字体等。
  • components: 存放 React 组件。
  • config: 存放配置文件。
  • hooks: 存放自定义 Hooks。
  • layouts: 存放页面布局组件。
  • pages: 存放页面组件。
  • services: 存放服务层代码，如 API 请求。
  • store: 存放状态管理代码，如 Redux。
  • styles: 存放全局样式文件。
  • utils: 存放工具函数。
  • App.tsx: 应用的根组件。
  • index.tsx: 应用的入口文件。
  • react-app-env.d.ts: TypeScript 类型声明文件。
• .env: 环境变量配置文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 配置文件。
• commitlint.config.js: CommitLint 配置文件。
• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript 配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

入口文件

• src/index.tsx:

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
  
  reportWebVitals();
  

根组件

• src/App.tsx:

  import React from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import { Provider } from 'react-redux';
  import store from './store';
  import HomePage from './pages/HomePage';
  import LoginPage from './pages/LoginPage';
  
  const App: React.FC = () => {
    return (
      <Provider store={store}>
        <Router>
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route path="/login" component={LoginPage} />
          </Switch>
        </Router>
      </Provider>
    );
  };
  
  export default App;
  

3. 项目的配置文件介绍

环境变量配置

• .env:

  REACT_APP_API_URL=http://localhost:3000
  

ESLint 配置

• .eslintrc.js:

  module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
      'plugin:@typescript-eslint/recommended',
      'prettier',
      'plugin:prettier/recommended',
    ],
    parserOptions: {
  

extensive-react-boilerplateExtensive React Boilerplate: ✔️NextJS ✔️Auth ✔️I18N ✔️MUI ✔️Forms项目地址:https://gitcode.com/gh_mirrors/ex/extensive-react-boilerplate