React项目搭建的捷径：初学者手册

前端

2024-01-29 04:41:00

React作为时下最流行的JavaScript框架，以其高效率、高性能、代码简洁性与跨平台兼容性等优势，吸引了众多开发者的关注。初学者想要涉足React项目开发，第一步便是搭建React环境，开启一段激动人心的编程旅程。

一、React环境搭建

安装Node.js

React的搭建与运行都需要借助Node.js环境，因此第一步是安装Node.js。可以从Node.js官方网站下载适用于你操作系统版本的安装包，按照安装向导进行安装即可。
安装create-react-app工具

create-react-app是一个命令行工具，可帮助你快速创建一个新的React项目，内含所有必需的依赖项和配置。在命令行窗口中，执行以下命令：
```
npm install -g create-react-app
```
这将全局安装create-react-app工具。

二、创建React项目

创建新项目

在希望存放项目的目录下，打开命令行窗口，执行以下命令：
```
create-react-app my-app --typescript
```
其中my-app为你希望创建的项目名称，--typescript参数指定使用TypeScript作为项目语言。

该命令将创建一个名为my-app的新目录，其中包含所有React项目必需的文件和文件夹。
进入项目文件夹

使用cd命令进入项目文件夹：
```
cd my-app
```
安装项目依赖项

使用yarn或npm命令安装项目依赖项：
```
yarn install
```
或
```
npm install
```

三、运行React项目

启动开发服务器

在项目目录下，执行以下命令启动开发服务器：
```
yarn start
```
或
```
npm start
```
这将在localhost:3000端口启动一个开发服务器。
打开浏览器

在浏览器中打开localhost:3000，即可看到正在运行的React项目。

四、多语言配置

安装react-i18next库

React-i18next是一个用于React应用程序的国际化库。在项目目录下，执行以下命令安装react-i18next库：
```
yarn add react-i18next
```
或
```
npm install react-i18next
```

配置i18next

在项目src目录下，创建一个i18n.js文件，并添加以下代码：

import i18n from 'react-i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: {
      en: {
        translation: {
          "Hello world": "Hello world",
        },
      },
    },
    lng: 'en',
    fallbackLng: 'en',
  });

export default i18n;

这将初始化i18next，并指定英语作为默认语言。

使用i18next

在项目中使用i18next，可以在组件中使用useTranslation钩子。例如：

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();

  return <div>{t('Hello world')}</div>;
};

export default MyComponent;