BEST

Programming

Front-end

React を学びながら作成する: 基本

Name: React を学びながら作成する: 基本
Price: 33000 KRW

リアクトを最も簡単かつ迅速に学べるリアクト入門講義です。トイプロジェクトを作りながらコンセプトと実戦感覚を身につけ、配布まで3時間で完成するアルチャ講義！初級、中級、上級のシリーズの最初のレッスンです:)

（4.8）受講レビュー 177件

受講生 1,578名

jayjinjay

차근차근

토이프로젝트

3시간 만에 완강할 수 있는 강의 ⏰

React

JavaScript

学習した受講者のレビュー

こんなことが学べます

React 開発
フロントエンド開発
Web開発
私だけのトイプロジェクト
バックエンド連携

初めて出会うリアクトReact、
最も簡単かつ迅速に終了するあなたのために！

今フロントエンド
リアクトが大勢✨

現在フロントエンド陣営で最もよく使われるライブラリー、リアクト！
リアクトを使用すると、純粋なJavaScriptだけで制御する複雑なモダンなWebアプリをコード数行で簡単に管理できます。

ところで…いざリアクトを核心だけ早く学ぶのは容易ではありません。なぜですか？

今、皆さんの悩みではありませんか？

フォローするのに時間がかかりすぎる
プロジェクトは負担です。
すぐにコアだけを学びたい！

リアクト一つを学ぶのが敢えて
複雑な他のスキルまで扱うって？
HTML / CSS / JSだけを持ってみることはできませんか？

リアクトを学ぶとしても
いざ実務で最もよく使われる機能を
自信を持って書けなかったらどうしますか？

リアクトを学ぼうとしています。
難しいショートカットや概念、用語が多いと
進歩に追いつくのは難しいと思います。

もし私の話のように、
初心者のための本物のリアクト入門講義に会うとき！

コアだけを収めた！
初心者の目の高さにぴったり
リアクトの整数。

文法だけを身につけてみると、実務でどのようにリアクトを活用すべきかという感覚をつかみにくいです。
この講義では、リアクト実務開発に必要なすべての基礎概念をトイプロジェクトを通じて簡単かつ迅速に習得します。

効果的な学習のための4つのコアポイント！

コアだけがすっぽり！

実務に必要なリアクトの核心概念を3時間以内に順番に学ぶことができます。

自分で確認してください

概念をよく理解したか、コースの途中ごとに実習クイズ/レビューを通じて自分でチェックしてみることができます。

初心者に配慮した講義

Node.js、NPM、ES6+など初心者にとって難しい技術要素は除外しました。その代わりによくわからないショートカットや用語、概念説明を中途中一緒に伝えて簡単に理解できるようにお手伝いします。

実務に活用できるように

準備された教案を読むのではなく、ライブコーディングで結果を目で確認できます。実際のAPIを連動してサーバー開発者とのコラボレーション過程も味わえ、完成物を配布してポートフォリオとして活用することもできます。

挑戦！猫のチャットルームアプリを作る😺

_{HTML、CSS、JavaScriptだけ知ればOK！
簡単なWebアプリケーションを自分で作成してください。 (リンク)}

あなたのリアクト入門、
最も簡単にお手伝いします！

8年目のフロントエンド開発者、 Jin Yurimです😊

現在のフロントエンド開発者
「チーム開発のためのGit、GitHubを始めよう」著者
サムスン電子、フェイスブック、IBM、高麗大学などの技術講演多数
トス開発者カンファレンス「リアクトコードで学ぶ Frontend clean code」講演進行
技術ブログ

平均星印4.9★, 160件以上のレビューが証明されています。

本当に親切で詳しくひとつずつ教えてくれて属性課外を受ける気分でした。

聞かなかったら無駄にした時間をこの講義のおかげでセーブできてとても嬉しいです。

親切にじっくりと教えてください。

今後、他の講義を掲載してもすぐに購入する予定です。良い講義ありがとうございます😍

