[7天學會 ReactJS] Day3. React Basic
這篇會教大家怎麼製作第一個基本的元件,React 的基本單位為元件(component),每個元件可以包含無數個元件,可以依照個人的需求去組合跟拆解,積木的概念。

Component
一個基本的React元件必須先產生一個 js 檔案,例如 Hello.js 接著如以下方式撰寫。
import React from 'react';export default class Hello extends React.Component {
render() {
return (
<div>Hello World!</div>
);
}
}
最上方必須先把 React 元件載入,接著定義的類別必須要繼承React.Component,類別裡面會有一個方法叫作 render,最後別忘了把我們剛做好的類別 export 出去。
JSX
在撰寫React的時候我們通常會使用JSX來提升效率,JSX是什麼呢?
在上面的範例程式裏面我們在javascript 裏面寫了一段 JSX 回傳<div>Hello World!</div>出去,而這段程式碼最終就會轉譯成為以下。
React.createElement(
"div",
null,
"Hello World!"
);JSX 並不是一種全新的語法,而是一種類似 XML 的表示方式,最後在轉換為js的這種方式來幫助我們方便輕鬆的撰寫 React。
JSX基本語法規則
在 JSX 內我們可以用大括號來放入 javascript 表達式,例如以下的程式我們把文字抽出來當成是一個常數傳入。JSX 的大括號有一些規則要遵守,裏面不能夠寫 if / for 語句,也不能定義變數或是常數,而且要在一個表達式內把所有想做的事情寫進去。
import React from 'react';export default class Hello extends React.Component {
render() {
const text = 'Hello World!';
return (
<div>{text}</div>
);
}
}
if 表達式怎麼做到
假設我們想要讓一個文字會因為變數開啟而關閉我們就可以在 JSX 裏面這樣輸入
import React from 'react';export default class Hello extends React.Component {
render() {
const isSuccess = false;
const successText = 'Hello World!';
const errorText = 'Oh , here has some error'
return (
<div>{ isSuccess ? successText : errorText}</div>
);
}
}
重複 render
我們也可以把數個 JSX 包進一個陣列當中, React 就可以幫我們依序渲染在畫面上。這邊要記住的就是,如果我們用陣列的方式去渲染 JSX ,那每個在裏面的 JSX 必須要給他一個 key。
import React from 'react';export default class Hello extends React.Component {
render() {
const todoList = [
<li key="1">buy apple</li>,
<li key="2">buy pen</li>,
];
return (
<div>{todoList}</div>
);
}
}
再進階一點我們可以用 javascript 的 map 來重複渲染。
import React from 'react';export default class Hello extends React.Component {
render() {
const todoList = [
'buy a apple',
'buy a pen',
];
return (
<div>
{
todoList.map((text, index) => <li key={index}>{text}</li>)
}
</div>
);
}
}
inline style
如果我們要在在剛剛做好的元件修改樣式,我們可以使用 inline style 的方式來做修改,我們先來實作看看吧,假設我們想要讓字型變大成 30px 可以輸入以下,這邊要注意要用駝峰式命名來撰寫 CSS,例如我們想要修改背景顏色就要寫成 backgroundColor: '#333'
<div style={{fontSize: 30}}>Hello World!</div>className
假設我們要讓JSX套用我們已經寫好的 CSS 樣式檔案我們可以修改 inline style 變成 className 的方式來達到
...
import './mycss.css'
...<div className="title">Hello World!</div>
click Event
假設我們想要監聽一個 click 事件,我們可以修改JSX 為以下
<div onClick={() => alert('Hi')}>Hello World!</div>state
在 ReactJs 裡面,每個元件都有他自己的狀態,我們稱作為 state , 當 State 變動的時候我們可以呼叫一個 setState 方法來通知 React 更新畫面。
在下面的範例我們先設定一個 state 並且在畫面上呼叫他
import React, { Component } from 'react';export default class Content extends Component {
state = {
count: 0
}
render() {
return (
<div className="content">
<h1>{this.state.count}</h1>
<button>add count</button>
</div>
);
}
}
setState
當我們想要變更 state 數值的時候就要透過 setState 把我們新的數值傳進去。
下面範例是滑鼠點下按鈕之後 更新state 數值。
import React, { Component } from 'react';export default class Content extends Component {
state = {
count: 0
}
addCount = () => {
const newCount = this.state.count += 1;
this.setState({ count: newCount });
}
render() {
return (
<div className="content">
<h1>{this.state.count}</h1>
<button onClick={this.addCount}>add count</button>
</div>
);
}
}
完成之後就會像下面的動畫一樣

