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

18-10-31 banq
    

演示了如何使用“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中。

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

  1. 组件名称是FirstComponent,它由文件名和语句表示export default class FirstComponent extends Component
  2. 构造函数中的props属性将包含作为此组件的输入传递的所有参数。
  3. 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有点了解:)