はじめに
学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Reactの学習した事を言語化し、認識の深化による備忘録として記載。
Stateとは
コンポーネント単位で状態を保持する為の仕組み。
『状態』とは、数値、文字列、配列などWebアプリケーションを表すデータの事。
Propsとの違い
コンポーネント単位で状態を保持。Stateだと親子関係なくそれぞれ独立した仕組み。
Propsの場合、親コンポーネントから子コンポーネントへ値を渡す仕組み。
Stateの場合、一度定義したものは後々変更する事ができる。
StateとPropsの違い
Props 親コンポーネントから子コンポーネントへ値を渡す仕組み
親コンポーネント：Post.js
Post.js
<Button title="Post"/> ➡️ 親から子へ ⬇️
子コンポーネント：Button.js
Button.js
<button class=" ">
<I class= "..."/>
{props.title} ⬅️ 親から子へ ⬅️
</button>
➡︎ 『Post』変更不可
State コンポーネント単位で状態を保持する仕組み
親コンポーネント：App.js
App.js
state={admin: trune} ⬅️お互い独立
子コンポーネント：Counter.js
Counter.js
state={count: 0} ⬅️お互い独立
icrement=()=> {
count++
}
➡︎ 『count: 5』変更可能
React.Fragmentとは
React でよくあるパターンの 1 つに、コンポーネントが複数の要素を返すというものがある。フラグメント (fragment) を使うことで、DOM に余分なノードを追加することなく子要素をまとめることができるようになる。
sample.js
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
実際にコーディングを行う
(1) 作成するアプリのイメージ共有
count:0 が表示されている。『Increment』ボタンを押したら増え、
『Decrement』ボタンを押したら減るアプリ。
(2) counterプロジェクトを新規作成
terminal
creat-react-app <プロジェクト名>
(3) index.jsとApp.jsを作成する
デフォルトのファイルを全部削除して、index.jsとApp.jsを作成する。
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.querySelector("#root"));
App.js
import React from "react";
const App = () => {
return (
<div>
<div>App</div>
</div>
);
};
export default App;
(4)semantic-ui-cdnを導入する
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
上記のコードを piblic/index.html に貼り付ける。
(5) Counter.jsを作成する
① src/components / Counter.jsを作成する。
② React.Fragmentを使用する。
Counter.js
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
const onCountUp = () => {
setCount(count + 1);
};
const onCountDown = () => {
setCount(count - 1);
};
return (
<React.Fragment>
<p>Count: {count}</p>
<button className="ui primary button" onClick={onCountUp}>
Increment
</button>
<button className="ui red button" onClick={onCountDown}>
Decrement
</button>
</React.Fragment>
);
};
export default Counter;
(6) App.jsを作成する
App.js
import React from "react";
import Counter from "./components/Counter";
const App = () => {
return (
<div className="ui container" style={{ marginTop: "20px" }}>
<Counter />
</div>
);
};
export default App;