Let’s tackle another topic: React. React is a JavaScript library that we’ll use to build User Interfaces. Everything is going to be split into components for easy maintenance and scalability. What are components? Take a look below. It’s much easier to manage a website when it’s divided into its own individual components. We have the header, nav, section, aside, footer, etc. Components can in-turn contain other components. The section component below contains four article components. All of the components below are in the main component.

让我们解决另一个主题：React。 React是一个JavaScript库，我们将使用它来构建用户界面。 一切都将被拆分为组件，以便于维护和扩展。 什么是成分？ 看看下面。 将网站分为自己的各个部分时，管理网站要容易得多。 我们有header ， nav ， section ， aside ， footer等。组件可以依次包含其他组件。 下面的section组件包含四个文章组件。 以下所有组件都在主要组件中。

You should have basic HTML, CSS, and JavaScript under your belt before you attempt to tackle React. Even though people will say that you have to be an absolute JavaScript ninja to take on React, I tend to disagree with that statement; a basic understanding will suffice. Once you approach a topic that you don’t understand, you can always freshen up on it then. An overall understanding of functional and object-oriented programming is extremely beneficial, however.

在尝试解决React之前，您应该掌握基本HTML，CSS和JavaScript。 尽管人们会说您必须是绝对JavaScript忍者才能接受React，但我倾向于不同意这种说法。 基本的了解就足够了。 一旦您解决了一个您不了解的主题，就可以随时重新了解它。 但是，对功能和面向对象编程的全面理解是非常有益的。

Before you can use React, you must be able to install React. As far as requirements go, make sure that you have the latest version of Node installed on your computer. Head over to http://nodejs.org/ and get the latest (LTS) version. Run through the prompts and you should be set-up. After the installation, you can verify that you have node installed by typing in node -v into your terminal. You’ll also need to verify that npm was installed by typing in npm -v. The node package manager, npm, will be installed with Node. Why do you need npm? Because React is just an npm package. Finally, run npx -v to verify that the npm package runner is installed. This is what we’re going to be using to install React onto our computers.

在使用React之前，您必须能够安装React。 就需求而言，请确保您在计算机上安装了最新版本的Node。 转至http://nodejs.org/并获取最新(LTS)版本。 通过提示运行，您应该已设置。 安装后，可以通过在终端中输入node -v来验证是否已安装节点 。 您还需要验证NPM是由打字NPM -v安装。 节点软件包管理器npm将与Node一起安装。 为什么需要npm？ 因为React只是一个npm包。 最后，运行npx -v验证是否已安装npm软件包运行程序。 这就是我们将用来在计算机上安装React的方式。

You may also want to get the React Developer Tools browser extension to be able to view how your React app is functioning in the browser.

您可能还希望获得React Developer Tools浏览器扩展，以便能够查看React应用在浏览器中的运行方式。

And we’re all set. Open your terminal and navigate to a directory where you would like to create your React app. Run the command:

我们都准备好了。 打开终端并导航到您要在其中创建React应用程序的目录。 运行命令：

c:\youtube>npx create-react-app yt-react

You might have seen the create-react-app command used globally without npx. By using npx, you’re ensuring that create-react-app is kept up to date. By installing it globally, you will have to make sure that you have the latest version each time. So just forget about this paragraph and use npx.

您可能已经看到全局使用了create-react-app命令，而没有npx。 通过使用npx ，可以确保create-react-app保持最新。 通过全局安装它，您必须确保每次都具有最新版本。 因此，只需忽略此段并使用npx即可 。

The yt-react string is the project name; you can name your project whatever you like (as long as you stick to the same naming rules as you would naming a directory on your computer). Once the installation process is complete, cd into the directory and launch it.

yt-react字符串是项目名称； 您可以根据自己的喜好命名项目(只要遵循与在计算机上命名目录相同的命名规则)即可。 一旦安装过程完成，cd进入目录，并启动它。

c:\youtube>cd yt-reactc:\youtube>npm start

The react page on localhost:3000 will automatically open up and you will see the main page.

localhost：3000上的react页面将自动打开，您将看到主页。

The command npm start launches the development server. You will notice in your terminal that the command continues to run. If you close your terminal, you will terminate the development server and your React application will no longer be running. If you want to terminate the development server, press CTRL+C.

命令npm start启动开发服务器。 您会在终端中注意到该命令继续运行。 如果关闭终端，则将终止开发服务器，并且React应用程序将不再运行。 如果要终止开发服务器，请按CTRL + C。

