Reactのプロジェクトを作成する

Reactのプロジェクトを作成する

Reactのプロジェクトをfacebook公式のcreate-react-appコマンドを使用して作成してみます。

node.jsがインストールされていることが前提です。

参考:nodistからインストールする方法

create-react-appコマンドをインストールします。

$ npm install -g create-react-app

create-react-appコマンドをインストールしたら、次はReactプロジェクトを作成します。ここでは、react-sample001というプロジェクト名とします。

$ create-react-app react-sample001

これで、react-sample001というフォルダが作成されます。

スクリプトなどの詳細は以下を参照してください。

React.js入門

開発モードでアプリケーションを起動します。

$ cd react-sample001
$ npm run start

これで、http://localhost:3000/にアクセスします。

以下のような画面が表示されます。

Reactのプロジェクトを作成する

これでReactプロジェクトの作成は完了です。

npxコマンド使用

グローバルインストールせずにnpxコマンドでプロジェクト作成することができます。

$ npx create-react-app sample1

sample1というプロジェクトが作成されます。

React + Vite環境構築する

項目 内容
node v18.16.1
npm 9.5.1

React + Vite環境をコマンド一発で作ります。インタラクティブな感じでReact + TypeScript + SWCを選択すれば良しなに構築されます。

$ npm create vite
√ Project name: ... xxx
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

...
Done. Now run:

  cd xxx
  npm install
  npm run dev

最後に出てくる3つのコマンド実行すれば起動します。

cd プロジェクト名
npm install
npm run dev

Reactのプロジェクトを作成する

コメント

タイトルとURLをコピーしました