Chapter 02無料公開

開発環境の準備

Kei Touge
Kei Touge
2021.11.22に更新

Vite.js で React プロジェクトを作成する

Vite.js(以下、Vite)を利用して、todo という名前の React + TypeScript のプロジェクトを作成します。

https://ja.vitejs.dev/
zsh
# Node.js に同梱されている npm コマンドを利用する場合
% npm init vite

# パッケージマネージャーに Yarn を利用している場合
% yarn create vite

以下のスクリーンショットでは Node.js デフォルトの npm コマンドを利用しています。

  1. todo と入力します。


プロジェクトに名前をつける

  1. react を選択します。


フレームワークの選択

  1. react-ts を選択します。


JavsScript または TypeScript の選択

zsh
% npm init vite

✔ Project name: … todo
✔ Select a framework: › react
✔ Select a variant: › react-ts

Scaffolding project in /Users/zenn/Downloads/todo...

Done. Now run:

  cd todo
  npm install
  npm run dev

Vite の指示に従い、さっそくこのプロジェクトを起動してみましょう。

zsh
% cd todo
% npm install
% npm run dev

ブラウザで http://localhost:3000 にアクセスすると React アプリが表示されます。

このプロジェクト(開発用ローカルサーバー)を停止するには、ターミナルで Ctrl+C を打鍵してください。

zsh
  vite v2.6.7 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 199ms.

^C   # <-- Ctrl+C を入力

% 🔲

React デベロッパーツールの準備

Google ChromeMozilla Firefox、または Microsoft Edge には React Developer Tools という拡張機能がそれぞれ用意されています。

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

これは、React コンポーネントの状態をブラウザの開発者ツール画面に表示してくれる拡張機能です。必ずインストールしておきましょう。

開発者ツールを表示するには、キーボードから Ctrl + Shift + I を打鍵します( Windows 版 Chrome の場合)。 Components タブからコンポーネント名(ここでは App)を選択すると React コンポーネントの状態を確認することができます。

ホットリロード機能の確認

VSCode(もしくは何らかのコードエディタ)で todo フォルダを開き、src/App.tsx を編集してみましょう。

src/App.tsx
  function App() {
    const [count, setCount] = useState(0)

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
 -         <p>Hello Vite + React!</p>
+         <p>Hello Todo App!</p>
          <p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
              count is: {count}
            </button>
          </p>

  // ~ snip ~

ブラウザ画面へ変更が自動的に反映されていることが確認できると思います。


中央のメッセージが 'Hello Todo App!' に変わっている

これで準備が整いました。次章からさっそく React アプリを作成していきましょう。