The last step is to open the project in your IDE. I’m using VS Code. Just navigate to the folder and open it. You will see all of the folders and files that were installed. Congratulations. You have everything that you’ll need to progress with the series.

最后一步是在IDE中打开项目。 我正在使用VS Code 。 只需导航到该文件夹​​并打开即可。 您将看到所有已安装的文件夹和文件。 恭喜你 您拥有完成该系列课程所需的一切。

The first folder, node_modules contains all of the required dependencies. Every time a new dependency is required, it’ll go into this folder. The public folder contains a few files. The index.html contains a <div id=”root”> tag, which is where your React application will be rendered into. You’re not going to be doing anything with this file; just know that it exists. This is the file that the user will be provided with.

第一个文件夹node_modules包含所有必需的依赖项。 每次需要新的依赖项时，它将进入该文件夹。 公共文件夹中包含了几个文件。 index.html包含一个<div id =“ root”>标记，这是您的React应用程序将渲染到的标记。 您将不会对该文件做任何事情； 只知道它存在。 这是将向用户提供的文件。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><!--manifest.json provides metadata used when your web app is installed on auser's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/--><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><!--Notice the use of %PUBLIC_URL% in the tags above.It will be replaced with the URL of the `public` folder during the build.Only files inside the `public` folder can be referenced from the HTML.Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" willwork correctly both with client-side routing and a non-root public URL.Learn how to configure a non-root public URL by running `npm run build`.--><title>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><!--This HTML file is a template.If you open it directly in the browser, you will see an empty page.You can add webfonts, meta tags, or analytics to this file.The build step will place the bundled scripts into the <body> tag.To begin the development, run `npm start` or `yarn start`.To create a production bundle, use `npm run build` or `yarn build`.--></body>
</html>

Your developmental process will take place inside of the src directory. The first file that we’re going to look at is src/index.js. That’s the file that loads the components into the <div id=”root”> element.

您的开发过程将在src目录中进行。 我们要查看的第一个文件是src / index.js 。 这是将组件加载到<div id =“ root”>元素中的文件。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

The first two lines import React and ReactDOM. React will need to be imported into all of your React components. ReactDOM is needed just to render the application onto the screen. Moving to line 3, the index.css file is imported from the current directory, which is the src directory. Your React application will now have access to this CSS file.

前两行导入React和ReactDOM。 React将需要导入到您的所有React组件中。 仅需要ReactDOM即可将应用程序呈现到屏幕上。 移至第3行，将从当前目录(即src目录)导入index.css文件。 您的React应用程序现在将可以访问此CSS文件。

body {margin: 0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}code {font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',monospace;
}

On line 4, the component that creates the main page is loaded. The App component is loaded from the App.js file that’s located in the current directory (src/). We’ll look at the App.js file later. For now, just know that the file contains a functional component named App, which is the component that was imported on line 4. If the component was named Car, you would have to import Car from the App.js file.

在第4行，将加载创建主页的组件。 从当前目录( src / )中的App.js文件加载App组件。 稍后我们将查看App.js文件。 现在，只知道文件包含一个名为App的功能组件，这是在第4行上导入的组件。如果该组件名为Car ，则必须从App.js文件导入Car 。

We’ll skip line 4 for now and move to ReactDOM.render(). The first argument is the component that will be rendered. Just think of a this argument like a piece of HTML code for now. You can only have one component there. You can have nested components, but it needs to be surrounded by a wrapper component. For example, we can return a <div> tag. That <div> tag can have internal <div>’s, <h1>’s, etc.

我们现在将跳过第4行，并移至ReactDOM.render()。 第一个参数是将要呈现的组件。 现在就把这个参数想像成一段HTML代码。 那里只能有一个组件。 您可以具有嵌套的组件，但是它必须由包装器组件包围。 例如，我们可以返回一个<div>标签。 该<div>标记可以具有内部<div>，<h1>等。

ReactDOM.render(<div>Hello</div>, ...);

As a matter of fact, if you modified your code and replace the first argument with <div>Hello</div>, you will see that your page still works and will display the Hello string.

实际上，如果您修改了代码并用<div> Hello </ div>替换了第一个参数，您将看到您的页面仍然有效，并显示Hello字符串。

ReactDOM.render(<div>Hello</div>,document.getElementById('root')
);

The second argument, document.getElementById(‘root’), is just plain JavaScript that grabs the element with the id of root. Where is this element located? It’s in the public/index.html file, which is the file we looked at earlier. The file contains one div element: <div id=”root”></div>. This is where the React code will be sent to. If you inspect the element above in your browser, you will notice that the code that we just sent is located inside of the <div id=”root”> tag.

