boilerplate_完整的React Boilerplate教程-从零到英雄

boilerplate

by Leonardo Maldonado

莱昂纳多·马尔多纳多(Leonardo Maldonado)

完整的React Boilerplate教程-从零到英雄 (A Complete React Boilerplate Tutorial — From Zero to Hero)

When we’re starting learn React, to make our projects we need to make a boilerplate from scratch or use some provided by the community. Almost all the times it’s the create-react-app that we use to create an app with no build configuration. Or we just make our own simple boilerplate from scratch.

当我们开始学习React时，要创建我们的项目，我们需要从头开始制作样板或使用社区提供的一些样板。 几乎一直都是我们使用create-react-app创建没有构建配置的应用程序。 或者我们只是从头开始制作自己的简单样板。

From this, it comes to mind: why not make a boilerplate with all dependencies that I always use and leave it ready? The community also thought that way, so now we have several community-created boilerplates. Some are more complex than others, but they always have the same goal of saving the maximum amount of time.

由此想到：为什么不制作一个我一直使用的所有依赖项的样板并准备好呢？ 社区也这么认为，所以现在我们有几个社区创建的样板。 有些比其他的复杂得多，但是它们始终具有节省最大时间的相同目标。

This article will teach you how you can build your own boilerplate from scratch with the main dependencies used in the React community today. We’re gonna use some of the moderns features most common these days and from there you can customize it any way you want.

本文将教您如何使用当今React社区中使用的主要依赖从头开始构建自己的样板。 我们将使用当今最常见的一些现代功能，从那里您可以按自己的方式自定义它。

The boilerplate created by this article will be available here!

本文创建的样板将在此处提供！

入门 (Getting started)

First of all, we’re going to create a folder to start our boilerplate. You can name it whatever you want, I’m gonna name mine react-bolt.

首先，我们将创建一个文件夹来启动样板。 您可以随意命名，我要命名为react react-bolt 。

Open your terminal, and create it like this:

打开您的终端，并按以下方式创建它：

mkdir react-bolt

Now, go to your created folder, and type the following command:

现在，转到您创建的文件夹，然后键入以下命令：

npm init -y

NPM will create a package.json file for you, and all the dependencies that you installed and your commands will be there.

NPM将为您创建一个package.json文件，您安装的所有依赖项和命令将在其中。

Now, we’re going to create the basic folder structure for our boilerplate. It’s gonna be like this for now:

现在，我们将为样板创建基本的文件夹结构。 现在将是这样的：

react-bolt    |--config    |--src    |--tests

Webpack (Webpack)

Webpack is the most famous module-bundler for JavaScript applications nowadays. Basically, it bundles all your code and generates one or more bundles. You can learn more about it here.

Webpack是当今最著名JavaScript应用程序模块捆绑程序。 基本上，它捆绑所有代码并生成一个或多个捆绑。 您可以在此处了解更多信息。

In this boilerplate we’re going to use it, so install all these dependencies:

在此样板中，我们将使用它，因此安装所有这些依赖项：

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url-loader file-loader

Now in our config folder, we’re going to create another folder called webpack, then inside that webpack folder create 5 files.

现在在config文件夹中，我们将创建另一个名为webpack文件夹，然后在该webpack文件夹中创建5个文件。

Create a file called paths.js. Inside that file is going to be the target directory for all your output files.

创建一个名为paths.js的文件。 该文件内部将成为所有输出文件的目标目录。

Inside it, put all this code:

在其中放入以下所有代码：

Now, create another file called rules.js, and put the following code there:

现在，创建另一个名为rules.js文件，并在其中放置以下代码：

After that, we’re going to create 3 more files:

之后，我们将再创建3个文件：

webpack.common.babel.js

webpack.common.babel.js

webpack.dev.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

webpack.prod.babel.js

Basically, in our webpack.common.babel.js file, we’ve set up our entry and output configuration and included as well any plugins that are required. In the webpack.dev.babel.js file, we’ve set the mode to development. And in our webpack.prod.babel.js file, we’ve set the mode to production.

基本上，在我们的webpack.common.babel.js文件中，我们设置了输入和输出配置，并包括所需的所有插件。 在webpack.dev.babel.js文件中，我们将模式设置为开发。 在我们的webpack.prod.babel.js文件中，我们将模式设置为生产。

After that, in our root folder, we’re going to create the last webpack file called webpack.config.js and put in the following code:

之后，在我们的根文件夹中，我们将创建名为webpack.config.js的最后一个webpack文件，并输入以下代码：

Our webpack config is ready, so now we’re going to work on other parts of the boilerplate with Babel, ESLint, Prettier, etc.

