【React 新手村】React Component基礎介紹

原文發表於 Medium。

React這個框架最重要的概念就是Component，因此我想由此開始。

為什麼回頭寫這樣的新手內容呢？原因是我看到自己在Notion上面的筆記實在欠整理。再加上，這些都是我還在探索時期寫的筆記（而且是以一個超級小白的觀點），若是可幫助到剛接觸到 React的夥伴，相信也是非常棒的事情。

Components

現代的React頁面是藉由一堆的Function建立而成的（過去也使用Class component，但現在漸漸消失了），在這些Function內會Return一些長得像HTML元件的東西。

一個標準的React component長相大概像下方Code：

function Todo() {
return (
<div className="card">
<h2>TITLE</h2>
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>
);
}
export default Todo;

需要注意的是，命名functional component時習慣將頭文字以大寫表示。然後在Return的內容中必須要有一個主要的父元素，所有的元件都必須包含在那個父元素之下：

//錯誤的return內容
return(
<h1>TITLE</h1>
<button>BUTTON</botton>
)
//兩個分別的元素

//正確的return內容  
return(  
<div>  
<h1>TITLE</h1>  
<button>BUTTON</botton>  
</div>  
)  
//把兩個分別的元素包含在同一個div下，OK!

但是必須要記住，這些並不是真的HTML元素，而是React專屬的，在這些元素標籤的參數寫法上會與HTML有些不同，但React會依照您的需求，在渲染網頁時將真實的HTML DOM放上網頁。

注意：在極少數的情況下，標籤的參數會與Javascript保留字相衝突，而導致必須要改名的狀況。例如class在HTML中可以直接作為標籤的參數，但是在React中，我們必須要將它改成”className”。

注意：在極少數的情況下，標籤的參數會與Javascript保留字相衝突，而導致必須要改名的狀況。例如class在HTML中可以直接作為標籤的參數，但是在React中，我們必須要將它改成”className”。

怎麼使用Component?

若您透過Create-react-app建立開發環境之後，在src資料夾內，通常我們會加入一個叫做”Components”的資料夾，專門存放Components檔案。

在使用create-react-app建構的專案中，所有的DOM的最上層就收束在src資料夾內的app.js中，若我們希望剛剛Todo在網頁中顯示出來，我們在app.js裡面就可以直接import這個Todo component：

import Todo from "./components/Todo";

之後可以直接把Todo作為一個tag放在要渲染的內容之中。

function App() {
return (
<div>
<h1>My Todos</h1>
<Todo />
<Todo />
<Todo />
</div>
);
}
export default App;

上述的例子中在<h1>下方加入三個<Todo/>，因此你可以想成這在渲染時變成：

function App() {
return (
<div>
<h1>My Todos</h1>
<div className="card">
<h2>TITLE</h2>
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>
<div className="card">
<h2>TITLE</h2>
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>
<div className="card">
<h2>TITLE</h2>
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>
</div>
);
}
export default App;

你可能會覺得，那就直接寫就好啦，為啥還要寫一個 Todo component然後import進來，這有什麼意義？

首先，在節省程式碼的角度上這種做法是蠻不錯的，很明顯地使用Todo tag的程式碼簡短非常多。

再者，我們使用Component除了節省程式碼之外，還有一個好處就是可以重複利用。你可以把Component視為一種頁面空架構，當我們輸入不同資料時，就可以用同樣的視覺框架呈現不同的資料內容。

function App() {
return (
<div>
<h1>My Todos</h1>
<Todo content={"No1"} />
<Todo content={"No2"} />
<Todo content={"No3"} />
</div>
);
}
export default App;

看到上面的例子，各位可能覺得奇怪，那些Todo標籤中的content參數是啥，然後為何使用花括號?

其實這個content參數是可以自定義的，可以改名，我也可以同時有很多個字定義參數，這些參數在React我們叫它 “Props”，透過它我們就可以加入不同的資料給Component。

到底什麼是Props，component要怎麼接取資料，請容我喝個水，下篇再寫唷。