12億円ほしい人のブログ

メガBIG当たらないかな

react-scripts startによりWebアプリが起動されるまでについて

ReactによるWebアプリ起動までの概略メモ

まずはインストール

Node.jsを準備したうえで、適当なディレクトリで以下コマンドを実行

npm i -g create-react-app

Reactプロジェクトを作成

create-react-app {プロジェクト名}

これでプロジェクト用のディレクトリ構成が作成される。
例えば以下。
/public/index.html
/src/index.js
/src/Appjs

プロジェクトを実行

cd {プロジェクト名}
npm start

これにより、開発用サーバが起動してWebアプリを操作できるようになる。

このときおそらく、BabelとWebpackによりReactコードが解析されてHTML、JS、CSSが再構成される。
index.htmlには、index.jsの記述がないが、これも上記ツールによりパスをたどって見つけられていると思われる。
例えばindexxx.htmlやindexxx.jsなどにリネームすると、index.htmlやindex.jsが見つからないというエラーになる。