返回

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

前端

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);
    });
};

13. 集成 REST API

REST API 是一种用于在客户端和服务器之间交换数据的流行架构。要集成 REST API,请按照以下步骤操作:

  • 创建一个 API 端点
  • 定义请求和响应格式
  • 使用 HTTP 动词(如 GET、POST、PUT 和 DELETE)来进行操作
  • 使用 Axios 或 Fetch 来进行 HTTP 请求

总结

通过执行这些必做的操作,你可以优化 React 初始项目的设置,使其更易于维护、可扩展和高效。随着项目的增长,你可以根据需要添加更多功能和优化。