Memo

メモ > 技術 > フレームワーク: 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": "./",				… 追加
Memo

Advertisement
