全くのReact初心者が書籍の力を借りて基本的な記述や概念を学んでみました。その流れを共有します。
同じ境遇の人の参考になればと思います。
参考にした書籍
こちらの書籍のChapter４：Reactの基本部分を参考にして実践してみました。
まずCodeSandboxを開く
CodeSandboxというウェブブラウザ上で簡単にコーディングができるサイトがあるそうなので、こちらを開く。
↓リンク
https://codesandbox.io/
Start coding for freeを押下し、Reactを選択する。
左に階層、中心にコード、右側にブラウザが表示されている。
ブラウザには以下がデフォルトで表示されている。
Hello CodeSandbox
Start editing to see some magic happen!
イベント処理を扱ってみる
ボタンの実装と、ボタン押下でアラートが表示されるところまでを実装してみます。
①ボタンを実装する
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button>ボタン</button>
</div>
);
}
②ボタン押下でアラートが表示されるところまでを実装
export default function App() {
const onClickButton = () => {
alert("test");
};
return (
<div className="App">
<h1 style={{ color: "red" }}>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={onClickButton}>ボタン</button>
</div>
);
}全画面でブラウザ表示してボタン押下して、アラートが表示されることを確認。
・イベント名の記載はキャメルケースになる(今回だとonclickではなくonClickにしないといけない)
・return以降の記載は、{}で囲むことでJavaScriptを記述することができる
スタイルを変更してみる(インラインスタイルでの実装)
h1タグの文字の色を変更してみます。
import "./styles.css";
export default function App() {
const onClickButton = () => {
alert("test");
};
return (
<div className="App">
<h1 style={{ color: "blue" }}>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={onClickButton}>ボタン</button>
</div>
);
}ブラウザ表示はこのように青に変更されている。
・ReactではcssはJavaScriptのオブジェクトとして記述するため、style={{}}のような記述の仕方になる
・要素は””を付与する必要がある(color: blueだとエラーになる)
また、事前に変数を指定して、そのスタイルをきかすことも可能。
import "./styles.css";
export default function App() {
const onClickButton = () => {
alert("test");
};
const contentStyleTitle = {
color: "blue",
fontSize: "50px",
textAlign: "left"
};
return (
<div className="App">
<h1 style={contentStyleTitle}>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={onClickButton}>ボタン</button>
</div>
);
}
Propsを使ってみる
Propsとは、
コンポーネント(ある画面の要素をまとめたファイル、上記でいうとApp.jsもそれに当たる)に渡す引数のようなもの
色とテキストをPropsで渡して文字を返すコンポーネントを作成してみます。
①src配下にcomponentフォルダを作成し、その配下にColoredTitleMessage.jsxを作成する
②ColoredTitleMessage.jsx、App.jsをそれぞれ以下のように記述
export const ColoredTitleMessage = (props) => {
const contentStyleTitle = {
color: props.color,
fontSize: "50px",
textAlign: "left"
};
return <h1 style={contentStyleTitle}>{props.message}</h1>;
};import "./styles.css";
import { ColoredTitleMessage } from "./components/ColoredTitleMessage";
export default function App() {
const onClickButton = () => {
alert("test");
};
// const contentStyleTitle = {
// color: "blue",
// fontSize: "50px",
// textAlign: "left"
// };
return (
<div className="App">
<ColoredTitleMessage color="pink" message="こんにちはReact！" />
<h2>Start editing to see some magic happen!</h2>
<button onClick={onClickButton}>ボタン</button>
</div>
);
}ブラウザは以下のようにApp.jsのColoredTitleMessageで渡している引数がスタイルに適用されて、画面表示が変わりました。
(Propsの話の続き)childrenという渡し方もある
childrenはコンポーネントを通常のHTMLタグのように任意の要素を囲んだ際に、その囲んだ要素がchildrenとしてPropsに設定される引数の渡し方のこと。
具体的には以下のように修正して、メッセージの内容だけをchildrenとしてPropsに設定してみます。
export const ColoredTitleMessage = (props) => {
const contentStyleTitle = {
color: props.color,
fontSize: "50px",
textAlign: "left"
};
return <h1 style={contentStyleTitle}>{props.children}</h1>;
};import "./styles.css";
import { ColoredTitleMessage } from "./components/ColoredTitleMessage";
export default function App() {
const onClickButton = () => {
alert("test");
};
// const contentStyleTitle = {
// color: "blue",
// fontSize: "50px",
// textAlign: "left"
// };
return (
<div className="App">
<ColoredTitleMessage color="pink">こんにちはReact！</ColoredTitleMessage>
<h2>Start editing to see some magic happen!</h2>
<button onClick={onClickButton}>ボタン</button>
</div>
);
}メッセージ自体は変更していないため、画面表示は変わらない。
Stateを使っていく
次はStateについて実装してみます。
Stateとは、コンポーネントの状態を表す値のことで、Reactでwebアプリを作る際にはイベント発生時に変化するStateの状態を管理し、その状態によってバックエンドの処理を制御することで動的なアプリケーションを作っていくそう。なるほど。
具体的には、ボタン押下時に画面表示数字が一つずつ増えていく実装をしていきます。
①App.jsにuseStateをimportする
import { useState } from "react";②App.jsにuseState関数の返却値を記述する
const [ num , setNum] = useState(0);③ボタン押下時の処理でnumに＋１を付与する処理を追加
④pタグで数字を表示するHTMLタグを記述する
上記①〜④全てを記述したApp.jsがこちら
import "./styles.css";
import { ColoredTitleMessage } from "./components/ColoredTitleMessage";
import { useState } from "react";
export default function App() {
const [num, setNum] = useState(0);
const onClickButton = () => {
// alert("test");
setNum(num + 1);
};
return (
<div className="App">
<ColoredTitleMessage color="pink">こんにちはReact！</ColoredTitleMessage>
<h2>Start editing to see some magic happen!</h2>
<button onClick={onClickButton}>ボタン</button>
<p>{num}</p>
</div>
);
}画面ではボタン押下で回数が上がっていく仕組みが実装できました。
終わりに
基本的な記述とProps、StateというReactの重要要素をかなり学べました！この本が本当にわかりやすくてすごい！
読んでいただきありがとうございました！
コメント