突然Reactのプロジェクトに飛び込んだ君へ

前提として
・他の言語はいくつかわかる
・なんらかのフロントの経験がある
・こういう場面でもなんとかしてきた

そんな君ならきっとできる
やることをざっとあげてみました

・JavaScript/TypeScript: まずはこれらの基本を掴むべきだよ。

・コンポーネント: Reactの肝だよ。一つ一つのコンポーネントがアプリのパーツを作り上げるんだ。

・JSX: HTMLみたいな書き方ができるんだけど、JavaScriptの中で使うんだ。コードが見やすくなるよ。

・PropsとState: コンポーネント間でデータをやり取りするための大事な要素だよ。Propsで子にデータを渡し、Stateで動的なデータを管理するんだ。

・イベントハンドリング: ユーザーとのやり取りを管理するために、イベントハンドラを使うんだ。

・ライフサイクルメソッド: コンポーネントが画面に出たり、更新されたり、消えたりするときに何が起きるかを管理するんだ。

・コンテキストAPI: グローバルなデータを共有するための便利な道具だよ。これを使うと、データを中間コンポーネントを通して手動で渡す必要がなくなるんだ。

・React Router: ページの移動を管理するライブラリだよ。複数ページのアプリを作るときに使うよ。

・Redux: これもまた大事なライブラリだね。大きなアプリの状態を管理するのに便利だよ。

・Hooks: これは新しい機能で、クラスコンポーネントを書かなくてもstateや他のReactの特性を使えるようになるんだ。useStateやuseEffectなど、基本的なHooksを理解するといいよ。

私の場合いまいちuseStateがピンとこなかったので簡単なもので練習しました

キモはこれ
countが現在の状態、setCountで状態を変更します
useStateの引数が初期値となります

const [count, setCount] = useState(0);

よくあるボタンを押すとカウントアップするやつです

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Clicked {count} times</p>
      <button onClick={incrementCount}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

気が向いたらtypescript初見殺し編もやります