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プロジェクトの作成は完了です。

npxコマンド使用

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

$ npx create-react-app sample1

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

React + Vite環境構築する

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

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^