メモ > 技術 > フレームワーク: React.js > プロジェクトを作成して開発
プロジェクトを作成して開発
■プロジェクトを作成
>cd C:\path\to\react_project
>npx create-react-app react_app
react_app フォルダが作成され、その中にファイルが作成される。
なおプロジェクトは、npx ではなく以下のように npm でも作成できる。結果は同じ。
npm は「パッケージをインストールして実行」となるが、
npx は「パッケージを一時的にダウンロードして実行し、完了したらパッケージをクリア」となる。
ダウンロードのための時間はかかるが、ローカル環境にパッケージをインストールしないで済むため、
現在は npx によるプロジェクト作成が主流となっている。
>npm init react-app react_app
プロジェクトの操作はこのフォルダ内で行うため、フォルダ内に移動しておく。
>cd react_app
以下でプロジェクトを実行する。
>npm start
Compiled successfully!
You can now view react_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": "react_app",
"version": "0.1.0",
"private": true,
"homepage": "./", … 追加。
Advertisement