Chapter04 Setting Up a React Workflow
16 Summary
FastAPI+React全栈开发16 设置一个React工作流
This title might be a bit awkward, but really, I am going to go over a bit of React since it is a vast topic that deserves a separate book, and there are plenty of very good ones on the market. I listed the reasons for choosing React in the first place, back when we were analyzing our stack in Chapter 1, Web Development and the FARM Stack, so we will not go over it again. Instead, I will try to make a concise and short introduction to React, while pinpointing what I feel are the most important topics and features that you should be aware of in order to be proficient as soon as possible.
这个标题可能有点尴尬，但真的，我要复习一下React，因为它是一个庞大的主题，值得单独的一本书，而且市场上有很多非常好的书。我一开始就列出了选择React的原因，当我们在第1章"Web开发和FARM堆栈"中分析我们的堆栈时，所以我们不会再重复它。相反，我将尝试对React做一个简明扼要的介绍，同时指出我认为您应该了解的最重要的主题和特性，以便尽快精通React。
In this chapter, wee're going to create a very simplle React app, or better, the frontend of an app through which we will showcase the main features and the most salient concepts that will make working with React worth your while. We will begin with the prerequisites and tools (such as Node.js, some Virual Stutio Code extensions, and more). We will also learn how to use the standard command-line tool Create React App for quick starting new applications, and then I will go over the concept of components and the role of JSX, the essence of React.
在本章中，我们将创建一个非常简单的React应用程序，或者更好的是，一个应用程序的前端，通过它我们将展示主要特性和最突出的概念，这些将使React值得你花时间使用。我们将从先决条件和工具(如Node.js，一些virtual studio Code扩展等)开始。我们还将学习如何使用标准的命令行工具Create React App来快速启动新应用程序，然后我将介绍组件的概念和JSX的作用，这是React的本质。
We will design a simple application in terms of components, and we will see how decoupling helps us write modular and maintainable code. We will briefly glance over two of the most important hooks and see how they solve some web development problems that are as ancient as the web itself. Finally, we will deploy our shell app and briefly discuss the deployment possibilities.
我们将根据组件设计一个简单的应用程序，我们将看到解耦如何帮助我们编写模块化和可维护的代码。我们将简要浏览两个最重要的钩子，看看它们是如何解决一些与web本身一样古老的web开发问题的。最后，我们将部署我们的壳应用程序，并简要讨论部署的可能性。
In this chapter, we will cover the following main topics:
- The basic ideas behind React
- Creating React apps and the resulting starter files
- Styling with Tailwind CSS
- Functional components and JSX, the language of React
- Managing state with the useState hook and communicating with APIs using the useEffect hook
- Exploring React Router and other goodies
在本章中，我们将讨论以下主要主题:
- React背后的基本思想
- 创建React应用程序和生成的启动文件
- 样式Tailwind CSS
- React语言的功能组件和JSX
- 使用useState钩子管理状态，并使用useEffect钩子与api通信
- 探索React路由器和其他好东西
By the end of the chapter, you will have created a minimal, yet fully functional React web app, and you will become part of an army of frontend developers who value simple tools to be able to achieve complex functionalities, without being confined within a strict framework.
在本章结束时，你将创建一个最小的，但功能齐全的React web应用程序，你将成为前端开发人员大军的一员，他们重视简单的工具，能够实现复杂的功能，而不受严格框架的限制。
We made it through a short and atypical introduction to the world's most popular user interface library- React.js. I tried to cover the absolute basics and point the reader in a certain direction, rather than trying to elaborate on topics that require esparate chapters or entire books. I have covered the topics that I believe are enough to get started.
我们简要介绍了世界上最流行的用户界面库------React.js。我试图涵盖绝对的基础知识，并为读者指明一个方向，而不是试图详细阐述需要单独章节或整本书的主题。我已经涵盖了我认为足够开始的主题。
We have seen what JSX is and why it is so convenient for developers. We introduced the basic building blocks of React, functional components, and the basic rules that must be followed when designing them. I have introduced two fundamental React Hooks that, when combined, allow you to begin building basic user interfaces, maintain and change state in the components and interact with external APIs.
我们已经看到了JSX是什么，以及为什么它对开发人员如此方便。我们介绍了React的基本构建块、功能组件以及在设计它们时必须遵循的基本规则。我已经介绍了两个基本的React Hooks，当它们结合在一起时，允许你开始构建基本的用户界面，维护和更改组件中的状态，以及与外部api交互。
Finally, I mentioned some of the React libraries that will make your life easier when developing custom applications, they all have excellent documentation and are updated frequently, so covering them in depth would defy the purpose of this chapter.
最后，我提到了一些React库，它们将使您在开发自定义应用程序时更轻松，它们都有优秀的文档，并且经常更新，因此深入讨论它们将违背本章的目的。
In the next chapter, we will use some of this basic knowledge and use React to create a simple but fully functional and dynamic for our application.
在下一章中，我们将使用这些基本知识，并使用React为我们的应用程序创建一个简单但功能齐全的动态应用程序。