帮助您了解和创建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。您应该能够看到您的应用程序正在运行

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

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

创建组件
React中的Component具有特定的功能。应用程序只是一组组件。每个组件可以有多个子组件，组件可以相互通信。
我们现在创建一个React组件。
在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>)
    }
}

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

JSX
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>)
    }

第一行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的修改代码

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导入App Component First，这在行中完成import FirstComponent from ‘./FirstComponent’
然后使用该行将FirstComponent添加到App Component<FirstComponent displaytext=”First Component Data”/>
这里displaytext作为属性传递给FirstComponent。
现在，您可以使用下面命令运行应用程序：
npm start
您应该在浏览器中看到结果。

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

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

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