reactjs快速如梦_帮助您理解和创建ReactJS应用的快速指南

reactjs快速如梦

此帖子分为2部分 (This Post is divided into 2 parts)

The First Part demonstrates how to create a simple React app using ‘create-react-app’ CLI and explains the project structure.第一部分演示了如何使用“ create-react-app” CLI创建简单的React应用，并说明了项目结构。
The Second Part explains an existing code that I have posted in Github. This code demonstrates the use of components, communication between components, making HTTP calls and React Bootstrap (bootstrap which is written for React).第二部分介绍了我在Github中发布的现有代码。该代码演示了组件的使用，组件之间的通信，进行HTTP调用以及React Bootstrap(为React编写的Bootstrap)。

第1部分 (Part 1)

如果尚未安装NodeJS，请安装 (Install NodeJS if not already present)

NodeJS is needed since the Libraries Required for React are downloaded using node package manager ( npm ). Refer to https://nodejs.org/en/ to install NodeJS.

需要NodeJS，因为使用节点包管理器(npm)下载了React所需的库。请参阅https://nodejs.org/en/安装NodeJS。

安装create-react-app节点软件包 (Install create-react-app Node Package)

create-react-app node package helps to set up a React project. Install create-react-app node package globally using the following command.

create-react-app节点包有助于建立一个React项目。使用以下命令全局安装create-react-app节点程序包。

npm install -g create-react-app

创建项目 (Create The Project)

The project can be created using create-react-app. Use the following command to create the project.

可以使用create-react-app创建项目。使用以下命令创建项目。

npx create-react-app first-react-app

first-react-app is the name of the application. The above command creates a folder called first-react-app which is the project folder. In order to test if everything has been set up properly, go into the project folder and start the application using the following command.

first-react-app是应用程序的名称。上面的命令创建一个名为first-react-app的文件夹，它是项目文件夹。为了测试是否一切都已正确设置，请进入项目文件夹并使用以下命令启动应用程序。

cd first-react-app
npm start

Go to your browser and go the following URL localhost:3000You should be able to see that your application is running. The Application will look like this in your browser:

转到浏览器并转到以下URL localhost：3000，您应该能够看到您的应用程序正在运行。该应用程序在您的浏览器中将如下所示：

基本文件夹结构介绍 (Basic Folder Structure Explained)

When you created the project, you would have noticed that it created a bunch of files. Here I will list out some of the important files and folders that you should be aware of .

创建项目时，您会注意到它创建了许多文件。在这里，我将列出您应该注意的一些重要文件和文件夹。

package.json: This File has the list of node dependencies which are needed.

package.json：此文件包含所需的节点依赖项列表。
public/index.html: When the application starts this is the first page that is loaded. This will be the only html file in the entire application since React is generally Written using JSX which I will cover later. Also, this file has a line of code <div id=”root”></div>. This line is very significant since all the application components are loaded into this div.

public / index.html：应用程序启动时，这是加载的第一页。这是整个应用程序中唯一的html文件，因为React通常是使用JSX编写的，我将在稍后介绍。此外，该文件还有一行代码<div id =” root”> </ div> 。这条线是非常显著，因为所有的应用组件loade d扎成这个div。
src/index.js: This is the javascript file corresponding to index.html. This file has the following line of code which is very significant. ReactDOM.render(<App />, document.getElementById(‘root’));

src / index.js ：这是与index.html对应的javascript文件。该文件包含以下非常重要的代码行。 ReactDOM.render(<App />，document.getElementById('root'));
The above line of code is telling that App Component ( will cover App Component soon) has to be loaded into an html element with id root. This is nothing but the div element present in index.html.

上面的代码行告诉我们，必须将App Component(即将覆盖App Component)加载到id为root的html元素中。这只是index.html中存在的div元素 。
src/index.css: The CSS file corresponding to index.js.

src / index.css ：与index.js对应CSS文件。
src/App.js : This is the file for App Component. App Component is the main component in React which acts as a container for all other components.

src / App.js ：这是应用组件的文件。 App Component是React中的主要组件，它充当所有其他组件的容器。
src/App.css : This is the CSS file corresponding to App Component

src / App.css ：这是与应用程序组件相对应CSS文件
build: This is the folder where the built files are stored. React Apps can be developed using either JSX, or normal JavaScript itself, but using JSX definitely makes things easier to code for the developer :). But browsers do not understand JSX. So JSX needs to be converted into javascript before deploying. These converted files are stored in the build folder after bundling and minification. In order to see the build folder Run the following command

build：这是存储构建文件的文件夹。可以使用JSX或常规JavaScript本身来开发React Apps，但是使用JSX无疑使开发人员更容易编写代码：)。但是浏览器不了解JSX。因此，在部署之前，需要将JSX转换为javascript。捆绑和缩小后，这些转换后的文件将存储在build文件夹中。为了查看构建文件夹，请运行以下命令

