はじめに
今回はReactの学習方法について解説します。
これからReactの学習を始めようとしている方の参考になれば幸いです。
前提
①Html & CSS を習得している
これが最速！Html & CSS 学習方法この記事を読むメリット ・Html & CSSを効率よく学習する方法がわかる ・具体的な教材やアクションプランがわかる ・どこまで技術力が上げれば、Html & C…magicgifted.com
②JavaScriptを習得している
JavaScript入門！学習方法を現役フロントエンドエンジニアが解説！はじめに 今回はJavaScriptの学習方法について解説します。 これからJavaScriptの学習を始めようとしている方の参考になれば幸いです。 前提 ①Html & …magicgifted.com
Reactの学習方法
ステップ1：プロゲートの「React」コースを一周する（スキップ可）
React入門Reactは、Facebook（現Meta）が開発した、ユーザーインターフェースを効率的に構築するためのJavaScriptライブラリです。コンポーネント指向の設計により、複雑なWebアプリケーションでも再利用性と保守性の高い開発が可能です。高速な描画を実現する仮想DOMや豊富なエコシステムを備え、フロントエンド開発の標準技術として世界中で広く採用されています。ProgateのReactコースでは、プログラミング初心者でもわかりやすいスライドと演習を通して、Reactの基本構文からコンポーネント設計、状態管理までを無料で学び始めることができます。モダンなWeb開発を支えるReactを学び、実践的なフロントエンドスキルを身につけましょう。prog-8.com
プロゲートはゲーム感覚でプログラミングを学習できます。
超初心者向きの良質な教材です。
自信がある人は飛ばしてもOKです。
プロゲートで予習することで、ハードルが大きく下がります。
こちらの教材は非推奨と言う方が多いです。
理由は書き方がやや古いからです。
関数型ではなく、クラス型で書かれています。
しかし、古い書き方で運用されているアプリが実務ではたくさんあります。
学習しておいて損はない知識です。
ステップ2：udemyの「【2024年最新】React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript」を一周
https://www.udemy.com/course/react-complete-guide/?couponCode=JPLETSLEARNNOWwww.udemy.comこちらの教材でReactの基本を習得できます。
こちらは現時点では、最新の書き方で書かれているため安心です。
Reactは進化の速い言語です。
常に最新の教材で学習することに注意しましょう。
ステップ3：自分でアプリを作ってみる
Reactの基礎を習得したらここで一度自分でアプリを作ってみましょう。
簡単なもので結構ですので、アプトプットすることが大切です。
一例ですが、楽天トラベルAPIを使ってみてはいかがでしょう？
検索文字を送信すると、宿泊施設の情報が返ってきます。
これでオリジナル宿泊施設検索アプリが作れます。
自信があれば、firebaseを利用して「認証機能」や「お気に入り機能」の実装にも挑戦してみるのも良いです。
完成度が高ければ、面接時にポートフォリオとして提出可能です。
https://webservice.rakuten.co.jp/documentation/simple-hotel-searchwebservice.rakuten.co.jp
おわりに
①教材で基礎をインプットする
②自分で何かを作ってアウトプットする
③わからない部分はその都度ググる
これがプログラミング学習の基本です。
補足
ポートフォリオの評価されるポイントTop16！フロントエンドエンジニア必見！はじめに 今回はフロントエンドエンジニアとして転職する際の、ポートフォリオの作り方について解説します。 技術選定やアプリ設計の参考になれば幸いです。 ポートフォリオの評価されるポイ…magicgifted.com
