概要
Reactの学習において、アプリケーションを作成することがより実践的で良いとはよく言われることです。
しかし、基本的な構文を知らずして作ることはできないのでこちらでいくつか動かしてみようと思います。
今回扱うのは簡単なTODOリストを作成する際に使用するような構文、関数を提示していきます。
準備
実際にローカルで動くプロジェクトを作成します。
任意のディレクトリでこちらのコマンドを順番に叩いてください。
// React の開発に必要な基本的な設定を含むプロジェクト構造を作成
$ npx create-react-app hoghogeApp
// 作成したプロジェクトに移動する
$ cd hoghogeApp
// 開発サーバーを起動し、ブラウザで React アプリケーションを開く
$ npm start
または、下記リンクからSandboxを開いて簡易的に動作環境を準備します。
構文/関数を使ってみる
UseState
React のフック(Hooks)の一つで、関数コンポーネント内で状態(state)を持つために使用されます。
これを使うと、関数コンポーネント内で状態の追加や更新が可能になります。(ボタンを使って等)
fuction.jsx
----------------------------------
import { useState } from 'react';
export const function = () => {
const [num, setNum] = useState(22);
return (
<>
<p>{num}</p>
</>
);
};
UseStateに持たせた値を表示することができ、このような表示になります。
UseState x カウントボタンの実装
UseStateで保持している値をボタンで更新することができます。
fuction.jsx
----------------------------------
import { useState } from 'react';
export const function = () => {
const [num, setNum] = useState(22);
const onClickCountUp = () => {
setNum((prev) => prev + 1);
};
return (
<>
<button onClick={onClickCountUp}>カウントアップ</button>
<p>{num}</p>
</>
);
};
ボタンを押した時に、useStateに保持している値に+1をするように実装しています。このような表示になります。
UseEffect
React のフック(Hooks)の一つで、関数コンポーネント内で副作用(side effects)を扱うために使用されます。
useEffectは、コンポーネントがレンダリングされた後に何かを実行したい場合に便利です。
カウントが3の倍数になった場合に顔文字を表示するようにしてみます。
fuction.jsx
----------------------------------
import { useEffect, useState } from "react";
export const function = () => {
const [num, setNum] = useState(22);
const [isShowFace, setIsShowFace] = useState(false);
const onClickCountUp = () => {
setNum((prev) => prev + 1);
};
const onClickToggle = () => {
setIsShowFace(!isShowFace);
};
useEffect(() => {
if (num > 0) {
if (num % 3 === 0) {
isShowFace || setIsShowFace(true);
} else {
isShowFace && setIsShowFace(false);
}
}
}, [num]);
return (
<>
<button onClick={onClickCountUp}>カウントアップ</button>
<p>{num}</p>
<button onClick={onClickToggle}>on/off</button>
{isShowFace && <p>(@_@)</p>}
</>
);
};
このソースコードで、以下のような表示になります。
1枚目:カウント0のため表示なし。
2枚目:カウント3のため表示あり。
styleをjsxの中に記載
cssにstyleを記述していくことが通例ですが、jsxにも記述できます。
jsxにstyleを書くことのメリットとして、同じファイルにソースコードとstyleが書いてあることで管理がしやすくなります。
実際に書いてみるとこのようになります。
fuction.jsx
----------------------------------
import { useEffect, useState } from "react";
const styleCount = {
fontSize: "50px",
color: "green",
};
export const function = () => {
const [num, setNum] = useState(22);
const [isShowFace, setIsShowFace] = useState(false);
const onClickCountUp = () => {
setNum((prev) => prev + 1);
};
const onClickToggle = () => {
setIsShowFace(!isShowFace);
};
useEffect(() => {
if (num > 0) {
if (num % 3 === 0) {
isShowFace || setIsShowFace(true);
} else {
isShowFace && setIsShowFace(false);
}
}
}, [num]);
return (
<>
<button onClick={onClickCountUp}>カウントアップ</button>
<p style={{ color: "red" }}>{num}</p>
<p style={styleCount}>{num}</p>
<button onClick={onClickToggle}>on/off</button>
{isShowFace && <p>(@_@)</p>}
</>
);
};
表示はこのようになります。
作成できるもの
以上の構文をうまく使用できれば、このようなTODOリストも作成することができます。
実際にどのように実装するかはこちらの記事を参考にしてください。
Reactの公式も確認してみると良いです。
まとめ
実際に構文を使って動作させてみると、Reactの使い方のイメージが掴めてくるかと思います。
参考になりましたら幸いです!
コメント