Reactアプリの作成

Warpにて、react_practicディレクトリに移動して、以下コマンドを叩いてReactアプリを作成します。

npm create vite

途中viteのversionの確認がありますが、yと入力してEnterを押しましょう。

Need to install the following packages:
create-vite@5.0.0
Ok to proceed? (y) y

次に、プロジェクトの名前を聞かれますが、first-projectとしてEnterを押しましょう。

Project name: … first-project

次に、フレームワークを選択する必要があり、カーソルキーでReactを選択し、Enterを押しましょう。

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

最後に言語の選択ですが、TypeScriptを選択し、Enterを押しましょう。

? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC

上記にてReactのアプリが作成されました。

first-projectに移動しましょう。

cd first-project

その後、このプロジェクトに必要なライブラリをインストールします。

(npm installにて、このプロジェクトに必要なライブラリをインストールできるのですが、必要なライブラリは、package.jsonのdependenciesとdevDependenciesに書かれているライブラリがインストールされます。インストールされたライブラリの実態は、node_modules配下に格納されます。)

npm install

ライブラリがインストールされたら、Reactアプリを起動してみましょう。

npm run dev

起動したら、以下のような画面が表示されるかと思います。

その中に http://localhost:5173と記述があるかと思いますので、そちらをcommmand + clickしてみましょう。

そうすると、以下のようにブラウザにて確認できるかと思います。