_{Inflearn [チーム開発のためのGit、GitHub入門]講義に残してくれた受講評です💌}

ビジネスフロントエンドの実務家
積極的におすすめしたまさにそのリアクト講義！

よくある質問
集まった💬

Q. フロントエンド開発を始めます。この講義を聞くことができますか？

このレッスンには、HTML、CSS、およびJavaScriptの基本的な知識が必要です。「HTMLはマークアップ、CSSはスタイリング、JavaScriptはページ動作を担当している」という概念と、基本的な文法程度だけ知っていれば受講しても大丈夫です:)

Q. JavaScriptはどの程度知っておくべきですか？

JavaScriptの変数、関数、条件文、繰り返し文、オブジェクトの程度を知っていれば受講が可能です。最新のJavaScript文法であるES6+を知らなくても受講できます:)

Q. この講義を聞くと就職に役立つことができるでしょうか？

Cat Challenge Generatorと呼ばれる簡単なプロジェクトを作成しながら、リアクトの概念と文法に慣れることができます。実際のデータであるOpen APIまで連動し、羽毛ページとして配布するので、ポートフォリオとしてもお使いいただけます:)

学生、就任生の方に講義の金額を支援します💪
収入のない学生や就職準備生の方が負担が少なく講義を聞くことができるように50％割引クーポンを差し上げます。アプリケーションリンク/ お問い合わせ

コミングソーン！
[作りながら学ぶリアクト]は
続きます🏃‍♀️

本講義は、初級・中級・上級で構成されるシリーズの最初の「基礎編」講義です。

こんな方に
おすすめです

学習対象は
誰でしょう？

React を初めて使用する Web 開発者
フロントエンド開発者
Reactで就職準備をしている就職準備生
React を学びたいパブリッシャー
React の文法は理解しているが、実務にどのように適用すればよいかわからない人

前提知識、
必要でしょうか？

HTML
CSS
JavaScript の基礎

こんにちは
です。

4,788

受講生

557

受講レビュー

271

回答

4.9

講座評価

講座

프런트엔드 개발자 진유림입니다. 개발자 특유의 공유 문화와 커뮤니티에서의 바이브를 사랑합니다. 반가워요! 블로그 / 깃헙 / 사운드클라우드

강연 : 삼성전자, Facebook, IBM, 고려대, 이화여대 등 다수 기술 강연

저서 : 팀 개발을 위한 Git, GitHub 시작하기

カリキュラム

全体

37件 ∙ (3時間 26分)

講座資料（こうぎしりょう）:

授業資料

セクション 1．イントロ

3件 ∙ (11分)

1. 1講義紹介
03:30
2. 2プロジェクト開発環境を設定する - VSCode、GitHub
05:10
3. 3 プロジェクト案内
02:40

セクション 2．リアクトはなぜ良いのですか？

5件 ∙ (23分)

セクション 3．リアクトアプリの床から作る

15件 ∙ (1時間 26分)

9. 9コンポーネントとは何ですか？
05:48
10. 10 コンポーネントの作成
08:49
11. 11コンポーネントクイズプール
01:33
12. 12 スタイリング
06:21
13. 13イベントを扱う
06:02
14. 14 useStateで状態を作成する
04:22
15. 15ステータスプル
06:52
16. 16 useStateクイズプール
01:56
17. 17 リスト
06:36
18. 18学んだ概念を組み合わせて機能を追加（状態、prop、イベント、リスト）
06:36
19. 19フォームを扱う
06:07
20. 20フォームを確認する
07:50
21. 21コードの整理
04:21
22. 22ローカルストレージにデータをシンクする
06:42
23. 23ローカルストレージにデータをシンクする2
06:23

セクション 4．これまでに作成したアプリをデプロイする

1件 ∙ (9分)

セクション 5．中間整理

2件 ∙ (12分)

セクション 6．リアクトアプリに呼吸する

7件 ∙ (35分)

セクション 7．実務開発環境の作成

