parcel react_如何在5个步骤中创建最小的React和Parcel应用程序

parcel react

为什么不使用create-react-app ？ (Why not use create-react-app?)

When it comes to creating React projects, most people very naturally reach for create-react-app. There's nothing wrong with that. create-react-app is very handy and I use it often when I just need a React project and don't really care how many dependencies it installs. But, at times, I need something minimal. At those times I don't need the App.test.js file or the image assets.

在创建React项目时，大多数人自然而然地接触了create-react-app 。 没有错。 create-react-app非常方便，当我只需要一个React项目并且不在乎它安装了多少依赖项时，我经常使用它。 但是，有时我只需要很少的东西。 那时，我不需要App.test.js文件或图像资产。

For such situations, I find create-react-app unnecessary. Creating a project and setting it up yourself gives you more control over its dependencies.

对于这种情况，我认为没有必要create-react-app 。 自己创建和设置项目可以使您更好地控制其依赖项。

Webpack替代 (Webpack alternative)

I thought of reading the Webpack documentation and manually setting up a React project. But looking at the Webpack docs, it seemed it would take some time before I can understand how to set everything up. That’s when I came across Parceljs. It’s supposed to be zero-config and easy to get started with.

我想到阅读Webpack文档并手动设置一个React项目。 但是看一下Webpack文档，似乎我需要一些时间才能了解如何设置所有内容。 那是我遇到Parceljs的时候。 它应该是零配置且易于上手。

I tried it and it was quick work. Creating a project and installing dependencies to looking at the result on localhost — took just 5 steps.

我尝试了，这是快速的工作。 创建项目并安装依赖项以查看localhost上的结果-仅需5个步骤。

1.创建一个项目 (1. Create a project)

The first step is to create a project. Go to your console or command line and create a new directory and cd into that directory.

第一步是创建一个项目。 转到您的控制台或命令行，并创建一个新的目录和cd到该目录中。

We need a package.json file before we can install any dependencies. Let's create that as well.

在安装任何依赖项之前，我们需要一个package.json文件。 让我们也创建它。

The -y flag will answer yes to all questions and create a package.json file with the default options. Now we can install our dependencies.

该-y标志将是回答所有问题并创建package.json默认选项文件。 现在我们可以安装依赖项。

2.安装依赖项 (2. Install dependencies)

We are going to need Parceljs and Babel plugins as dev dependencies along with React packages.

我们将需要Parceljs和Babel插件作为开发依赖以及React软件包。

These are all the dependencies we need to get started with a React project.

这些都是我们开始使用React项目所需的所有依赖项。

3.圣经配置和脚本 (3. Bable config and scripts)

Those babel plugins will need to be added in a config file. Babel explains very well the difference between .babelrc.json, babel.config.json and when to use either of them. I have used .babelrc.json in this project.

这些babel插件将需要添加到配置文件中。 Babel 很好地解释了.babelrc.json ， babel.config.json以及何时使用它们之间的区别。 我在此项目中使用了.babelrc.json 。

At this stage, your folder structure should look something like this.

在此阶段，您的文件夹结构应如下所示。

I’ve already added the babel config file and added the presets.

我已经添加了babel配置文件并添加了预设。

Next, we need to add a start script in package.json.

接下来，我们需要在package.json添加一个启动脚本。

We need to tell Parcel the file it would need to render. The --open flag tells Parcel to open localhost in the default browser on your system. If you don't need Parcel to do this, leave this flag out. You can still open localhost:1234 in your browser of choice. The default port Parcel uses is 1234.

我们需要告诉Parcel需要渲染的文件。 --open标志告诉Parcel在系统上的默认浏览器中打开localhost。 如果您不需要Parcel进行此操作，请忽略此标志。 您仍然可以在选择的浏览器中打开localhost:1234 。 Parcel使用的默认端口是1234 。

4.编写代码 (4. Write code)

Although we created the start script, we don’t have an HTML file nor have we written any React code. Let’s do that now. First, we will create the HTML file, write some React code in App.js and then render the component to the DOM in the entry file index.js.

尽管创建了启动脚本，但是我们没有HTML文件，也没有编写任何React代码。 现在开始吧。 首先，我们将创建HTML文件，在App.js编写一些React代码，然后在入口文件index.js中将组件呈现为DOM。

Here is a look at the folder structure after adding the code files. Except for the HTML file, I kept the other code files in the src folder:

这是添加代码文件后的文件夹结构。 除了HTML文件，我将其他代码文件保留在src文件夹中：

5.启动包裹 (5. Start Parcel)

We already wrote the start script in the second step. Let’s run the project.

我们已经在第二步中编写了启动脚本。 让我们运行项目。

If you put the --open flag in the start script, then it should have opened in the default browser for your system. Otherwise, just open a browser of your choice and go to localhost:1234.

如果将--open标志放在启动脚本中，则它应该已在系统的默认浏览器中打开。 否则，只需打开您选择的浏览器，然后转到localhost:1234 。

结语 (Wrapping up)

Even without create-react-app or the Parcel equivalent, create-react-app-parcel, you can make a minimal React app. If your project needs more complexity, more libraries, or a different folder structure, you can add that to the existing code.

即使没有create-react-app或与Parcel等价的create-react-app-parcel，您也可以制作最小的React应用。 如果您的项目需要更多的复杂性，更多的库或其他文件夹结构，则可以将其添加到现有代码中。

If you’ve always used Webpack, give Parcel a try. It is super quick to set up and doesn’t need many configurations.

如果您一直使用Webpack，请尝试使用Parcel。 设置超级快捷，不需要很多配置。

Originally published on my blog.

最初发布在 我的博客上 。

翻译自: https://levelup.gitconnected.com/how-to-create-a-minimal-react-and-parcel-app-in-5-steps-2806fa09a371

parcel react