React 初始项目的必备操作，让你的开发更顺畅

2024-01-31 05:21:16

React 初始项目的必备操作

使用 React脚手架创建 React 项目后，以下操作将使你的后续工作更顺畅：

1. 调整目录结构

默认的目录结构可能不适合所有项目。你可以根据自己的需要调整它。例如，你可以创建不同的目录来组织组件、视图、实用程序和样式。

2. 调整文件内容

// App.js

import React from "react";

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

默认的 App.js 文件非常简单。你可以根据需要添加功能。例如，你可以添加状态管理、数据获取或其他功能。

3. 配置

// package.json

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "lint": "eslint src/*.js src/*.jsx"
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

package.json 文件包含项目的配置。你可以根据需要添加或修改脚本和配置。例如，你可以添加一个用于linter的脚本或配置自定义 ESLint 规则。

4. 集成 Typescript

Typescript 是一个流行的 JavaScript 超集，它可以提高代码的可读性和可维护性。要集成 Typescript，请按照以下步骤操作：

// tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "sourceMap": true,
    "strict": true
  }
}

然后，将你的 .js 文件重命名为 .tsx 文件，并开始使用 Typescript。

5. 设置环境变量

环境变量可用于在不同环境（例如开发和生产）中存储和管理配置。要设置环境变量，请按照以下步骤操作：

// .env

REACT_APP_API_URL=https://example.com/api

然后，你可以在你的代码中使用 process.env.REACT_APP_API_URL 来访问环境变量。

6. 优化性能

随着应用程序的增长，优化其性能变得越来越重要。你可以使用以下技术来优化性能：

代码拆分
缓存
懒加载
Profiler

7. 启用热更新

热更新允许你在不刷新页面或丢失状态的情況下更新组件。要启用热更新，请按照以下步骤操作：

// package.json

{
  "dependencies": {
    "react-refresh": "^0.8.3"
  }
}

然后，在你的 App.js 文件中，包裹你的根组件：

import { Refresh ممتs} from "react-refresh/runtime";

const App = () => {
  return (
    <RefreshRuns>
      {/* 你的组件 */}
    </RefreshRuns>
  );
};

8. 部署到生产环境

在开发好应用程序后，你需要將其部署到生产环境。你可以使用以下技术来实现此目的：

Netlify
Heroku
AWS Amplify

9. 使用 Redux

Redux 是一个状态管理库，它可以帮助你管理应用程序中的状态。要使用 Redux，请按照以下步骤操作：

// store.js

import { createStore } from "redux";

const initialState = {
  count: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

然后，在你的组件中，你可以使用 useSelector 和 useDispatch 来访问和更新状态。

10. 使用 React-Redux

React-Redux 是一个连接 Redux 和 React 组件的库。要使用 React-Redux，请按照以下步骤操作：

// App.js

import React from "react";
import { connect } from "react-redux";

const App = (props) => {
  return (
    <div>
      <h1>Count: {props.count}</h1>
      <button onClick={() => props.dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => props.dispatch({ type: "DECREMENT" })}>-</button>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    count: state.count
  };
};

export default connect(map state ToProps)(App);

11. 使用 React-Thunk

React-Thunk 是一个中间件，它允许你在 Redux 中分发函数。要使用 React-Thunk，请按照以下步骤操作：

// actions.js

import { fetchPosts } from "./api";

export const getPosts = () => {
  return (dispatch) => {
    return fetchPosts()
      .then((res) => {
        dispatch({ type: "GET_POSTS", posts: res.data });
      })
      .catch((err) => {
        dispatch({ type: "GET_POSTS_ERROR", error: err });
      });
  };
};

然后，在你的组件中，你可以使用 useDispatch 来分发函数。

12. 使用 Axios 或 Fetch

Axios 和 Fetch 都是用于进行 HTTP 请求的库。它们都可以用来从 API 获取数据。要使用 Axios，请按照以下步骤操作：

// api.js

import axios from "axios";

const API_URL = "https://example.com/api";

export const fetchPosts = () => {
  return axios.get(`${API_URL}/posts`);
};

要使用 Fetch，请按照以下步骤操作：

// api.js

export const fetchPosts = () => {
  return fetch(`${API_URL}/posts`)
    .then((res) => res.json())
    .catch((err) => {
      throw new Error(err);
    });
};