​​​​​​​帮助您了解和创建ReactJS应用的快速指南

演示了如何使用“create-react-app”CLI创建一个简单的React应用程序并解释项目结构。

安装NodeJS（如果尚未安装）

由于使用节点包管理器（npm）下载了React Required for React，因此需要NodeJS。请参阅https://nodejs.org/en/以安装NodeJS。

安装create-react-app节点包

create-react-app节点包有助于设置React项目。使用以下命令全局安装create react-app节点包。

npm install -g create-react-app

创建项目

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

npx create-react-app first-react-app

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

cd first-react-app npm start

转到您的浏览器并转到以下URL localhost:3000。您应该能够看到您的应用程序正在运行

基本文件夹结构说明

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

1. package.json：此文件包含所需的节点依赖项列表。
2. public / index.html：当应用程序启动时，这是第一个加载的页面。这将是整个应用程序中唯一的html文件，因为React通常使用JSX编写，稍后我会介绍。此外，此文件有一行代码<div id=”root”></div>。此行非常重要，因为所有应用程序组件都已加载到此div中。
3. src / index.js：这是与index.html对应的javascript文件。此文件具有以下代码行，这是非常重要的。ReactDOM.render(<App />, document.getElementById(‘root’));
4. 上面的代码行告诉我们必须将App Component（很快将覆盖App Component）加载到id为root的html元素中。这只是index.html中存在的div元素。
5. src / index.css：与index.js对应的CSS文件。
6. src / App.js：这是App Component 的文件。App Component是React中的主要组件，它充当所有其他组件的容器。
7. src / App.css：这是与App Component 对应的CSS文件
8. build：这是存储构建文件的文件夹。React Apps可以使用JSX或普通的JavaScript本身开发，但使用JSX肯定会让开发人员更容易编写代码:)。但是浏览器并不了解JSX。所以在部署之前需要将JSX转换为javascript。捆绑和缩小后，这些转换后的文件将存储在构建文件夹中。要查看构建文件夹，请运行以下命令npm run build

创建组件

React中的Component具有特定的功能。应用程序只是一组组件。每个组件可以有多个子组件，组件可以相互通信。

我们现在创建一个React组件。

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

<b>import</b> React, {Component} from 'react';

export <b>default</b> <b>class</b> FirstComponent <b>extends</b> Component {

constructor(props) {
    <b>super</b>(props)
    }

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

1. 组件名称是FirstComponent，它由文件名和语句表示export default class FirstComponent extends Component
2. 构造函数中的props属性将包含作为此组件的输入传递的所有参数。
3. render（）：在屏幕上呈现（显示）此函数的返回值。每当调用render（）函数时，屏幕都会被重新渲染。这通常由应用程序自动完成。在这个函数中看起来与html非常相似的代码只不过是JSX。

JSX

JSX看起来非常类似于HTML，但具有javascript的全部功能。在这里，我将解释JSX代码以及它正在尝试做什么。

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

第一行const element = (<div>Text from Element</div>)创建一个div元素并将其赋值给一个常量即被调用元素。你看到的这个特殊的语法只不过是JSX。

在Return语句中，您会看到以下代码语法。

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

这里className用于指向CSS类。<h3>First Component</h3>只是普通的html语法。{this.props.displaytext}用于从props访问名为displaytext的属性（因此无论何时调用此组件，displaytext都将作为输入传递）。这里displaytext只是我给出的一个自定义名称。{element}是创建的常量，它又包含div元素。

使用组件

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

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

需要将FirstComponent导入App Component First，这在行中完成import FirstComponent from ‘./FirstComponent’

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

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

现在，您可以使用下面命令运行应用程序：

npm start

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

恭喜

现在您知道如何创建React应用程序以及如何创建和使用React组件。你也对JSX有点了解:)