​​​​​​​幫助您瞭解和建立ReactJS應用的快速指南

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

使用元件
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;