React開発準備をしよう (2/4)
作成:2017-03-25 08:56
更新:2017-03-25 08:56
更新:2017-03-25 08:56
■Reactアプリケーションを作成する
では、実際にReactのアプリケーションを作ってみましょう。コマンドプロンプトあるいはターミナルを開き、cdで適当な場所に移動して下さい。そして、以下のようにコマンドを実行しましょう。
これで、「react_app」というフォルダが作成さ入れ、その中にReactアプリのためのファイル類がすべてインストールされます。Reactアプリの作成は、このように簡単に行なえます。
作成されたフォルダを見ると、けっこうたくさんのファイルやフォルダが入っていて驚くかも知れません。ざっと整理すると以下のようになるでしょう。
・ファイル類
.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」のフォルダ内にあるファイル類の編集が開発の中心となるでしょう。それ以外のものは、直接編集したりして利用することはほとんどありません。
create-react-app react_app
これで、「react_app」というフォルダが作成さ入れ、その中にReactアプリのためのファイル類がすべてインストールされます。Reactアプリの作成は、このように簡単に行なえます。
create-react-app アプリケーション名
■Reactの構成
作成されたフォルダを見ると、けっこうたくさんのファイルやフォルダが入っていて驚くかも知れません。ざっと整理すると以下のようになるでしょう。
・ファイル類
.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にしてみてください。
※関連コンテンツ