01--setup.mdx

title	環境構築
description	このチャプターでは、快適に XCode/VSCode で快適な C 言語を書くための秘訣を教えます。
slug	textbook/web/for-hackathons/setup

import { Aside } from "@astrojs/starlight/components"; import { Tabs, TabItem } from '@astrojs/starlight/components';

Node.js, npmのインストール

1. Node.jsの公式サイトにアクセスします。
2. 画像のボタンをクリックすると、お使いのOSに適したLTS版インストールできるインストーラ(.pkg,.msi)がインストールされます。

3. インストーラ(.pkg)をクリックすると以下の画像のウィンドウが現れるので順番にインストール処理を行います。

3. インストーラ(.msi)をクリックすると以下の画像のウィンドウが現れるので順番にインストール処理を行います。

4. インストール後、以下のコマンドでバージョンを確認できれば正常にインストールされています。表示されているバージョンが画像と同じでなくても大丈夫です。

   node -v
   npm -v

Reactプロジェクトのスタート

1. ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行します。
   これにより、Viteを使用して新しいReactプロジェクトが作成されます。
   ここでは、プロジェクト名をmy-appとしていますが、任意の名前に変更できます。

   npm create vite@latest my-app

1. Reactを選択します。

2. JavaScriptを選択します。

3. Doneが表示されたら完了です。

4. 作成したプロジェクトのディレクトリに移動します。 {/* タブ選択したい */}

   cd my-app

3. 依存関係をインストールします。

   npm install

4. 実行すると、開発サーバーが立ち上がり、➜ Local: http://localhost:5173/のhttp://http://localhost:⚪︎⚪︎⚪︎⚪︎にブラウザでアクセスすると、Reactアプリが確認できます。

   npm run dev

---