Cloud9を使ってお試しでReact.jsを体験してみる
概要
React.jsを試してみたいけど、環境構築がめんどくさい… なおさら、webpack 等についても学ばなければならないという煩わしさがあります。 そんなことを払拭してまずは試しにReact.jsを試したいという方にお送りするものです 今回は、Cloud9とcreate-react-appを使って簡単にReact開発環境を整えたいと思います
前提
- Cloud9のアカウント登録を済ましていること
実際にやってみる
ワークスペースの作成
- Cloud9にログインしている状態でWorkSpacesで「Create a New Workspace」で新しいワークスペースを作成します
- 必要な項目を入力していきます.今回は以下で作成していきます
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の制約があるため動作が遅い場合がありますが、今回のように試すぐらいなら十分と考えております 実際にコードを読んで書き換えて見るのも勉強になるでしょう
nvm v0.33.2でmalformedでインストールできない件について
nvm v0.33.2でインストールがうまくいかない
たまに、Reactを使って試し書きを行いたいと思うことがあります。
私はその場合にVagrant上にnodeをインストールして開発を始めますが、 この間、久しぶりに環境構築を行っているとうまくできない場面に遭遇しました。
原因
エラーとしては「curl:(3)
意味としては不正な形式のURLという認識でいいのか。。。
解決策
よくわからないのですぐにググりました。
するとこんな記事が
【メモ】nvm0.33.2 でnode.jsのインストールがこける場合の対処法
なるほど、v0.33.2のバグという認識でいいのかな？ となるとバージョンを下げて環境構築をする必要があるとのこと
クローンしたnvmのローカルリポジトリ上で以下を実行
git checkout -b v0.33.0 refs/tags/v0.33.0 source ~/.nvm/nvm.sh
以上を行うとバージョンがv0.33.0に切り替わるかと思われます
バージョンの確認は以下のコマンドです
nvm --version
バージョンが0.33.0になっていることを確認したら あとはnodeのインストールを行うことでnpmコマンドが使えるようになると思います。
EOS60Dのエラー70の修理から返ってきた
初めての投稿になります
購入してから５年はなるだろうEOS60Dが先日、エラー70という警告が出て一切使えない状態になりました。
エラー70以外の警告としては「電源を入れ直しを行ってください」という警告が出ていたので、電池周りで異常が発生しているのではないかと予測
一応、レンズ関連での異常でないことを確かめるためにレンズの交換を行ってみたり、予備電池で動作確認をしていたりしましたがやはりエラー内容には変わらず
となると電池自体には不備はないように思われ、本体に異常があるのではと考えた
実際に修理に出してみるとやはりバッテリー周りでの異常が発生しており、部品交換という扱いになりました
修理以外にもできる点検をすべて行っていただきました。
技術もこれから磨かねばなりません