npm run build

创建组件 (Creating Components)

A Component in React does a specific functionality. An Application is nothing but a collection of components. Each component can have multiple child components and the components can communicate with each other.

React中的组件具有特定功能。应用程序不过是组件的集合。每个组件可以具有多个子组件，并且这些组件可以相互通信。

Let's create a React Component now.

现在创建一个React组件。

Inside src folder create a file called as FirstComponent.js and copy the following code into FirstComponent.js.

在src文件夹中，创建一个名为FirstComponent.js的文件，并将以下代码复制到FirstComponent.js中。

import React, {Component} from 'react';export default class FirstComponent extends Component {constructor(props) {super(props)}render() {const element = (<div>Text from Element</div>)return (<div className="comptext"><h3>First Component</h3>{this.props.displaytext}{element}</div>)}
}

The Component name is FirstComponent which is denoted by the file name as well as in the statement export default class FirstComponent extends Component

组件名称是FirstComponent ，它由文件名以及在语句export default class FirstComponent extends Component
The props attribute in the constructor will contain all the parameters which are passed as input to this component.

构造函数中的props属性将包含所有作为输入传递到此组件的参数。
render(): The return value of this function is rendered ( displayed ) on the screen. Whenever the render() function is called the Screen is rerendered. This is generally done automatically by the application. The code which looks very similar to html in this function is nothing but JSX.

render()：此函数的返回值在屏幕上呈现(显示)。每当调用render()函数时，都会重新渲染屏幕。通常，这是由应用程序自动完成的。在此函数中看起来与html非常相似的代码不过是JSX。

JSX (JSX)

JSX looks very similar to HTML but has the full power of javascript. Here I will Explain the JSX code and what it is trying to do.

JSX看起来非常类似于HTML，但是具有javascript的全部功能。在这里，我将解释JSX代码及其作用。

render() {const element = (<div>Text from Element</div>)return (<div className="comptext"><h3>First Component</h3>{this.props.displaytext}{element}</div>)}

The first line const element = (<div>Text from Element</div>) Creates a div element and assigns it to a constant called element. This peculiar Syntax that you see is nothing but JSX.

第一行const element = (<div>Text from Element</div>)创建一个div元素，并将其分配给一个称为element的常量。这种奇特的语法，你看到的是荷兰国际集团使者诺斯但JSX。

Inside the Return statement, you see the following code syntax.

在Return语句内，您将看到以下代码语法。

<div className="comptext"><h3>First Component</h3>{this.props.displaytext}{element}
</div>

Here className is used to point to a CSS class. <h3>First Component</h3> is just normal html Syntax. {this.props.displaytext} is used to access an attribute called as displaytext from props ( so displaytext is passed as an input whenever this component is called ). Here displaytext is just a custom name that I have Given. {element} is the constant which was created, which in turn contains the div element.

在这里， className用于指向CSS类。 <h3>First Component</h3>只是普通的html语法。 {this.props.displaytext}用于访问来自props的称为displaytext的属性(因此，只要调用此组件， {this.props.displaytext} displaytext作为输入传递)。这里displaytext只是我给定的一个自定义名称。 {element}是创建的常量，而常量又包含div元素。

使用组件 (Using the Component)

FirstComponent has been created but is not being used anywhere yet. Let's add FirstComponent to App Component. Here is the modified code for App.js

FirstComponent已创建，但尚未在任何地方使用。让我们将FirstComponent添加到App Component中。这是App.js的修改后的代码

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import FirstComponent from './FirstComponent'
class App extends Component {render() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><h1 className="App-title">Welcome to React</h1></header><p className="App-intro">To get started, edit <code>src/App.js</code> and save to reload.</p><FirstComponent displaytext="First Component Data"/></div>
);}
}
export default App;

FirstComponent needs to be imported into App Component First which is done in the line import FirstComponent from ‘./FirstComponent’

首先需要将FirstComponent导入到App Component First中，这是import FirstComponent from './FirstComponent'中的import FirstComponent from './FirstComponent'行中完成import FirstComponent from './FirstComponent'

Then FirstComponent is added to App Component using the line <FirstComponent displaytext=”First Component Data”/>

然后使用<FirstComponent displaytext=”First Component Data”/> 行将FirstComponent添加到App Component。

Here displaytext is passed as an attribute to the FirstComponent.

这里displaytext作为属性传递给FirstComponent。

Now you can run the Application using the command npm start

现在，您可以使用命令npm start运行该应用npm start

You should see the following result in the browser.

您应该在浏览器中看到以下结果。

恭喜