开发react用什么软件

React (or any other front-end framework) is an extremely powerful tool to master. When it comes to building front-end interfaces, React is hands down a huge time-saver for development teams and individuals.

React(或任何其他前端框架)是一个非常强大的工具。 在构建前端接口时，React为开发团队和个人节省了大量时间。

npm packages are paramount when it comes to developer productivity and happiness. Why spend weeks reinventing the wheel when you can save timeChances are high someone has already solved the problem you’re facing with an npm package.

对于开发人员的生产力和幸福感，npm软件包至关重要。 为了节省时间，为什么要花数周的时间重新设计轮子很有可能有人已经使用npm软件包解决了您面临的问题。

Without further ado, here’s a list of packages I believe every React developer should know. These packages are big time-savers — use them when you can, and often!

事不宜迟，这里是我相信每个React开发人员都应该知道的软件包列表。 这些软件包可节省大量时间，请经常使用它们！

1. React测试库 (1. React Testing Library)

The React Testing Library is a lightweight solution for testing React components. The library provides light utility functions on top of and .

React Testing库是用于测试React组件的轻量级解决方案。 该库在和之上提供了轻量级的实用程序功能。

安装 (Installation)

This module is distributed via npm packages.

该模块通过npm软件包分发。

The library has listings for and — make sure you have them both installed.

该库包含有和 列表-确保同时安装了它们。

快速示例 (Quick example)

Here’s a React component that displays a message based on its internal state. You can toggle the message on and off.

这是一个React组件，它根据其内部状态显示一条消息。 您可以打开和关闭消息。

And here’s how you can test the React component with .

这是您可以使用测试 React组件的方法。

Check out the official documentation for more complex examples.

查看官方文档以获取更复杂的示例。

2.成帧器运动 (2. Framer Motion)

Framer Motion is a production-ready motion library for React. The motions and animations are powered by the Framer library.

Framer Motion是React的可量产的运动库。 动作和动画由Framer库提供动力。

Framer Motion includes the following:

成帧器运动包括以下内容：

• Spring animations

  Spring动画

• Simple keyframes syntax

  简单的关键帧语法

• Gestures (drag/tap/hover)

  手势(拖动/点击/悬停)

• Layout and shared layout animations

  布局和共享布局动画

• SVG paths

  SVG路径

• Exit animations

  退出动画

• Server-side rendering

  服务器端渲染

• Variants for orchestrating animations across components

  跨组件编排动画的变体

• CSS variables

  CSS变量

Install it via Yarn:

通过Yarn安装：

And here’s how you use Framer Motion inside your React components.

这就是在React组件中使用Framer Motion的方法。

If you’re curious for more examples, check out the article I wrote earlier about Framer Motion. You can also check out more examples for inspiration.

如果您想了解更多示例， 请查看我之前写的有关Framer Motion的文章 。 您也可以查看更多示例以获取灵感。

Read the documentation for guides and a full API reference.

阅读文档以获取指南和完整的API参考。

3.样式化的组件 (3. styled-components)

styled-components allows you to write actual CSS code to style your React components. It also removes the mapping between components and styles. Using components as a low-level styling construct could not be easier.

styled-components允许您编写实际CSS代码来设置React组件的样式。 它还删除了组件和样式之间的映射。 使用组件作为低级样式构造并不容易。

快速示例 (Quick example)

Here’s a React component styled with the styled-components library.

这是一个用styled-components库样式化的React组件。

And what you’ll see in your browser:

以及您将在浏览器中看到的内容：

Utilizing tagged template literals (a recent addition to JavaScript) and the power of CSS, we can write the following code.

利用带标签的模板文字 (JavaScript的最新功能)和CSS的强大功能 ，我们可以编写以下代码。

Alternatively, you may use style objects. This allows for easy porting of CSS from inline styles, while still supporting the more advanced styled-components capabilities like component selectors and media queries.

或者，您可以使用样式对象 。 这样可以轻松地从内联样式中移植CSS，同时仍支持组件选择器和媒体查询等更高级的样式化组件功能。

Equivalent to:

相当于：

See the documentation at styled-components.com/docs for more information about using styled-components.

有关使用样式化组件的更多信息，请参见styled-components.com/docs上的文档。

4.柏树 (4. Cypress)

Cypress is a fast, easy, and reliable testing library for anything that runs in a browser. Cypress solves the key pain points developers and QA engineers face when testing modern applications.

赛普拉斯是一个快速，简便，可靠的测试库，适用于在浏览器中运行的所有程序。 赛普拉斯解决了开发人员和质量保证工程师在测试现代应用程序时面临的关键难题。

Cypress makes it possible to:

赛普拉斯可以：

• Set up tests

  设置测试

• Write tests

  编写测试

• Run tests

  运行测试

• Debug tests

  调试测试

Cypress is most often compared to Selenium. However, Cypress is both fundamentally and architecturally different.

赛普拉斯通常与Selenium相比。 但是，赛普拉斯在根本上和体系结构上都是不同的。

正在安装 (Installing)

Install Cypress for Mac, Linux, or Windows, then get started.

安装适用于Mac，Linux或Windows的Cypress，然后开始使用 。

添加测试文件 (Add a test file)

Assuming you’ve successfully installed the Test Runner and opened the Cypress app, now it’s time to write your first test. You’re going to:

假设您已经成功安装了Test Runner并打开了Cypress应用程序 ，那么现在该编写第一个测试了。 您将要：

1. Create a file

   创建一个文件

2. Watch Cypress update our list of specs

   观看赛普拉斯更新我们的规格列表

3. Launch the Cypress Test Runner

   启动赛普拉斯测试运行器

Let’s create a new file in the folder that was created for us:

让我们在为我们创建的文件夹中创建一个新文件：

Once we’ve created that file, we should see the Cypress Test Runner immediately display it in the list of integration tests.

创建该文件后，我们应该看到Cypress Test Runner立即将其显示在集成测试列表中。

Cypress monitors your spec files for any changes and automatically displays any changes.

赛普拉斯会监视您的规格文件是否有任何更改，并自动显示任何更改。

Even though you haven’t written any tests yet — that’s okay — let’s click on and watch Cypress launch your browser.

即使您尚未编写任何测试(没关系)，也请单击并观察Cypress启动浏览器。

We are now officially in the Cypress Test Runner. This is where you will spend the majority of your time testing.

我们现已正式加入Cypress Test Runner 。 在这里，您将花费大部分时间进行测试。

写你的第一个测试 (Write your first test)

Now it’s time to write your first test. You’re going to:

现在是时候编写您的第一个测试了。 您将要：

1. Write your first passing test

   编写您的第一个及格测试

2. Write your first failing test

   编写您的第一个失败的测试

3. Watch Cypress reload in real time

   实时观看赛普拉斯重新加载

As you continue to save your new test file, you’ll see the browser auto-reloading in real time.

在继续保存新的测试文件时，您会看到浏览器实时自动重新加载。

Open up your favorite IDE and add the code below to your test file.

打开您喜欢的IDE，然后将以下代码添加到测试文件中。

Once you save this file, you should see the browser reload.

保存此文件后，您应该会看到浏览器重新加载。

Although it doesn’t do anything useful, this is your first passing test! /p>

尽管它没有任何用处，但这是您的第一个通过测试！

Over in the Command Log, you’ll see Cypress display the suite, the test, and your first assertion (which should be passing in green).

在“ 命令日志”中 ，您会看到Cypress显示套件，测试和您的第一个断言(应该以绿色传递)。

Check out the official Cypress documentation for an in-depth dive.

请查阅赛普拉斯官方文档以进行深入了解。

5.更漂亮 (5. Prettier)

Pre