プロジェクトとしてReactのアプリケーションを作成し、実際に動かしてみます。
Node.jsの用意
以下URLからNode.js（LTS版）をダウンロードします。既にインストール済の方は不要です。
https://nodejs.org/ja/
インストールが完了したら、Node.jsが動くかどうか確認します。
コマンドまたはターミナルを起動し、以下を実行してください。
$ node --version
「v12.16.1」のようなバージョン番号が表示されればOKです。
Creare React Appでプロジェクト作成
Reactのアプリケーションを作成するには、「Create React App」というプログラムを使用します。
インストールは不要で、事前にインストールしたNode.jsに組み込まれている「npx」というプログラムを使用します。
コマンドまたはターミナルを起動し、cdコマンドを使ってプロジェクトを作成する場所に移動してください。
そして、以下コマンドを実行します。
$ npx create-react-app react_app
実行すると、その場に「react_app」というフォルダが作成されます。これがReactアプリケーションです。
プロジェクトを実行
作成されたプロジェクトを実際に動かしてみます。
コマンドまたはターミナルから、「cd react_app」を実行してreact_appフォルダの中に移動します。
そして、以下コマンドを実行します。
$ npm start
npm startは、開発用のWEBサーバープログラムを起動し、そこでアプリケーションを公開し、アクセスできる状態にします。
「http://localhost:3000/」
に自動でアクセスされます。これがアプリケーションのアドレスになります。
Reactのロゴがゆっくりと回転する画面が表示されていたら成功です。
これで、プロジェクトを実行してWEBブラウザでアプリの画面を表示する操作ができました。
動作を確認できたら、コマンドまたはターミナルに戻り、Ctrlキーを押したまま「C」キーを押してスクリプトの実行を中断しましょう。
プロジェクトの中身をチェック
作成したプロジェクトがどのようになっているのか、「react_app」フォルダの中身を見てみましょう。
画面表示に関するファイルのみピックアップしています。
◎「public」フォルダ内
公開フォルダです。HTMLやCSSなど公開されるファイル類が保管されます。
| 説明 | |
|---|---|
| index.html | アクセスされるときに表示されるファイル。この中に、画面表示に関する基本的な要素がまとめてある。 |
◎「src」フォルダ内
Reactで作成したファイルなどがまとめられます。
| 説明 | |
|---|---|
| index.js | アプリケーションのベースとなるスクリプト |
| index.css | index.jsで使用するスタイルシート |
| App.js | indexに組み込まれる、実際に画面を表示しているコンポーネント |
| App.css | App.jsで使用するスタイルシート |
アプリケーションにアクセスすると、以下の流れで画面表示されます。
- index.htmlが読み込まれる。
- index.htmlを読み込む際、index.jsが読み込まれ実行される。
- index.jsの中でAppコンポーネントが読み込まれ表示される。
終わりに
今回の記事で、プロジェクトの作成と実行、その中身ができました。
次は自分でコンポーネントを作成しそれを表示される操作についてやっていきます。