【React】Reactを触ってみる（コンパイル＆サーバ起動まで）

前回

hitoto28.hatenablog.com

create-react-appコマンドが使えるようになったので実際に簡単なアプリを作成する。

まずはターミナルで以下のコマンドを実行し、Reactのプロジェクトを生成する。
事前に適当なディレクトリに移動しておくこと。

$ create-react-app helloworld

※「helloworld」の部分はプロジェクト名。
React.jsアプリに必要なパッケージ等のインストールが開始される。
ファイル構成は以下の通り。

.
├── README.md
├── node_modules/
├── package-lock.json
├── package.json
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src/
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

そしてコンパイル＆httpサーバー起動

$ npm start

成功すると以下のように表示されるので、ブラウザでURL（
http://localhost:3000/
）にアクセスする。

あとはApp.jsやApp.cssを好きなように編集すればよし。
めちゃくちゃ便利。

ビルドする際は以下のコマンド

$ npm run build

build/ 以下にproductionファイルが生成されるとのこと（未確認）
とりあえずもう少し色々触ってみる。
今回はここまで

参考サイト様
create-react-app で React フロントエンドの掲示板を作ってみる（リスト表示） - JavaScriptだけでWebサイト開発