河合企画

たかし君にReact学習の進め方を教えてあげよう(学習ログ)

たかし君、そういえばこの間、「フリーランスエンジニアとして活躍して月収100万円以上稼ぎたい」って言ってたっけ。そんなたかし君は、Reactを勉強するといいかもしれない。たかし君がReactを勉強すると、こんないいことがあるよ。

  • 近年のフロントエンド開発のトレンドはReact
  • Reactの案件は高単価なものが多い
  • Reactができると案件がとりやすくなる

とはいえ、「どうやってReactを勉強すればいいんだ???」って思ってるよね。たしかに、いきなりReact始めろっていわれても、どこから手を付けていいかわからないと思うから、この記事でたかし君のReact学習の進め方について紹介していこうと思うよ。

さらっと読んでいたReactの公式ドキュメントからリンクが引いてあったとあるサイトが、初心者にもわかりやすくReactの導入について書いていそうだったから紹介しようと思う。僕もこれから勉強していくクチだけど、このサイトをベースに勉強を進めていけば、導入はできそうな予感がする。

Tania Rasciaさんという方のサイトで、まださらっとしか覗いていませんがかなりわかりやすく解説していただいている印象。英語のサイトですが、Chromeの翻訳機能つかえば英語の読めないたかし君でも問題なく進めていけると思う。(翻訳精度のせいか、分かりにくい部分があったら教えてね。)

Reactマスターへの道

一歩ずつ進めていきます。。

【済】(Reactの前に)Vanilla JavascriptでAPI接続をする

Reactを始める前に、まずはJavaScriptのおさらいをするのが良さそうです。Vanilla JSでAPIへの接続を試みます。

こちら、作りました。ちゃんとお手本通りに作れました。👏

JSでAPIからデータ取得して表示する方法について学べました。

VSCodeのテーマのインストール

タニアさんのテーマを入れます。React Optimizedされてるっぽい。ちなみにこれまで使ってたテーマはKTRZさんのKTRZ Monokai。(これも結構いいのでおすすめ)

CDNでReactをちょっぴりはじめる

↓できた。Hello Worldした

React環境を作る(CDN使わない)

npxで普通にはいった。ということでこちら進めていきます。

フォームデータの送信までできた

一応作ったけど途中で写経になった。どっからか理解が追いつかなかったから復習します

公開日: 最終更新日:
© 河合企画