はじめに
Udemyの「モダンJavaScriptの基礎から始めるReact入門」を受講し終えたので、学んだ内容を自分用に整理しました。
この記事では、噛み砕いてまとめています。
① JavaScript基礎（Reactの土台）
ReactはJavaScriptで書くため、まずここが超重要です。
■ let / const
const name = "Taro";
let count = 0;
const → 基本これ（値を変更しない）
let → 値を変更する場合のみ使用
👉 基本はconstを使うのがルール
■ アロー関数
const add = (a, b) => a + b;
👉 短く関数を書ける
👉 Reactではほぼこれを使う
■ 分割代入
const user = { name: "Taro", age: 20 };
const { name, age } = user;
👉 オブジェクトから値を取り出すときに便利
■ スプレッド構文
const newArray = [...oldArray];
👉 配列をコピーできる
👉 Reactのstate更新でめちゃくちゃ使う
② Reactの基本概念
■ コンポーネント
👉 UIを「部品」に分ける考え方
例：
ヘッダー
ボタン
リスト
function App() {
return <h1>Hello</h1>;
}
👉 画面は部品の組み合わせでできている
■ state（状態）
👉 画面の中で変わるデータ
const [count, setCount] = useState(0);
count → 現在の値
setCount → 値を更新する関数
👉 stateが変わると画面も変わる
■ props（データの受け渡し）
👉 親から子へデータを渡す
👉 子コンポーネントはpropsで受け取る
③ 超重要概念（ここが理解のカギ）
■ 再レンダリング
👉 stateが変わると画面が自動で更新される
setCount(1);
👉 DOM操作を書かなくていいのがReactの強み
■ 単方向データフロー
👉 データは「上から下」に流れる
親 → 子
👉 子が勝手に親のデータを書き換えることはしない
④ よく使うHooks
■ useState
👉 状態管理の基本
const [text, setText] = useState("");
■ useEffect
👉 タイミングで処理を実行
useEffect(() => {
console.log("初回表示時に実行");
}, []);
👉 API通信などでよく使う
⑤ 挫折しないためのポイント
■ 完璧に理解しようとしない
👉 最初は「なんとなく」でOK
👉 使いながら理解するのが正解
■ 手を動かす
👉 動画を見るだけはNG
👉 必ず自分で書く
■ CRUDの基礎
Create（作る）
Read（見る）
※ Update / Deleteは今後
■ 状態管理
👉 useStateでデータを管理
■ 入力バリデーション
👉 入力ミスを防ぐ処理
■ データ集計
👉 reduceで合計値を計算
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！