4件 ∙ (26分)

講座掲載日:

最終更新日:

受講レビュー

全体

177件

4.8

177件の受講レビュー

hershe
受講レビュー 4
∙
平均評価 5.0
5
100% 受講後に作成
インフラでいくつかの講義を経てきましたが、このように楽しく勉強したのは初めてです。毎日コードを見るたびに、顔が土色になっていったのですが、先生の声も若々しく、本音を隠せず猫可愛いです。特にこれまで意味がなくて追いついた命令語のようなものを解いて詳細に教えてくれてああ、これはこういう意味だったんだ！基礎からじっくり教えてくれて簡単について行けました。講義に必要だが難しい概念は深く掘り下げることなく、別に勉強できるようにリンクを分けてくださったことも非常に大きな助けになりました。一番初めて学ぶ時は猫の写真3枚持ってちゃんをどう作るか考えましたがAPIの使い方まで教えてくれましたね。本物の本当のことを学びました。先生、ぜひ中級、高級講義まで撮っていただき、明けましておめでとうございます。 ㅎㅎもう一度聞いて個人プロジェクトも作って配布してみましょう！ありがとうございます！
- jayjinjay
  知識共有者
  アイグㅠㅠ感謝です…ありがとうございますㅎㅎおかげで中高級講義も撮る力が出ますね！明けましておめでとう〜
jaysss
受講レビュー 6
∙
平均評価 4.8
5
100% 受講後に作成
リアクト公式文書で入門しにくい人（私含む）に役立つ講義です:) 総時間が短く疲労も少なく、繰り返し学習するのに最適です！そんなウェブアプリが作られるのもとても良いですね！
daehyun7973
受講レビュー 5
∙
平均評価 4.8
5
100% 受講後に作成
他の場所でreactをcreate-react-appを通じてすぐに作って学んだが、なぜこのように書くのかよく分からず、すぐにやめたが、ユリム様の講義を通して基礎から学ぶことができました。
gkfl88093343
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成
リアクトルというのを聞くだけで、本を見ても理解できなくてインフラで有料講義を聞きました。初心者の立場でわかりやすく、授業内容も上手くできて満足していました。今後中級編、高級編も講義があれば聞きたいほど満足しました！是非着実に講義上げて頂ければありがとうございます👍
lhb19951521
受講レビュー 6
∙
平均評価 5.0
5
49% 受講後に作成
まだ前の受講中ですが、本当に親切でスッキリし、最近リアクトトレンドまで説明してくださってとても良いです。そして声がとても可愛くて軽快な感じなので眠くもなくずっと集中が上がりますㅠㅠ！おかげでリアクトの第一印象がとても良いです。インフラで非常に満足しながら聞く講義の一つなので、中級と上級レベルも早く上がってほしいです。（中級と高級は総講義時間が少し長いですか？明確ですが短い感があるのがちょっと惜しかったので受講料が高くても講義が長ければいいです）良い講義ありがとうございます✨

期間限定セール、あと14:06:50日で終了

￥4,042

22%

￥5,221

jayjinjayの他の講座

知識共有者の他の講座を見てみましょう！

チーム開発のためのGit、GitHub入門

jayjinjay

個人プロジェクトからビジネス開発まで、チーム開発に不可欠な技術であるGitとGitHubを絵を通して簡単に習得します。初めて身につける方から実務事例が気になる方まですべて聴くことができます。 CLI、GUIをすべて使って勉強します。

입문

Git, GitHub, Version Control System

チーム開発のためのGit、GitHub入門

jayjinjay

似ている講座

同じ分野の他の講座を見てみましょう！

React基礎入門コース1

simplecoding

絵で学びながら、Reactの基礎概念を明確に理解できる講義

입문

React, react.js, frontend

React基礎入門コース1

simplecoding

React就活生のためのZustand実戦入門ガイド

devforgoal

この講義は、受講者がZustandの基本原理から実践応用まで体系的に学習できるよう支援します。

