[7天學會 ReactJS] Day3. React Basic

陳旭清(Hyman)
Aug 25, 2017 · 6 min read

這篇會教大家怎麼製作第一個基本的元件,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>
);
}
}

完成之後就會像下面的動畫一樣

ReactMaker

react maker

)

陳旭清(Hyman)

Written by

FrontEnd Warrior 👨🏼‍🚀

ReactMaker

react maker

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade