今宵も我が家の回線は遅い

開発とダーツとにんげんかんさつが好き

Cloud9を使ってお試しでReact.jsを体験してみる

概要

React.jsを試してみたいけど、環境構築がめんどくさい… なおさら、webpack 等についても学ばなければならないという煩わしさがあります。 そんなことを払拭してまずは試しにReact.jsを試したいという方にお送りするものです 今回は、Cloud9とcreate-react-appを使って簡単にReact開発環境を整えたいと思います

前提

  • Cloud9のアカウント登録を済ましていること

実際にやってみる

ワークスペースの作成

  1. Cloud9にログインしている状態でWorkSpacesで「Create a New Workspace」で新しいワークスペースを作成します
  2. 必要な項目を入力していきます.今回は以下で作成していきます
    • Workspace name:「react-sample」
    • Descriptionは空白
    • Teamは「Don’t set a team for this workspace」
    • Hosted workspaceは「public」
    • Clone from Git or Mercurial URLも空白
    • Choose a Templateは「HTML5」 以上で作成していきます

nvmの設定

Cloud9上でnvmの設定を行っていきます nvmとはnode version managerの略でnodejsを管理マネージャーです create-react-appを利用する際はnodejsのバージョンは４以上が推奨されています 今回はnodejsのバージョンを8にあげたいと思います 画面下のbash上で以下のコマンドを入力していきます

 // とりあえずバージョンを確認
$ nvm version
v4.7.3 

// バージョンの8をインストール
$ nvm install 8 
Now using node v8.2.1 (npm v5.3.0)

// バージョンが変わっていることを確認
$ nvm version
v8.2.1

nvmの設定は以上です

create-react-appのインストール

お手軽にReac.jstの環境を整えてくれるパッケージcreate-react-appをインストールを行います また、bash上でコマンドを入力していきます 今度はnpmコマンドを使います npm とはnode package managerと呼ばれ、nodejsのライブラリやパッケージを管理するためのものです

$ npm install -g create-react-app
/home/ubuntu/.nvm/versions/node/v8.2.1/bin/create-react-app -> /home/ubuntu/.nvm/versions/node/v8.2.1/lib/node_modules/create-react-app/index.js
+ create-react-app@1.3.3
added 71 packages in 12.255s
// こんな感じのメッセージが出れば成功

npm の設定は以上です

実際にアプリケーションを作ってみます

これまでで環境構築が済みましたので実際にアプリケーションを作成していきます またbash上でコマンドを打ちます

$ create-react-app react-sample

上記のコマンドを入力してしばらく待つとアプリケーションを作成されます 結構時間がかかると思います サンプルのアプリケーションができたので実際に動かしてみましょう またまたbash上で

// 作られたディレクトリに移動
cd react-sample
// アプリケーションを実行
npm start

npm startを入力したあとに

Local: http://localhost:8080/

をクリックしopenでアプリケーションを開きます 開いたあと何か出てきますが「open the app」でアプリケーションを開いて動いていること確認しましょう

まとめ

以上でCloud9とcreate-react-appを利用したお試しReact.jsの解説を終わります メモリやCPUの制約があるため動作が遅い場合がありますが、今回のように試すぐらいなら十分と考えております 実際にコードを読んで書き換えて見るのも勉強になるでしょう