我们的webpack配置已准备就绪，因此现在我们将使用Babel，ESLint，Prettier等在样板的其他部分上进行工作。

巴别塔 (Babel)

I think that almost everyone who works with React has probably heard about Babel and how this simple transpiler helps our lives. If you don’t know what it is, Babel it’s basically a transpiler that converts your JavaScript code into plain old ES5 JavaScript that can run in any browser.

我认为几乎所有使用React的人都可能听说过Babel，以及这个简单的编译器如何帮助我们的生活。 如果您不知道它是什么，Babel基本上就是一个编译器，它将您JavaScript代码转换为可以在任何浏览器中运行的普通的ES5 JavaScript。

We’re going to use a bunch of Babel plugins, so in our root folder, install:

我们将使用大量Babel插件，因此在我们的根文件夹中安装：

npm install --save-dev @babel/core @babe/cli @babel/node @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/plugin-transform-async-to-generator @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/register @babel/runtime babel-eslint babel-jest babel-loader babel-core@7.0.0-bridge.0

After this, we’re gonna create a file in our root folder called .babelrc and inside that file, we’re going to put the following code:

之后，我们将在名为.babelrc的根文件夹中创建一个文件，并在该文件中创建以下代码：

Now our project is compiled by Babel, and we can use the next-generation JavaScript syntax without any problems.

现在我们的项目是由Babel编译的，我们可以毫无问题地使用下一代JavaScript语法。

ESLint (ESLint)

The most used tool for linting projects nowadays is ESLint. It is really helpful to find certain classes of bugs, such as those related to variable scope, assignment to undeclared variables, and so on.

如今，用于整理项目最常用的工具是ESLint。 查找某些错误类别，例如与变量范围，分配给未声明的变量等有关的错误，确实很有帮助。

First, install the following dependencies:

首先，安装以下依赖项：

npm install --save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react

Then, in our root folder, create a file called .eslintrc and put the following code there:

然后，在我们的根文件夹中，创建一个名为.eslintrc的文件，并将以下代码放在此处：

更漂亮 (Prettier)

Prettier is basically a code formatter. It parses your code and re-prints it with its own rules that take the maximum line length into account, wrapping code when necessary.

漂亮的东西基本上是一个代码格式化程序。 它解析您的代码，并使用自己的规则重新打印它，该规则考虑最大行长，并在必要时包装代码。

You just need to install it:

您只需要安装它：

npm install --save-dev prettier

And in our root folder, create a file called .prettierrc and put the following code there:

在我们的根文件夹中，创建一个名为.prettierrc的文件，并将以下代码放在此处：

React (React)

React is an open-source JavaScript application library to build user interfaces. It was developed by Facebook and has a huge community behind it. If you are reading this article, I assume that you already know about React, but if you want to learn more about it, you can read up here.

React是一个开放源代码JavaScript应用程序库，用于构建用户界面。 它由Facebook开发，背后有庞大的社区。 如果您正在阅读本文，那么我假设您已经了解React，但是如果您想了解更多信息，可以在这里阅读。

We’re going to install the following dependencies:

我们将安装以下依赖项：

npm install --save react react-dom cross-env

And inside our src folder, we’re going to create a simple HTML file index.html and put in the following code:

在src文件夹中，我们将创建一个简单HTML文件index.html并放入以下代码：

After that, we’re going to create a simple React project. Inside our src folder, create a index.js file like this:

之后，我们将创建一个简单的React项目。 在我们的src文件夹中，创建一个index.js文件，如下所示：

Inside our src folder we’re going to have the following structure:

在src文件夹中，我们将具有以下结构：

src    |--actions    |--components    |--reducers    |--reducers    |--store

Create a file called App.js inside the components folder, and put in the following code:

在components文件夹内创建一个名为App.js的文件，并输入以下代码：

Redux (Redux)

Redux makes it easy to manage the state of your application. Another way of looking at this is that it helps you manage the data you display and how you respond to user actions. These days a lot of people prefer other options like MobX or just the setState itself, but I’m gonna stick with Redux for this boilerplate.

Redux使管理应用程序状态变得容易。 另一种看待此问题的方式是，它可以帮助您管理显示的数据以及如何响应用户的操作。 如今，很多人都喜欢MobX或setState本身之类的其他选项，但是我将坚持使用Redux来制作此样板。

First, we’re going to install some dependencies:

首先，我们将安装一些依赖项：

npm install --save redux react-redux redux-thunk

Then, we’re going to create our Redux store, and put some state there. In our store folder, create an index.js file and put that following code there:

然后，我们将创建我们的Redux存储，并在其中放置一些状态。 在我们的store文件夹中，创建一个index.js文件，并将以下代码放在此处：

Now, inside our reducers folder create an index.js and put the following code:

