Chapter04 Setting Up a React Workflow

17 Let’s Create a React App

FastAPI+React全栈开发17 让我们创建一个React应用

As I mentioned earlier, create-react-app takes away much of the heavy work when starting a project, and we will be using it throughout this book. However, bear in mind that there are other ways to set up React, for instance, you can include it through a CDN just like plain old jQuery if you want to go old-school!

正如我之前提到的，create-react-app在开始一个项目时省去了很多繁重的工作，我们将在本书中使用它。但是，请记住，还有其他方法可以设置React，例如，如果您想要老式的jQuery，您可以通过CDN将其包含在内!

Let’s create a simple app that we will be building upon in this introduction. Grab a folder, mine i called chapter4, cd into it, and from your Terminal of choice type in the following.

让我们创建一个简单的应用程序，我们将在此基础上进行构建。找到一个文件夹，我的名为chapter4, cd进去，然后从你选择的终端输入下面的内容。

npx create-react-app cars

Now atch the magic happen before your eyes! Npx is a tool that is included with the latest versions of npm, ant it allows us to run executable scripts without the need to install them on your machine. Please allow the process to finish. This can take a while and the output might be cryptic, but eventually, we will have a properly initiated React project ready to be developed.

现在看魔术发生在你眼前!Npx是最新版本的npm中包含的一个工具，它允许我们运行可执行脚本，而无需在您的机器上安装它们。请允许该过程完成。这可能需要一段时间，输出可能是模糊的，但最终，我们将有一个适当启动的React项目准备开发。

The terminal will inform you that you can run several commands, but at this point, we will follow the suggestion ant change the directory into the newly created cars directory (because that is what we called our project when we ran create-react-app) and run the following command.

终端将提示您可以运行几个命令，但此时，我们将按照建议将目录更改为新创建的cars目录(因为在运行create-react-app时，我们将项目命名为cars目录)并运行以下命令。

npm start

You will be greeted by a gray screen with a slowly rotating blue React logo. Success! However, behind this dead-simple page, there is tons of code, and we can examine this generated code by looking inside the cars folder that the good create-react-app robot (I always imagined it as a robot) built for us.

您将看到一个灰色的屏幕，上面有一个缓慢旋转的蓝色React徽标。成功!然而，在这个极其简单的页面背后，有大量的代码，我们可以通过查看为我们构建的优秀的create-react-app机器人(我总是把它想象成一个机器人)的cars文件夹来检查这些生成的代码。

The is a node_modules directory that, like in all Node.js projects, contains all the project dependencies, and there are lots of them! You will not need to touch this folder except in extreme debugging operations, so let’s move on to the next one. In the Public folder, there are a couple of generic files that we will soon remove, such as the PNG logs and the favicon.ico file, but there is also an extremely important HTML file - the index.html. This bar-bones file contains a div, with the id of the root and this div is the place where React will put our whole application.

它是一个node_modules目录，像所有Node.js项目一样，包含了所有的项目依赖项，而且有很多!除了极端的调试操作外，您不需要碰这个文件夹，所以让我们继续下一个。在Public文件夹中，有几个通用文件，我们很快就会删除，比如PNG日志和favicon.ico文件，但还有一个极其重要的HTML文件——index.html。这个条形文件包含一个div，它的id是根，这个div是React放置整个应用程序的地方。

Moving on to the src directory, this is where we will be doning all of our work. The App.js file that represents our entire application, all the components, menus, headers and footers, lists, and controls, will be hosted on this file, which, in turn, will be rendered in our single div with the id of the root in the HTML file. This monstrous complexity is necessary for the flexibility and capabilities that React will be able to provide us while developing, in just a few more steps.

转到src目录，我们将在这里完成所有的工作。代表我们整个应用程序的App.js文件，包括所有组件、菜单、页眉和页脚、列表和控件，都将托管在这个文件上，而这个文件又将呈现在我们的一个div中，它的id是HTML文件中的根目录。这种巨大的复杂性对于React在开发过程中能够提供给我们的灵活性和功能是必要的，只需要几个步骤。

Since I will not delve much into the styling of our React apps in this book, I want to get it out of the way as quickly as possible and in the easiest way possible in my opinion. React enables us to style applications in a myriad of ways, you can use classic CSS style sheets or SASS, you can opt for JavaScript-style objects, and there are very modern and weird but efficient solutions such as Styled Components. Additionally, all of the major virual frameworks have a React version - Material UI, Bootstrap, and Semantic UI - you name it. I will be using Tailwind CSS, which has an atypical approach that I like, and I feel that it doesn’t get in they way too much. I found Tailwind CSS excellent for defining basic, simple styles that make the page look simple and clean, while it is perfectly good for achieving pixel perfect designs from Figma or Adobe XD files if needed.

