React -初心- 【備忘log】

 Reactとはなんかサイトを作るのに良い感じのフレームワークらしい。ライバルはVueだとかなんとか。

wikiのページ→https://en.wikipedia.org/wiki/React_(web_framework)

 ここでは、Reactの環境構築についてまとめたい。ここに書いてあるのはネットの大海に落ちてるやつの集合体だから特段参考にはならない。とりあえずReactの公式サイトを見よう!

Reactの公式サイト→https://reactjs.org/

 下手な導入は置いておいて、ここからは普通に書いていく。win機とmac機の両方で実行したりしてる。{私の環境は基本的にmac(catalina)である。メイン機はwinなのだが、web開発の作業では色々あってmac機を使っているので悪しからず(この記事を書いているのはwin機)。}

環境構築

 さて、Reactで書くにあたって色々準備せねばならない。

1 Node.jsをインストール

 なんでかって?わからんけど必要である。これがないと動かない。安定版をインストールすることをお勧めする(どっちでもいいけど)。

公式サイト→https://nodejs.org/en/

 ディレクトリはわからんけど多分上層の方がいいのかな?これはインストールするだけでOK。たしか。

2 雛形の登場

 Reactには雛形が存在する。楽だね。まずは作業ディレクトリにReactの色々を入れよう。でも、自分で作業ディレクトリを先に作らないように。あとあとめんどい。あとcreate-react-appの後ろに作業ディレクトリを入れるのを忘れないように。入れなかったらエラー吐いてくれるから言うまでもないか。終わるまで時間かかるからTwitterでも見て待ってよう。”Happy hacking!”って言われたら完了だ。

npx create-react-app myapp

 次は作業ディレクトリに移動しよう。

cd myapp

 これで開発の準備は完了した。実はこの段階でサイトを見れたりする。今回にかかわらず、一度どうなってるか確認したいときは次のコマンドを打つ。

npm start

 こうすればlocalhost:3000でページが作られる。こんな感じのが。

 すごいね。ぐるぐる回ってる。

 これで環境構築自体は終了だ。

 ちょっとしたチュートリアルとか書こうと思ったけど、それは公式サイトにあるしやめる。いい加減だな?まあ、自分用だし許して。