Help us understand the problem. What is going on with this article?

モダンな技術のReactを勉強しよう

最近現役エンジニアの方とお話しさせていただく機会があったのですが、やっぱり現場はReact一択!!とういう声が大きかったので、どんな技術なのか、どうやって導入するのか調べて実際に簡単なアプリを作成していこうと思うので、これからReactをアウトプットして行こうと思います。

Reactとは

まずは簡単にReactってどういうものなのかざっと調べた情報を記述します

  • ReactはFacebookが作った
  • JSのライプラリ
  • 記述の仕方はJSX(ほぼHTML)
  • {}内はJSの記述できる
  • SPA(Single Page Application)を作ることに最適
    • ちなみにSPAはページ推移せず、一つのWebページでコンテンツを切り替えられるやつのこと いちいちリロードが必要ないやつ
  • TypeScriptと相性が良い

ほんとに簡単に調べた結果を羅列しただけですが、こんな感じ

モダンな技術を学ぶのはわくわくしますね! オラわくわくすっ(ry
まあよく意味わからないところとかあるんですけど、それはアプリ作りながらやっていけばわかる様になっていくのかなと思います
じゃけん、環境構築やっていきましょうか!(埼玉県出身者より)

環境構築

create-react-appという開発環境を簡単に構築できるツールを使っていくのですが、どうやらそれを使うためには
node
npm
が必要らしいです

またそれをインストールするためにはHomebrewnodebrewをインストールしなければいけない様です、、ややこしい、、

なんでまずはこのコマンド

ターミナル
/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の環境構築までをずらずら記述していったのですが、ネットワークの基礎的な部分が圧倒的に不足していますね。。。
なんでかわからないけどできたという状態から抜け出すためにはどのくらい勉強すればいいのかトホホ、、、

参考

https://www.youtube.com/watch?v=P5lDbRxp9sI&t=140s

DD1
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away