입문

React, zustand

React就活生のためのZustand実戦入門ガイド

devforgoal

モダンJavaScript（ES6+）の基本

tonextday

4つのコースで構成されたJavaScriptバイブルコースの3番目のコースです。 JavaScriptの仕様の95％以上をカバーしています。 ES6+環境で新しいパラダイムのプログラムを開発できます。

초급

JavaScript, ES6

モダンJavaScript（ES6+）の基本

tonextday

クリーンアップ JavaScript: ジャンプアップ!

tonextday

JavaScript 最終コース! ES2025基準の実行コンテキスト構造と方法、Event Loop、マルチスレッドを扱います。JavaScript言語に含まれる言語文化を扱います。

초급

JavaScript

クリーンアップ JavaScript: ジャンプアップ!

tonextday

文法を勉強した後、JavaScriptプロジェクト101

erumcoding

🚀JavaScriptの文法を勉強したばかりのコリンズに適したミニプロジェクト実習講義です。

초급

JavaScript

文法を勉強した後、JavaScriptプロジェクト101

erumcoding

しっかり学ぶJavaScript: 初心者から実務者まで完璧攻略 Part1 - 【基礎編】

nhcodingstudio

この講義を通じて、受講生は開発環境の設定から変数、条件文、関数、オブジェクト、配列などJavaScriptの基礎と深化概念を幅広く学習します。実習とクイズで丁寧に復習し、ウェブ・モバイルの実務にすぐに適用できる問題解決能力を身につけることができます。

입문

JavaScript, HTML/CSS, Web Application

しっかり学ぶJavaScript: 初心者から実務者まで完璧攻略 Part1 - 【基礎編】

nhcodingstudio

フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]

johnahn

この講義を通じてリアクトとファイアベースを利用してチャットアプリケーションを作成することができます。

초급

React, Firebase, Web Application

フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]

johnahn

ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

webstoryboy

ウェブデザイン機能社出題基準 2023年バージョンに合わせて誰でも合格できるように製作しました。 5種類を学び、素早く合格しましょう！

초급

HTML/CSS, jQuery, JavaScript

ウェブデザイン機能士資格証明に備え（2023年出題基準反映バージョン）

webstoryboy

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

초급

React, Next.js, expo

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

Firebase シリーズ #1：ソーシャルログイン・電話番号・位置認証完全ガイド

dakgangjung123

🔥 HTML + Tailwind CSS + ピュアJavaScriptだけで完成させるFirebaseユーザー認証！ソーシャルログイン・電話・位置認証まで、複雑なバックエンドなしに簡単かつ迅速にアカウントシステムを構築します。

초급

HTML/CSS, JavaScript, Firebase

Firebase シリーズ #1：ソーシャルログイン・電話番号・位置認証完全ガイド

dakgangjung123

クリーンアップ JavaScript: ベース構築!

tonextday

考え方を扱います。JavaScript の核心と本質を論理的に整理できます。JavaScript の経験を整理して、考え方を自分で整理できます。JavaScript の技術論理を確立できます。JavaScript 全体を見渡す視野を広げることができます。JavaScript の技術面接問題に対応できます。

초급

JavaScript, Interview, Tech Interview

クリーンアップ JavaScript: ベース構築!

tonextday

Node.js サーバーエンジン作成 – Express.js クローンで学ぶフレームワーク設計

nhcodingstudio

Express.jsを使用するレベルを超えて、実際にその内部エンジンをゼロから最後まで直接実装し、真のサーバーの動作原理を体で習得する講義です。ルーター、ミドルウェア、リクエスト-レスポンスオブジェクト、静的ファイル処理、テンプレートレンダリングなどExpressのすべての構成要素をゼロから直接作成し、サーバー開発者として成長する経験を提供します。

초급

JavaScript, Node.js, Express

Node.js サーバーエンジン作成 – Express.js クローンで学ぶフレームワーク設計

nhcodingstudio