---
# System prepended metadata

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

---

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

# 開始編輯 React

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

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

## Hello,React!

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

然後在裡面加上
```javascript=
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

然後在一開始的地方加入
```javascript
import React, {Component} from 'react';
// 從react裡面，引入React與Component
```

然後建立一個class並且繼承Component，如下：
```javascript
class App extends Component {

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

接下來再class裡面加上render的函式，
並且回傳想加入的物件
```javascript=
render() {
    return (
        <h1>This is App component</h1>
    );
}
```
這樣App就會幫我們建構render索回傳的東西
:::warning
注意： render一次只能建構一個物件，
也就是說如果想要建立
```htmlmixed
<h1>Hello</h1>
<h1>React</h1>
```
那就要在最外層用一個物件包起來
像是：
```htmlmixed
<div>
    <h1>Hello</h1>
    <h1>React</h1>
</div>
```
:::
整個看起來像是這樣：
```javascript=
import React, { Component } from 'react';

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

這樣就建立好一個component了

我們趕緊回到index.js
然後在最上面引入這個component
```javascript
import App from './App'
// ./App就是跟index同意曾資料夾底下的App
```

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

## ReactDOM 架構

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

```graphviz
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;
}
```