React.jsをとりあえずさっさと試してみたい場合の方法(CDNの利用)とこれから本格的に開発していこうという場合(create-react-appの利用)に分けてReact.jsの始め方について今回記事にしました。
CDNの利用 (サクッと始めたい方向け)
開発時は以下の未圧縮スクリプトファイルを読み込むだけでReact.jsが使用可能です。
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
本番運用時には以下の圧縮したスクリプトファイルを読み込むようにして下さい。
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
(参考ページ)
React.js公式サイト(CDN Links)
create-react-appの利用 (本格的に開発した方向け)
前提
Node.jsがインストールされている必要があります。
以下のコマンドを実行してNode.jsのバージョンが出力されなければインストールされていないので、インストールしておく必要があります。
$ node -v
インストーラーを使う場合はこちらからダウンロード出来ます。
Reactプロジェクトの作成
$ npm install -g create-react-app $ create-react-app my-app $ cd my-app $ npm start
- Nodo.jsに同梱されているパッケージパネージャーのnpmコマンド「npm install -g create-react-app」でcreate-react-appパッケージをインストールします。
- 「create-react-app」コマンドでReactプロジェクトを作ります。
上記で「-g」オプションを付けていない場合は、「npx create-react-app my-app」コマンドでもいけます。ただし、npxコマンドはnpmのバージョンが5.2以上でないと使えません。 - カレントディレクトリに作成されたmy-appディレクトリに移動します。
- 「npm start」でNode.jsサーバーが起動してデフォルトのトップページがブラウザに表示されます。
作成されたReactプロジェクト(my-appディレクトリ内第一階層)
my-app ├── README.md ├── node_modules ├── package-lock.json ├── package.json ├── public └── src
デフォルトのトップページ