现在，在我们的reducers文件夹中创建一个index.js并放入以下代码：

Last, we’re gonna to our index.js in our src folder, and wrap the code with the <Provider /> and pass our store as props to make it available to our application.

最后，我们要在src文件夹中找到index.js ，并用<Provider />并s our商店为道具，以使其可用于我们的应用程序。

It’s going to be like this:

它将是这样的：

All done. Our Redux store is configured and ready to go.

全做完了。 我们的Redux商店已配置完毕，可以使用了。

React路由器 (React Router)

React Router is the standard routing library for React. Basically, it keeps your UI in sync with the URL. We’re gonna use it in our boilerplate, so install it:

React Router是React的标准路由库。 基本上，它 使您的用户界面与网址保持同步。 我们将在样板中使用它，因此安装它：

npm install --save react-router-dom

After that, go to our index.js in our src folder and wrap all the code there with the <BrowserRouter>.

之后，转到src文件夹中的index.js并使用<BrowserRoute r>将所有代码包装在那里。

Our index.js in our src folder it’s going to end up like this:

我们的src文件夹中的index.js最终将像这样：

样式化的组件 (Styled Components)

Styled Components makes CSS easy for everyone, as it helps you organize your React project. Its objective is to write more small and reusable components. We’re gonna use it, and if you want to learn more about it, read up here.

样式化组件使CSS对所有人都很容易，因为它可以帮助您组织React项目。 其目的是编写更多小的可重用组件。 我们将使用它，如果您想了解更多有关它的信息，请在这里阅读。

First, install it:

首先，安装它：

npm install --save styled-components

Then, in our App.js file inside our components folder, we’re going to create a simple title using Styled Components. Our title is going to be like this:

然后，在components文件夹内的App.js文件中，我们将使用样式化组件创建一个简单的标题。 我们的标题将是这样的：

And inside our file, we need to import styled components, so our file is going to end up like this:

在我们的文件中，我们需要导入样式化的组件，因此我们的文件将最终如下所示：

Jest＆React测试库 (Jest & React Testing Library)

Jest is an open-source JavaScript testing library from Facebook. It makes it easy to test your application, and gives us a lot of information about what is giving the right output and what’s not. React Testing Library is a very light-weight solution for testing React components. Basically, this library is a replacement for Enzyme.

Jest是Facebook的开源JavaScript测试库。 它使测试您的应用程序变得容易，并为我们提供了很多有关正确输出和不正确输出的信息。 React Testing库是用于测试React组件的非常轻量级的解决方案。 基本上，该库是酶的替代品。

Every application needs some kind of tests. I’m not gonna write tests in this article but I’m gonna show you how you can configure these tools to start testing your applications.

每个应用程序都需要某种测试。 我不会在本文中编写测试，而是向您展示如何配置这些工具以开始测试应用程序。

First, we’re gonna install both:

首先，我们要安装两个：

npm install --save-dev jest jest-dom react-testing-library

After that, go to our package.json and put the following after all:

在那之后，转到我们的package.json并放上以下所有内容：

Then, go to our config folder, and inside it created another folder called tests and inside that folder, create 2 files.

然后，转到我们的config文件夹，并在其中创建另一个名为tests文件夹，并在该文件夹中创建2个文件。

First, create a file called jest.config.js and put in the following code:

首先，创建一个名为jest.config.js的文件，并输入以下代码：

Then, create a file called rtl.setup.js and put in the following code:

然后，创建一个名为rtl.setup.js的文件，并输入以下代码：

All done. Our boilerplate is ready to go and you can use it now.

全做完了。 我们的样板准备就绪，您可以立即使用。

Now go to our file package.json and put in the following code:

现在转到我们的文件package.json并输入以下代码：

Now, if you run the command npm start and go to localhost:8080, we should see our application working fine!

现在，如果您运行命令npm start并转到localhost:8080 ，我们应该看到我们的应用程序运行正常！

If you want to see my final code, the boilerplate created by this article is available here!

如果您想查看我的最终代码，可以在此处获得本文创建的样板！

I have some ideas for some features that I’d love to include in the boilerplate, so please feel free to contribute!

对于某些我想包含在样板中的功能，我有一些想法，请随时贡献！

? Follow me on Twitter! ⭐ Follow me on GitHub!

？ 在Twitter上关注我！ ⭐ 在GitHub上关注我！

I’m looking for a remote opportunity, so if have any I’d love to hear about it, so please contact me!

我正在寻找机会，所以如果有任何我想听到的机会，请与我联系！

翻译自: https://www.freecodecamp.org/news/a-complete-react-boilerplate-tutorial-from-zero-to-hero-20023e086c4a/

boilerplate