最近現役エンジニアの方とお話しさせていただく機会があったのですが、やっぱり現場はReact一択！！とういう声が大きかったので、どんな技術なのか、どうやって導入するのか調べて実際に簡単なアプリを作成していこうと思うので、これからReactをアウトプットして行こうと思います。
##Reactとは
まずは簡単にReactってどういうものなのかざっと調べた情報を記述します
- ReactはFacebookが作った
- JSのライプラリ
- 記述の仕方はJSX(ほぼHTML)
- {}内はJSの記述できる
- SPA(Single Page Application)を作ることに最適
- ちなみにSPAはページ推移せず、一つのWebページでコンテンツを切り替えられるやつのこと いちいちリロードが必要ないやつ
- TypeScriptと相性が良い
ほんとに簡単に調べた結果を羅列しただけですが、こんな感じ
モダンな技術を学ぶのはわくわくしますね！ オラわくわくすっ(ry
まあよく意味わからないところとかあるんですけど、それはアプリ作りながらやっていけばわかる様になっていくのかなと思います
じゃけん、環境構築やっていきましょうか！（埼玉県出身者より）
##環境構築
create-react-appという開発環境を簡単に構築できるツールを使っていくのですが、どうやらそれを使うためには
node
npm
が必要らしいです
またそれをインストールするためにはHomebrewとnodebrewをインストールしなければいけない様です、、ややこしい、、
なんでまずはこのコマンド
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
その後、Macのパスワードと
Press RETURN to continue or any other key to abort
と出てくるのでreturn押してあげてください
これでHomebrewのインストール完了
つぎはこのHomebrewを使ってnodebrewをインストールします
brew install nodebrew
これでnodebrewのインストール完了
そんで次にnodebrewを使ってnodeをインストールします
nodebrew install stable
ディレクトリがないとエラー出る場合はこれを先に
mkdir -p ~/.nodebrew/src
インストールが完了したら
nodebrew ls
でバージョンを確認しましょう
多分今の安定バージョンというのはv14.4.0になっていて、それをインストールした状態ですが
current: none
とターミナルに記載があると思います。
これをv14.4.0にするために
nodebrew use v14.4.0
これで再度バージョンを確認すると
current: v14.4.0
になっているはず
そして次はこれ(最新macOSなら)
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
これでやっとnodeがインストールできました！！
nodeがインストールされたらnpmもインストールされていますので、これでcreate-react-appを使う環境が整ったとういう感じですね！
そしてこれが最後のアプリケーションを作成するときにコマンド
npx create-react-app 任意のアプリケーション名
これでアプリケーションが作成されました！！
Finderから確認できればアプリケーションは作成されています
長かった？ですね
あっ、アプリケーションの作成の際はちゃんと自分が作りたいディレクトリに移動して作成してくださいね！
##まとめ
とりあえずcreate-react-appの環境構築までをずらずら記述していったのですが、ネットワークの基礎的な部分が圧倒的に不足していますね。。。
なんでかわからないけどできたという状態から抜け出すためにはどのくらい勉強すればいいのかトホホ、、、