因为我不会在本书中深入探讨React应用程序的样式，所以我想以我认为最简单的方式尽快解决这个问题。React使我们能够以无数种方式为应用程序设计样式，您可以使用经典的CSS样式表或SASS，您可以选择javascript样式的对象，并且有非常现代和奇怪但有效的解决方案，例如Styled Components。此外，所有主要的虚拟框架都有一个React版本——Material UI、Bootstrap和Semantic UI——你能想到的都有。我将使用Tailwind CSS，它有一种我喜欢的非典型方法，我觉得它不会在他们的方式太多。我发现Tailwind CSS非常适合定义基本的、简单的样式，使页面看起来简单而干净，而如果需要的话，它非常适合从Figma或Adobe XD文件中实现像素完美的设计。

Tailwind CSS and Installation

Essentially, Tainwind CSS is a utility-first framework that translates CSS into a bunch of classes that can be used directly in the markup and enable us to achieve complex designs. Just by adding classes to our HTML elements, we will be able to create completely styled documents. Check it out on their excellent website at https://tailwindcss.com/ and get acquainted with it, as we will be using it for all our React-styling needs.

从本质上讲，Tailwind CSS是一个实用优先的框架，它将CSS转换成一堆可以直接在标记中使用的类，使我们能够实现复杂的设计。只要在HTML元素中添加类，就可以创建完全有样式的文档。在他们优秀的网站https://tailwindcss.com/上查看并熟悉它，因为我们将使用它来满足我们所有的react样式需求。

To install the Tailwind CSS framework in our cars project, we will follow the procedure from https://tailwindcss.com/docs/guides/create-react-app. Follow these steps.

要在我们的汽车项目中安装Tailwind CSS框架，我们将遵循https://tailwindcss.com/docs/guides/create-react-app上的步骤。遵循以下步骤。

First, we need to install the packages using npm. Stop your server with Ctrl+C and run the following.

首先，我们需要使用npm安装这些包。使用Ctrl+C停止服务器，然后运行以下命令。

npm install -D tailwindcss
npx tailwindcss init

Now, we need to tell Tailwind where to look for files. Open the tailwind.config.js file and make sure it contains the following.

现在，我们要告诉顺风公司去哪里找文件。打开tailwind.config.js文件，确保它包含以下内容。

/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./src/**/*.{js,jsx,ts,tsx}",],theme: {extend: {},},plugins: [],
}

Finally, edit the index.css file in your src folder, delete everything - the styles that powered our rotating log page - and just leave the following.

最后，编辑src文件夹中的index.css文件，删除所有的内容——支持我们旋转日志页面的样式——只留下以下内容。

@tailwind base;
@tailwind components;
@tailwind utilities;

Edit the App.js file, clear everything and just leave the following.

编辑App.js文件，清除所有内容，只留下以下内容。

function App() {return (<div className="App"><h1 className="bg-slate-500 text-white text-center">This is a Tailwind styled site!</h1></div>);
}export default App;

Don’t worry about the weird className stuff, this is JSX, React’s language for creating HTML, but take a look at the classes (they are classes, despite the naming). The first one tells Tailwind to apply a background of slate-500 (it’s a color) and the text-white and text-center classes are pretty self-explanatory. You will notice that Visual Stutio Code does some nice autocompletion stuff as soon as you type in the first quote. Phew! We have a basic React + Tailwind setup. Now let’s move on and see whether it was worth it. If you want to practice Tailwind CSS a bit, try creating a full-height page with some creepy dashed borders! Next, we will tackle the most fundamental parts of React: JSX. This is the language that React uses to create the HTML and the components, the building blocks that will eventually compose our application.

不要担心奇怪的className之类的东西，这是JSX, React用来创建HTML的语言，但是看看这些类(它们就是类，尽管命名)。第一个代码告诉Tailwind应用slate-500(这是一种颜色)作为背景，text-white和text-center类是不言自明的。你会注意到Visual studio Code在你输入第一个引号时做了一些很好的自动补全功能。唷!我们有一个基本的React + Tailwind设置。现在让我们继续，看看这是否值得。如果你想练习一下顺风CSS，试着用一些令人毛骨悚然的虚线边框创建一个全高的页面!接下来，我们将处理React: JSX的最基本部分。这是React用来创建HTML和组件的语言，这些组件是最终组成应用程序的构建块。