概要
今回は新たにReactを学習し始めたのでその基本をアウトプットしたいと思います。
基本構文
基本は下記が構文になります。
import ReactDOM from "react-dom";
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementalById("root"), // index.htmlタグのidがrootになっていると仮定
);
基本的にはReactDOM.render
を使用してレンダリングを行っていきます。
コンポーネント
Reactにもコンポーネントの概念があります。
コンポーネントは2種類あり、関数コンポーネント
とクラスコンポーネント
があります。
関数コンポーネント
関数として下記のようにコンポーネント化することができます。
export const Message = () => { // コンポーネント名はパスカルケースで記載
return <h1>Hello World!</h1>;
};
import ReactDOM from "react-dom";
import { Message } from "Children";
ReactDOM.render(
<Message />,
document.getElementalById("root"),
);
上記のようにコンポーネントタグをReactDOM.render
に定義することでブラウザにHello World!
がレンダリングされる。
親コンポーネントから子コンポーネントへpropsの受け渡し方
import ReactDOM from "react-dom";
import { Message } from "Children";
ReactDOM.render(
<Message message="Hello World!"/>, // コンポーネントタグにプロパティを渡す
document.getElementalById("root"),
export const Message = (props) => { // 引数にpropsを取り親要素から渡されたプロパティを指定する
return <h1>{props.message}</h1>
};
これでブラウザにHello World!
がレンダリングされます。
stateの定義の仕方
関数コンポーネントでstate
を利用する場合はuseState
を使用します。
import { useState } from "react";
export const Message = () => {
const [message, setMessage] = useState("Hello World!"); // useStateの引数は初期値を入れる
return <h1>{message}</h1>
};
分割代入の第1引数はstateに設定したい任意の変数を入れ、第2引数にはstate(今回はmessageのこと)変更する際に使用する任意の関数を入れる。
そしてuseState()
の引数には初期値を入れる。
stateを更新する場合
例えば、ボタンを押すと表示されるmessageが変わる機能を実装すると仮定すると
import { useState } from "react";
export const Message = () => {
const [message, setMessage] = useState("Hello World!"); // useStateの引数は初期値を入れる
const onClickChangeMessage = () => setMessage("Good Bye"); // 第2引数に設定したsetMessageを利用してstateのmessageを変更する
return(
<> // 複数タグがある場合はひとつのタグで囲わないと行けない
<h1>{message}</h1>
<button onClick={onClickChangeMessage}>ボタン</button> // ボタンを押すとGood Byeに文字列が変わる
</>
)
};
クラスコンポーネント
クラスコンポーネントは先程の関数コンポーネントとは少し違い作成するのは少し面倒。
また下記のように単純ならそこまで面倒ではないが、props
やstate
を使用するとなると
関数コンポーネントよりは複雑になる。
class Message extends React.Component {
render () {
return <h1>Hello World!</h1>
};
};
import ReactDOM from "react-dom";
import { Message } from "Children";
ReactDOM.render(
<Message />,
document.getElementalById("root"),
);
上記のようにすればブラウザにHello World!
がレンダリングされる。
親コンポーネントから子コンポーネントへpropsの受け渡し方
import ReactDOM from "react-dom";
import { Message } from "Children";
ReactDOM.render(
<Message message="Hello World!" />, // 同様にプロパティを設定
document.getElementalById("root"),
);
class Message extends React.Component {
render () {
return <h1>{this.props.message}</h1> //propsの前にthisを付ける
};
};
関数コンポーネントと異なりthis
をつけなければなりません。
stateの定義の仕方
クラスコンポーネントの場合はconstructor
を設定しないといけません
class Message extends React.Component {
// 追加
constructor(props) {
super(props); // super(props)を必ず付ける
this.state = {
message: "Hello World!",
};
};
//
render () {
return <h1>{this.state.message}</h1> //propsの前にthisを付ける
};
};
stateを更新する場合
class Message extends React.Component {
constructor(props) {
super(props); // super(props)を必ず付ける
this.state = {
message: "Hello World!",
};
};
const onClickChangeMessage = () => this.setState({ message: "Good Bye" })
render () {
return <h1 onClick={() => this.setState("Good Bye")}>{this.state.message}</h1> //propsの前にthisを付ける
};
};
クラスコンポーネントではsetState
を使用してstate
を更新する。
関数コンポーネントとクラスコンポーネントの使い分け
以前まではstate
はクラスコンポーネントでしか使用できなかったようだが、
現在はバーションアップして関数コンポーネントでもstate
を利用できるようになったので
簡易的に書ける関数コンポーネントを使用した方が良さそう。
まとめ
基本的なことをまとめましたが、まだまだ序盤なのでもっと応用的な部分も学びポートフォリオをReact化したいです。