This article is a continuation of Django and React Full Stack — Django. If you have not read that part or your backend environment is not ready, you can find the article I developed using Django — I shared my notes while developing — here.

本文是Django和React Full Stack(Django)的延续。 如果您尚未阅读该部分，或者您的后端环境尚未准备就绪，则可以在此处找到我使用Django开发的文章(在开发时共享了我的笔记)。

I know it’s a very comprehensive title so I’ll keep it as simple as possible.

我知道这是一个非常全面的标题，所以我将使其尽可能简单。

In this article, we will make a book application from installation to the final product using Django and React. I hope to make a nice and simple introduction-development-product series for a CRUD (Create, Read, Update, Delete) application. I want to share the notes I took and the steps I followed while making an app without getting overwhelmed by a lot of information from both sides (back end and front end).

在本文中，我们将使用Django和React从安装到最终产品的制作一个书本应用程序。 我希望为CRUD(创建，读取，更新，删除)应用程序制作一个简单，漂亮的介绍-开发-产品系列。 我想分享我在制作应用程序时所采取的笔记和所采取的步骤，而又不会因为双方(后端和前端)的大量信息而感到不知所措。

I will try not to dwell on the questions such as what and why, but to explain it purposefully. For every command I use, I will cite since there may be people who do not know, in this way you can quickly get an idea from their documentation pages and return to the article.

我将不去赘述诸如什么以及为什么之类的问题，而是有目的地对其进行解释。 我会引用我使用的每个命令，因为可能有些人不知道，这样您就可以从他们的文档页面中快速了解想法并返回本文。

Django is a Python-based free and open-source web library based on the model-template-view architecture.

Django是一个基于Python的免费开源Web库，它基于model-template-view体系结构。

React is a JavaScript library that allows you to create user interfaces for your web projects on a component basis.

React是一个JavaScript库，允许您基于组件为Web项目创建用户界面。

入门＃1 (Getting started #1)

We established our backend structure with Django, we used our data with HTML. Now it’s time to heat things up a bit. If you still haven’t read that article, you can read it here.We can start by installing our React application in our project.

我们使用Django建立了后端结构，我们使用了HTML数据。 现在是时候加热一下了。 如果您仍未阅读该文章，则可以在此处阅读。我们可以从在项目中安装React应用程序开始。

安装 (Installation)

Inside of our project, run npx create-react-app frontend on the command line. The reason I create a project called Frontend is that I don’t want the files to interfere and appear more understandable. I want the node files and Django files in separate folders so that they are easy to access and edit.

在我们的项目中，在命令行上运行npx create-react-app frontend 。 我创建一个名为Frontend的项目的原因是，我不希望这些文件干扰并且看起来更易于理解。 我希望将节点文件和Django文件放在单独的文件夹中，以便易于访问和编辑。

After installation is done, run cd frontend & npm start commands. While running the project browser will be opened automatically and you’ll see your first react app. If it runs on another port you can see which port react using is on the terminal screen.

安装完成后，运行cd frontend & npm start命令。 在运行项目时，浏览器将自动打开，您将看到您的第一个React应用。 如果它在另一个端口上运行，则可以在终端屏幕上看到使用哪个端口进行React。

我应该知道多少？ (How much should I know?)

If you use React the first time or you’ve never written JavaScript you may have some struggle. If we consider it as JavaScript, not just React: it can be a bit annoying to adapt to an asynchronous language. JavaScript is not a completely top-down language. Do not be surprised if the code you write at the bottom works before you write at the top. It is beautifully described as titles at https://javascript.info/. At least, getting enough information to understand what you read later in the article will make your job easier in the continuation of the article.

如果您是第一次使用React，或者从未编写过JavaScript，则可能会遇到困难。 如果我们将其视为JavaScript，而不仅仅是React：适应异步语言可能会有些烦人。 JavaScript并不是一种完全自上而下的语言。 如果您在底部编写的代码先于顶部编写的代码起作用，请不要感到惊讶。 它在https://javascript.info/上被精美地描述为标题。 至少，获得足够的信息来理解您在本文后面的内容将使您在本文的后续工作中更加轻松。

功能组件 (Functional Components)

To create our interface we’ll use functional components. The reason we prefer functional components is that convenience about readability, renewability, and testing.

为了创建我们的界面，我们将使用功能组件。 我们之所以选择功能组件，是因为在可读性，可更新性和测试方面都非常方便。

I don’t want to dig the difference between class and functional components. Focusing on the pros and cons of them will probably deflect us from our main goal of this article. If you want to focus on these, you may follow the link below.

我不想挖掘类和功能组件之间的区别。 专注于它们的优缺点可能会使我们偏离本文的主要目标。 如果您想专注于这些，可以点击下面的链接。

Function and class components: https://tr.reactjs.org/docs/components-and-props.html

函数和类组件： h ttps：//tr.reactjs.