libro
www.tuyano.com
初心者のためのReact入門

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

作成:2017-03-25 08:58
更新:2017-03-25 08:58

■一からアプリを作るには?

ここでは、create-react-appを使いましたが、実はこれを利用せずにReactアプリケーションを作る方法もあります。これは、手作業でnpmの初期化をし、必要なライブラリをインストールする方法です。以下のような手順でコマンドを実行していきます。(「アプリ名」には、作成するアプリの名前が入ります)
mkdir アプリ名
cd アプリ名
npm init
npm install --save react react-dom

Reactアプリケーションは、reactreact-domという2つのパッケージがインストールされればそれで動きます。ただし、この方法で作ったものは、具体的なWebアプリのファイル類は一切用意されません。ただ、必要なライブラリが準備されただけの、いわば「空のアプリ」なのです。ですから、アプリのファイルはすべて自分で手作業で作っていかないといけません。


■フォルダの構成

この方式で作成されるファイルやフォルダは、以下のようになります。

package.json――npmのパッケージ管理用のファイルです。
「node_modules」フォルダ――Node.js関連のパッケージがまとめて保存されています。

この2つだけしかありません。これらは、create-react-appで作成される同名のフォルダ/ファイルと同じものになります。

npmでパッケージ管理されるアプリケーションは、基本的にフォルダの構成が決まっています。アプリを開発するには、このアプリのフォルダの中に「src」フォルダを作成し、この中に実行するメインプログラム(JavaScriptのスクリプトファイル)として、「index.js」というファイルを作成します。これが、Reactのアプリのメインプログラムとなるわけです。

どちらのやり方でも、作成されるアプリの形はだいたい同じになります。違うのは、「サンプルのアプリのファイルが最初から用意されているか」というだけです。ですから、特別な理由がない限りは、create-react-appで作成をしたほうがよいでしょう。

※プログラムリストが表示されない場合

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


※関連コンテンツ

「初心者のためのReact入門」に戻る