
実務中心! FE入門者のためのReact
IT Share
講義をすべて聞き終えると、自ら一つのウェブサービスを開発できる能力を習得できます。
Cơ bản
React, Node.js, Redux
アイデアはあるけど、アプリをどう開発したらいいかわからなかった方々、 実践プロジェクトを4つ作りながら、アプリ開発をマスターしてみましょう!
受講生 122名
難易度 入門
受講期間 無制限
実務 100% 活用 React Native 文法
リアクト実践文法
効率的な開発に最適な開発環境設定
APIを介して外部情報を取得
実際のアプリでよく使われる実践的なスキル100以上
ログイン機能実装
ㄱ新しくなった講義に戻りました。
12月撮影 / 1月編集
100%新しく再誕生した講義に今すぐ会いましょう。
React Nativeを使用する最大の理由を一度まとめました。
🏢土X、倍Xの民族、インスタグラムなど、世界1,000以上の大企業が使用するReact Native
ㅣ クロスプラットフォームとは? Android、iOSすべてを一度のコードで開発できる技術
🔯クロスプラットフォームであるReact Native =>最速かつ簡単に2つのOSを開発可能
🕸GithubとStack Overflowで活発に活動する10,000人以上の開発者
🔭大規模コミュニティのサポート=>多様に更新されるプラグイン、機能
🔥排他的なホットリロード機能:開発中にコードを変更するたびに即座に変更を確認できます
🛠MVP (最小機能製品)に便利
🔧ネイティブコンポーネントを使用 => 優れた性能
🔗JSで書かれたコードがネイティブAPIと直接対話する=>パフォーマンス低下X
⚽ アニメーション、ジェスチャー処理で優れたパフォーマンスを発揮=>シームレスなユーザーエクスペリエンスを実現
浮上雲だけをつかむ抽象的な理論中心の授業ではなく、受講者が実際のプロジェクトを開発し学ぶ
実習中心の授業で講義を構成しました。
講義で「こうすればこうなる」とだけお知らせすれば、実習中心の授業でも役に立ちません。
本番でどこで使うべきか、本当のアプリでどんな機能で使われるのか
実務で100%活用できるようにお知らせします。
この講義はReact Nativeの無数の実戦スキルをお知らせする講義ですが、
受講難易度は入門です。それだけ講義では、受講者の方々がアプリ開発分野について
まったく分からない状態になっても、すべての概念を理解できるように、概念を確実にお知らせします。
Inflearn他の講義とこの講義を比較しました。
⛔抽象的な概念だけを勉強する理論講義
🔻聞くと聞くほど理解できない講義
🚫なぜ、どのような状況で使用するのか教えていない講義
❌完全なコードを提供しない講義
⚠体系的でない実験的構成の講義
📃説明のない講義
💸基本3万ウォン台を超える受講料
✅実際のプロジェクトを作成しながら学ぶ実践講義
🔺基本的な部分さえ絶えず思い出させ、脳に直接保存される講義
💡 WHY、WHENをしっかり知らせる講義
📔完全なコードを必ず提供する講義
🪜基本期からしっかりマスターする体系的 講義
📚基本的な理解から入る説明をする講義
👌 1時間あたり1600ウォン台、チキン一匹の値で講義生涯所蔵
セクション別に講義を簡単に紹介してみました。
- プレビューセクション
- 講義構成説明
- プレビューセクション
-変数、関数などの基本的なコーディング知識の説明
- React Nativeを見る
- 開発環境の構成
- アプリの構築方法
- React Nativeの基本コンポーネントを見る
🍌 JavaScriptの基礎
🏃➡️ Node.js create-expo-app はじめに
🗂ファイル構造の理解
🧐 Text、Viewなどの基本コンポーネント
🔘TouchableOpacityボタン
💡 onPress & 関数連携
🔐 useState 深化の活用
🤼♂ useState デフォルトの完全活用
🤔 useState & if 文連携
🫗nullの理解
🎛パラメータの活用
🔄️値初期化の実装
📚 Array 生成 & map 連携
⚪React Native基本スタイリング
💅 Styled components
📕 15以上の基本スタイル
✴コアソート文法
🔨スタイルを使用したUI補完
🟦 TypeScriptの基礎
🏃➡️ community cliを始めよう
🪛外部ライブラリの導入
👇 React Native Picker
⌨ input コンポーネント
❇ユーザー入力値を保存
📚リスト変数の生成
❓ boolean 型の変数
🪬論理演算子(&&)の活用
⚒ map 関数の活用
🟰同一言語翻訳防止(三項演算子)
🔲モダンなカードスタイリング
💅 Styled-components
✴コアソート文法
🔨スタイルを使用したUI補完
🫸 margin基本スタイリング
🟦 TypeScriptの深化
🪛外部APIの導入+ APIの概念
🔧 Fetch VS Axios
🛑 Node.js コンセプト
🚩ユーザー位置権限のリクエスト
🗺ユーザーの場所の天気
📷 Image コンポーネント
🪧 API & RN swiper連携
🛡データ検証(三項演算子)
🔗リンク接続ボタンを追加
🌟 useEffect APIリクエスト
🔲モダンなカードスタイリング
💅 Styled-components
✴コアソート文法
🔨スタイルを使用したUI補完
🫸 margin基本スタイリング
🪂 padding基本スタイリング
🔘カードボタンスタイリング
🟦 TypeScriptマスター
📇独自のコンポーネントの作成後に使用
📚 map 関数 & API 連携
⬜プレビュー(ロード前)コンポーネント
🔗 Linking接続&React Native Vector Icons連携
🔖データ有効条件付きアイコン/バッジを表示
🏃➡️ useNavigationによるBottom Tabs登録画面の移動
🪧カードバッジの作成
📜縦 ScrollView & 横 FlatList 接続
🔍検索APIによる検索機能の実装
🔲深化カードスタイリング
💅 Styled components
✴コアソート文法
🔨スタイルを使用したUI補完
🔍検索バースタイリング
🧱 borderBottomによる区切り線スタイリング
⚪適切なfontWeight設定
👤トレンディなプロフィールタブスタイリング
🔗センスのあるタブショートカットスタイリング練習
📖 Reduxの構造を含む完全な理解
📜効率的な基本枠組みの構成
🔧効率的なSliceコンポーネントの使用
🫙 redux-persistによる状態保存の練習
🔌 redux-persist & MMKV連携練習
⚡MMKV &Reduxのみを使用した状態管理
🔗自己開発ログインボタン
⚠各種エラーに関する反応の実現
🫙ログイン時にユーザー情報を保存する
🔌保存したユーザー情報を渡す
👤渡されたユーザー情報を [プロフィール] タブに表示
🌉ログインするかどうかに応じて画面を表示
🤖Android展開プロセス
🍎iOS展開プロセス
🐈⬛ Github展開プロセス
♋ Redux基礎から深化まで
⚛ React-Redux
➿ Redux-persist
⚡React Native MMKV
最後に、この講義を終え、皆さんと一緒に学んだことを振り返るセクションです。
[付録] この講義を受講した後、どんな道を行くべきか悩んでくださる方のためにテクトリシリーズを用意しました。
電卓アプリ画面
Arrayの作成
map関数
useState
switch
自己開発関数
基本的なコンポーネント
初期化ロジック
四則演算の実施
基本的なスタイリングの感じ
Componentの押さえ防止など補完作業
開発&スタイリング連携の基礎を最も効率的に学習
開発過程で発生する様々な問題提示後補完
JSの基本スキルによるロジックの実装
翻訳アプリ画面
Picker
カードコンポーネント
Array & Map
TextInput
外部ライブラリの使い方
三項演算子
使用するライブラリの構成について
ユーザー入力値の追跡
同じ言語選択の完全防止
margin、paddingを適切に活用したスタイリング
ユーザー対話
実用的なアプリのトピック
開発者の意図を100%反映できる開発
UIで最も頻繁に使用されるカードデザイン
天気アプリ画面
GeoLocation
APIリクエスト
カードスタイリング
リンク
Swiper
Map
useEffect
非同期処理
イメージ
ユーザーの場所の天気を表示
APIリクエスト時に必要なデータをユーザーから取得
APIリクエストの結果から必要なデータのみを選択する
useEffect フックを活用して最も早い API からリクエスト
詳細を見るボタンによるユーザーのやりとり
実用的なアプリのトピック
ユーザーを中心に機能するアプリ
便利なライブラリであるSwiperの使い方を習得
コインアプリ画面
Bottom Tabs Navigation
Native Stack Navigation
状態管理
イメージの深化
Google ログイン
プロフィール写真、名前、メール情報を表示
ログインするかどうかチェック
カードバッジ
APIの完全活用
各種コンポーネントにある外部サイトリンク
完璧なカードコンポーネントスタイリング
検索機能
難しい難易度の開発により確実な実力向上
実践的なスキルを確実につかんでいくプロジェクト
はい。可能です。この講義はReact Nativeの分野に深く重点を置いた講義ではなく、基本的なプログラミング関連常識を誰よりも簡単に教えてくれるので、コーディングに初めて接する方も大きな難なく講義を受講することができ、コーディング勉強を少しでもしてみたら講義を簡単に聞くことができます。
いいえ。 React Native は React がベースであるフレームワークなので、講義には React の基礎文法説明が含まれています。 Reactを全く知らなくても、このレクチャーではReactとReact Nativeを学ぶことができます。
はい。更新されます。
ライブラリの廃止、講義問題などに応じて講義は継続的に更新されます!
最近の更新:2025-02-27
講義はWindows 11 Home環境に行われます。
macOSをお使いの方でも、講義を問題なく聞くことができます。
オペレーティングシステムとバージョン(OS):Windows 7以降/ macOS 10以降/ Linux
使用ツール:Android Emulator、Android Studio、VSCode、Node.js、JDK
必要ストレージスペース:最小50 GB
各講義ごとに講義の下部に重要な資料があります!もし講義で説明が省略される開発用語が登場したり、コードなどが必要な状況では講義の下部を参考にしてください。
このレッスンは、Reactの基本的な文法とReact Nativeを学ぶレッスンです。 Reactを知っていれば講義を聞くことができますが、Reactを知らなくても問題なく講義を聞くことができます。
この講義は2024年12月~2025年1月に企画して録画しました。
このレッスンは、あなたの受講評価とReact Nativeバージョンのアップデートに従って着実に更新されます。
練習しながら講義を聞いていただきありがとうございます。
本講義は質疑応答を支援し、コミュニティに気になることを質問してください。
本講義は、講義を決済した受講者本人のみ受講しなければならず、
共有と二次創作は禁止です。
このレッスンではWindows(Android)環境を使用します。
macOS(iOS)環境でも十分に実習可能です。
学習対象は
誰でしょう?
自分のアイデアを直接アプリにしたい方
アプリ開発分野に飛び込みたい方々
自分のアプリを作ってみたい方
アプリ開発者になりたい方々
アプリ開発を早く学んで、サイドプロジェクトを作りたい方
アプリ開発分野に興味があった方々
前提知識、
必要でしょうか?
React.js (選択)
Javascript (選択)
全体
119件 ∙ (13時間 26分)
講座資料(こうぎしりょう):
1. 講座紹介
05:56
5. [Windows] 開発環境 構築
18:26
6. [macOS] 開発環境設定
12:40
7. React Native 入門
15:40
8. プロジェクト構造理解
13:07
全体
8件
2.9
8件の受講レビュー
受講レビュー 6
∙
平均評価 4.8
受講レビュー 1
∙
平均評価 5.0
5
映像全体的に検数ちょっとやり直してください。
こんにちは、知識共有者チョン・ヒョヌです。 コメント作成前 一度映像レビューにおいて未熟だった点心からお詫び申し上げます。 講義を全体的に検討してみたところ、映像編集部分において受講生の方々の早い受講に重点を置いて、いわゆる映像カット編集のミスが多い部分があったようです。 これについて本当に心からお詫び申し上げます。 9月以内に映像全体を見直した後、安定した映像のための再編集および映像内に変化のすべての説明を追加して講義を修正する計画です。 受講生にとって不足した講義を出した点についてお詫び申し上げます。また、不足した講義であるにもかかわらず高い評価をいただいた点に非常に感謝したいと思います。 9月以内に早いうちに講義を修正させていただきます。ありがとうございます。
受講レビュー 4
∙
平均評価 4.0
1
講義のあまりアップロードしていませんか?
こんにちは、知識共有者チョン・ヒョヌです。 申し訳ありません😢.. 現在、ライブラリ廃止ガンで講義を完全にリニューアルしなければなりませんが、私の個人的なスケジュールとリニューアル期間と完全に重なりましたよㅜㅜ だから今順次講義をアップロードしているので、この点を参考にしていただきありがとうございます。一応できるだけリニューアル期間をタイトに取って進めていますので、少しお待ちいただきありがとうございます。申し訳ありません。この点ご了承ください。
受講レビュー 9
∙
平均評価 4.3
1
まず講義者よりははるかに及ばない実力なので、講義をまず精読よりは全体の講義をクイックに移動もして見てみました。 講義者には嫌な部分になるでしょうが、知らない人の立場で申し上げます。 1.講義の音に問題があります。 2.画質はそれほど問題にはなりませんが、reactを全く知らないのですが、リファレンスプロジェクトがなく、またreact nativeを今回初めて見る人としては行くことは容易ではありませんね。講義が途中で飛び越える部分があります。もちろん、私が理解できず、そんな部分かもしれませんが、前講義と後講の間に録画されない部分が明らかです。そして講義中にobsツールチェンジがあまりにも出てきますね。 3.一人でする講義で感じられました。時間が迫っていてそういうのかはわかりませんが、見ることを理解させるよりは、今後進度抜くような感じを受けて少し残念です。 結論として〜 得られた部分は、react nativeがこうして生じたことを知ることになりました。そして、モバイルアプリがこのようなものを使用していることも知るようになりました。ああああああああああああああの講義でこんなことを見たのに参考になりそうです。 ありがとうございます。
こんにちはnannyahoo、知識共有者チョン・ヒョヌです。 まず、ライブラリの廃止により、講義リニューアルの中で貴重な時間をいただき、まだリニューアルされていないいくつかの講義まで聞いていただき、大切な批判の言葉をいただき誠にありがとうございます。 ディテールを完璧に気にしなかった講義があった点に心からお詫び申し上げますが、間違っておっしゃってくださったことでもなかったのに、あまりにも早く進道を扱っていたリニューアル以前の講義たちが続き、また早い編集があったリニューアル以前の講義もありました。しかし、今回のリニューアル講義では、教えてくれた問題部分も完全に改善された講義です。講義リニューアルは今週日曜日の「9/22」に完了する予定ですので、ご参考お願いいただきありがとうございます。 満足のいく講義を提供できなくてよろしく、より良いリニューアル講義でお会いしましょう。
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!