React開発準備をしよう (2/4)

では、実際にReactのアプリケーションを作ってみましょう。コマンドプロンプトあるいはターミナルを開き、cdで適当な場所に移動して下さい。そして、以下のようにコマンドを実行しましょう。

create-react-app react_app

これで、「react_app」というフォルダが作成さ入れ、その中にReactアプリのためのファイル類がすべてインストールされます。Reactアプリの作成は、このように簡単に行なえます。

create-react-app アプリケーション名

作成されたフォルダを見ると、けっこうたくさんのファイルやフォルダが入っていて驚くかも知れません。ざっと整理すると以下のようになるでしょう。

・ファイル類
.gitignore――Git関係のファイルです。
package.json――npmのパッケージ管理のためのファイルです。
README――readmeファイルです。

※ファイル類は、アプリ本体とは直接関係のないものばかりです。

・フォルダ類
「node_modules」フォルダ――Node.jsのモジュール（プログラム）関連がまとめられています。けっこうなサイズになっていて、「たかがJavaScriptのライブラリを動かすのになんでこんなにたくさん！？」と驚くでしょう。が、大半は「Node.jsでサーバープログラムを起動して動かすために必要なもの」なので、心配はいりません。別にここにあるもの全部をアップロードしないと使えないわけではありませんので。

「public」フォルダ――Webで公開されるファイル（直接ファイルにアクセスできるもの）をまとめておくところです。この中には、デフォルトのWebページであるindex.htmlと、アイコンであるfavicon.icoがあります。

「src」フォルダ――JavaScriptのソースコード関連がまとめてあります。Reactのプログラム関係はこの中にあると考えていいでしょう。また、Reactのコンポーネントで使うCSSファイルなどもここに保管されています。つまり、「Reactのプログラムと、プログラムで使うファイル類」がここにある、というわけです。

当座は、「public」と「src」のフォルダ内にあるファイル類の編集が開発の中心となるでしょう。それ以外のものは、直接編集したりして利用することはほとんどありません。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。