メモ > 技術 > フレームワーク: React.js > プロジェクトを作成して開発
■プロジェクトを作成して開発
■プロジェクトを作成
>cd C:\path\to\react_project
>npx create-react-app readt_app
readt_app フォルダが作成され、その中にファイルが作成される
なおプロジェクトは、npx ではなく以下のように npm でも作成できる。結果は同じ
npm は「パッケージをインストールして実行」となるが、
npx は「パッケージを一時的にダウンロードして実行し、完了したらパッケージをクリア」となる
ダウンロードのための時間はかかるが、ローカル環境にパッケージをインストールしないで済むため、
現在は npx によるプロジェクト作成が主流となっている
>npm init react-app readt_app
プロジェクトの操作はこのフォルダ内で行うため、フォルダ内に移動しておく
>cd readt_app
以下でプロジェクトを実行する
>npm start
Compiled successfully!
You can now view readt_app in the browser.
Local:
http://localhost:3000
On Your Network:
http://172.23.144.1:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
上記のように表示され、表示されている
http://localhost:3000 にアクセスするとページが表示される
■プロジェクトをビルド
以下でプロジェクトをビルドできる
>npm run build
build 内にファイルが書き出さる
これらをWebサーバの公開フォルダ直下に配置すると画面が表示される
ただしパスは「/」はじまりのため、公開フォルダ直下でないと表示されないが、
package.json に以下を追加して再ビルドすると表示されるようになる
{
"name": "readt_app",
"version": "0.1.0",
"private": true,
"homepage": "./", … 追加