2
1

More than 3 years have passed since last update.

【備忘録】よちよち学ぶreactのいろいろ①(プログラミング赤ちゃん用)

Last updated at Posted at 2019-09-27

Reactってなに? 

image.png

最近いろんな言語に触れて、どれで何ができるか、何が流行っているのか等
色々勉強しようかなと思っているのですが、同期から『Reactいいよ!』って聞いたのでやってみることにしました。
何がいいのか。。とりあえずGoogle先生にReactとは何かを聞いてみました。

私は自分用に書いていますが、
この記事めっちゃわかりやすいので紹介します。

できる限り短く説明するReact.js入門

下記わたしの印象です

  • JavaScriptのフレームワーク
  • HTMLとかのコードを中に記述できてすごい!
  • Facebookが開発してるから注目されてる激アツフレームワーク
  • ボタン押したらその画面でなにか起こる!みたいなことできる
  • つまりサイトの見た目をつくることができる!

色々記事見ましたが、私の脳みそが赤ちゃん過ぎてまだよくわかりませんでした。
image.png

とりあえず勉強してみようかと。

Reactを私がどうやって勉強しているか

まず上記で一番知っておくべきことは
ReactはJavaScriptのフレームワークだということです。
つまりJavaScriptのことは少しだけでも知っておかないと!ってことだ!ってなりました。
そこで便利なのが、私が月額約1000円払って利用しているProgateです。(課金したくない方はごめんなさい)

無課金派だと、ドットインストールおすすめされてます!!
私は動画見てると眠くなっちゃうので、みませんが、Schooとかも有名ですよね。
どちらも課金版あるかと思いますが、無課金でもコンテンツ多めだと思います。
Reactの勉強を最初にするのはやはりProgateがおすすめです。
これだけわかりやすかったら約1000円払ってもいいんじゃないかなと思います。

なので、勉強順でいうと、
1. 動画コンテンツ等でJavaScriptについて触れる
2. Reactやってみる
だと思います。

ある程度勉強やってみたら、実際にReactをインストールしてみましょう!!

環境構築

Windows
Reactの開発環境をWindows上に構築する。
Mac
macで1からReactの環境構築をするのだ

私はWindows版の上記サイトで環境構築していたのですが、

npm install -g create-react-app

これをコマンドで実行したところ、プロキシがうんたら言ってるエラーが出てしまいました。
会社のPCで環境構築していたのでなんとなくこうなるだろうとは思っていたのですが、プロキシが関わる時の
私の無力さ半端ないです。いきなりラスボスでてきたような気持ちに。

とっさに同期に「たすけてたすけてもういのちがない私はプロキシに破壊される」といったところ、
教えてくれました。ありがとう人生が始まった...

①まず現在のプロキシの設定を確認する

npm config ls -l

proxyの欄を見るとnullになっていたので、設定されていないことがわかります。

②プロキシを設定する
プロキシサーバーを使う際に役立つ!npm proxyの使い方【初心者向け】より)

npm -g config set proxy http://<プロキシのホスト>:<ポート番号>

※上記<>は外してください。
※ポート番号などの情報の見方がわからない方はWindows10のプロキシ設定を確認する方法などを確認してください。

③プロキシが設定されているか確認する

npm config list

こちらのproxyの欄にちゃんとホストとポート番号が書いてありました!これでプロキシをたおせた!
なので環境構築再開して。。。
。。。。。。。。。できた!!!!!!!(祝杯)

ということで今日はここまで。
おつかれさまでした。
次回もReactについて書いていきたいと思います。

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1