简介
create-react-app-extra 是一个基于 create-react-app 的扩展包，它提供了额外的功能和配置选项，使得创建 React 应用更加方便快捷。
安装
在安装 create-react-app-extra 之前，您需要先安装 Node.js 和 npm。安装完成后，打开终端并执行以下命令：
npx create-react-app my-app --template extra
这将使用 create-react-app-extra 模板创建一个名为 my-app 的新应用程序。您也可以在任何现有的 create-react-app 应用程序中安装 create-react-app-extra：
npm install create-react-app-extra
功能
create-react-app-extra 增加了以下功能：
CSS 预处理器支持
create-react-app-extra 支持 Sass、Less 和 Stylus 预处理器。您只需在安装时选择相应的选项，并在项目中使用 .scss、.less 或 .styl 文件。
内置多语言支持
create-react-app-extra 包含多语言支持库 react-i18next，并提供了一个简单的 setupI18n 函数，使您可以轻松地在应用程序中添加多语言支持。
响应式布局方案
create-react-app-extra 内置了响应式布局方案，您可以使用它来创建适应不同设备及分辨率的布局。
Redux 集成
create-react-app-extra 集成了 Redux 和 Redux Toolkit，使您可以轻松地使用 Redux 管理应用程序状态。
配置
create-react-app-extra 提供了以下配置选项：
cssPreprocessor
默认情况下，create-react-app-extra 不使用任何 CSS 预处理器。您可以通过在安装时选择相应的选项来启用某个预处理器：
npx create-react-app my-app --template extra --cssPreprocessor sass
除了 sass，您还可以选择 less 或 stylus。如果您不需要 CSS 预处理器，可以将值设置为 false。
i18n
create-react-app-extra 默认启用多语言支持。您可以在项目的 src/index.js 文件中通过调用 setupI18n 函数进行配置。
-- -------------------- ---- -------
------ - --------- - ---- -------------------------
------ ---- ---- ----------
------ -- ---- --------------------
------ -- ---- --------------------
-----------
----- -
---- -----
------------ -----
---------- -
--- - ------------ -- --
--- - ------------ -- --
--
--
-----
---这将使用 en 和 zh 作为默认语言，并将语言文本资源存储在 locales 文件夹下的 en.json 和 zh.json 文件中。
responsive
create-react-app-extra 默认启用响应式布局方案。您可以通过调用 createResponsiveProvider 函数来配置该方案。
-- -------------------- ---- -------
------ - ------------------------ - ---- -------------------------
----- ------------------ - --------------------------
--- --
--- ----
--- ----
--- ----
--- -----
---
-------- ----- -
------ -
--------------------
------- --
---------------------
--
-这将创建一个名为 ResponsiveProvider 的组件，并定义了 xs、sm、md、lg 和 xl 五个响应式断点值。
redux
create-react-app-extra 集成了 Redux 和 Redux Toolkit。您可以通过在项目的 src/store.js 文件中定义自己的 Redux store 来配置它。
-- -------------------- ---- -------
------ - -------------- - ---- -------------------
----- ----- - ----------------
-------- -
-------- ---------------
--
---
------ ------- ------这将定义了一个名为 counter 的 reducer，并将其注入到 redux 的 store 中。
示例代码
以下是一个使用 create-react-app-extra 搭建的应用程序的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -------------------------
------ ---- ---- ----------
------ -- ---- --------------------
------ -- ---- --------------------
------ - ------------------------ - ---- -------------------------
------ - -------------- - ---- -------------------
------ - -------- - ---- --------------
------ -------------- ---- ---------------------
------ ------------
----- ------------------ - --------------------------
--- --
--- ----
--- ----
--- ----
--- -----
---
-----------
----- -
---- -----
------------ -----
---------- -
--- - ------------ -- --
--- - ------------ -- --
--
--
-----
---
----- ----- - ----------------
-------- -
-------- ---------------
--
---
-------- ----- -
------ -
--------- --------------
--------------------
---- ----------------
------- -----------------------
-------- ----------
---------
------
---------------------
-----------
--
-
------ ------- ----结论
create-react-app-extra 是一个非常实用的 npm 包，它提供了额外的功能和配置选项，使得创建 React 应用更加方便快捷。通过本文的介绍，您现在已经掌握了 create-react-app-extra 的使用方法和配置选项，可以开始构建您的下一个 React 应用程序了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005570781e8991b448d3edd