第二个参数document.getElementById('root')只是普通JavaScript，它捕获id为root的元素。 这个元素在哪里？ 它位于public / index.html文件中，这是我们之前查看的文件。 该文件包含一个div元素： <div id =” root”> </ div> 。 这是React代码将被发送到的地方。 如果在浏览器中检查上述元素，您会注意到我们刚刚发送的代码位于<div id =” root”>标记内。

You can revert the changes inside of your src/index.js component to make sure that we’re rendering the App component.

您可以还原src / index.js组件内部的更改，以确保我们正在呈现App组件。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);// ReactDOM.render(div>Hello</div>, document.getElementById('root'));// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Remember, the App component is included on line 4 in our src/index.js file (seen in the code above). When including the App.js file, you do not include the .js extension. Let’s open the App.js file and see what this App component is that’s being included.

请记住， App组件包含在我们的src / index.js文件的第4行中(如上面的代码所示)。 当包含App.js文件时，您不包括.js扩展名。 让我们打开App.js文件，查看其中包含的该App组件。

import React from 'react';
import logo from './logo.svg';
import './App.css';function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);
}export default App;

This is a functional component named App:

这是一个名为App的功能组件：

function App() { … }

Each file will need React imported, which is what you see on line 1. The code on line 2 and 3 imports the logo and the CSS file that’s needed for this specific component. Since we’re just starting out, we want as clean of a slate as possible. Let’s start by deleting the logo import. Since the logo is no longer present, we’ll also need to remove the <img> tag that references it.

每个文件都需要导入React ，这就是您在第1行看到的内容。第2行和第3行的代码将导入该特定组件所需的徽标和CSS文件。 由于我们才刚刚起步，因此我们希望尽可能地清除一切。 让我们从删除徽标导入开始。 由于徽标不再存在，因此我们还需要删除引用该徽标的<img>标签。

import React from 'react';
import './App.css';function App() {return (<div className="App"><header className="App-header"><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);
}export default App;

The code that’s inside of the return() statement might look like HTML, but it’s actually JSX, which is why you need to import React up top. In HTML, to use a CSS class, you would reference it with the class attribute, <div class=”…”>, but in React we have class based components, so class is a reserved keyword. In JSX, you would use className. Let’s continue our cleanup and remove the CSS import up top. We’ll also remove everything inside of the <div> statement.

return()语句内部的代码可能看起来像HTML ，但实际上是JSX ，这就是为什么需要在顶部导入React的原因。 在HTML中，要使用CSS类，可以使用class属性<div class =“…”>进行引用，但是在React中，我们具有基于类的组件 ，因此class是保留关键字。 在JSX中，您将使用className 。 让我们继续清理并从顶部删除CSS导入。 我们还将删除<div>语句中的所有内容。

import React from 'react';function App() {return (<div>Blank Page</div>);
}export default App;

Refresh the page and you’ll see that you’re just displaying the string: Blank Page. You don’t actually have to refresh; React will do this automatically.

刷新页面，您会看到您只是在显示字符串： 空白页。 您实际上不必刷新； React将自动执行此操作。

The last piece of code that we need to look at is the export default App at the bottom of the src/App.js file. It’s basic JavaScript code that allows you to export a component from the page and import it into another page. Without this code, you would not be able to run import App from ‘./App’ in the src/index.js file.

我们需要查看的最后一段代码是src / App.js文件底部的导出默认App 。 它是基本JavaScript代码，可让您从页面导出组件并将其导入到另一个页面。 没有此代码，您将无法从 src / index.js文件中的“ ./App”运行导入应用 。

Each exported component needs to have a return() statement that’s going to return only one element. You cannot return multiple elements; that’s why everything was wrapped with the <div> tag. If you look at the functional component App(), it contains a return statement that returns one JSX element. That JSX element can have other nested elements, but two JSX elements cannot be returned.

每个导出的组件都需要有一个return()语句，该语句将仅返回一个元素。 您不能返回多个元素； 这就是为什么所有内容都用<div>标签包裹的原因。 如果查看功能组件App() ，它包含一个返回一个JSX元素的return语句。 该JSX元素可以具有其他嵌套元素，但是不能返回两个JSX元素。

// Not validreturn (  <div>Hello</div>  <div>Hi</div>);// Validreturn (  <div>    <div>Hello</div>    <div>Hi</div>  </div>);

That wraps it up for this intro. We’ll explore React a little deeper in the next article.

结束于本简介。 在下一篇文章中，我们将更深入地探讨React。

演示地址