---
title: 開始編輯 React
tags: note-page, react-page
---

# 開始編輯 React

首先開啟我們的VS Code，打開我們之前建立的 react 專案

然後把src裡面的檔案全部刪掉!!!
沒錯全部刪掉

## Hello,React!

接下來再src裡面建立一個檔案叫做index.js
這個檔案就是預設的程式入口

然後在裡面加上

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, React!!</h1>,
    document.getElementById('root')
);

第一第二行：引用這兩個我們需要用到的模組
那之後就是呼叫ReactDOM裡面的函式，
第一個參數是想要加的東西
第二個參數是要加到哪裡

以上面的例子來說：
也就是在public/index.html裡面找到id是root裡面加入```<h1>Hello, React!!</h1>```

## 建立 component

接下來再src裡面建立檔案叫做App.js

然後在一開始的地方加入

import React, {Component} from 'react';
// 從react裡面，引入React與Component

然後建立一個class並且繼承Component，如下：

class App extends Component {

}

並且在最後要讓其他檔案可以引用這個class，
因此我們要導出，像是這樣：

export default App

接下來再class裡面加上render的函式，
並且回傳想加入的物件

render() {
    return (
        <h1>This is App component</h1>
    );
}

這樣App就會幫我們建構render索回傳的東西
:::warning
注意： render一次只能建構一個物件，
也就是說如果想要建立

<h1>Hello</h1>
<h1>React</h1>

那就要在最外層用一個物件包起來
像是：

<div>
    <h1>Hello</h1>
    <h1>React</h1>
</div>

:::
整個看起來像是這樣：

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <h1>This is App Component.</h1>
        );
    }
}
export default App;

這樣就建立好一個component了

我們趕緊回到index.js
然後在最上面引入這個component

import App from './App'
// ./App就是跟index同意曾資料夾底下的App

然後把ReactDOM.render的第一個參數改成```<App/>```

## ReactDOM 架構

一般來說，我們會在最頂層建構App，
然後將其他物件交由App渲染

digraph G {
label = "React 架構";
node [shape = record];

App [label = "App"];
C1 [label = "Component1"];
C2 [label = "Component2"];
C3 [label = "Component..."];
C4 [label = "Component..."];

App -> C2;
App -> C1;
C1 -> C3;
C1 -> C4;
}