[React/VillaJS] Tự tạo các phần tử UI Phần 2

Name: [React/VillaJS] Tự tạo các phần tử UI Phần 2
Price: 69300 KRW
Rating: 5 (8 reviews)

Bằng cách tạo các thành phần UI đại diện trong React và các phiên bản JavaScript thuần túy, hãy trải nghiệm nhiều quan điểm và phương pháp khác nhau bằng API Web, đồng thời cải thiện hơn nữa kỹ năng phát triển giao diện người dùng của bạn.

(5.0) 8 đánh giá

312 học viên

jaenam

실습 중심

바닐라JS

React

vanilla-js

TypeScript

DOM

Đánh giá từ những học viên đầu tiên

Bạn sẽ nhận được điều này sau khi học.

Phản ứng kiến thức làm việc
API DOM
Khả năng sử dụng nhiều API Web khác

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

Nhà phát triển front-end đầy tham vọng
Nhà phát triển front-end cơ sở

Cần biết trước khi bắt đầu?

HTML
CSS
JavaScript (ES6+)
Phản ứng
Bản đánh máy

Xin chào
Đây là

32,847

Học viên

689

Đánh giá

395

Trả lời

4.8

Xếp hạng

Các khóa học

안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

원티드) 신입 개발자, 뭘 공부해야 하죠? https://www.wanted.co.kr/events/22_02_s01_b01
인프런) To. 주니어 개발자 https://www.inflearn.com/pages/for-junior-developers-20211207
벤처이몽) 벤처/스타트업 시니어 개발자와 주니어 개발자의 솔직담백 토크쇼 https://youtu.be/6D7I4NNFHsU?si=nD6-F7EU_ZtYqDLI
바닐라코딩) 프론트엔드 개발자 취업 마인드셋 https://youtu.be/zX68pyoLctI

Chương trình giảng dạy

Tất cả

42 bài giảng ∙ (10giờ 35phút)

Tài liệu khóa học:

Tài liệu bài giảng

Phần 1. Intro + Cài đặt

5 bài giảng ∙ (1giờ 4phút)

Phần 2. Quán ăn nhẹ

4 bài giảng ∙ (1giờ 12phút)

6. Snack bar ngữ cảnh (1/3)
29:43
7. Snackbar (2/3) Sử dụng createPortal
12:49
8. Snackbar (3/3) Phiên bản JavaScript thuần túy
20:20
9. Ôn tập #1. Review Snackbar + Q&A - Hiệu suất Observer
09:28

Phần 3. 모달 Modal

4 bài giảng ∙ (2giờ 1phút)

10. Modal (1/4) áp dụng ngữ cảnh
57:22
11. Modal (2/4) ứng dụng createPortal
20:53
12. Modal (3/4) Phiên bản JavaScript thuần túy
21:33
13. Modal (4/4) Phiên bản HTML Dialog
21:23

Phần 4. Popover

4 bài giảng ∙ (41phút)

Phần 5. Slide ảnh ImageSlide

5 bài giảng ∙ (50phút)

Phần 6. Carousel

6 bài giảng ∙ (1giờ 1phút)

Phần 7. Gallery Gallery

3 bài giảng ∙ (43phút)

Phần 8. SelectBox

6 bài giảng ∙ (1giờ 33phút)

Phần 9. Tự động hoàn thành Autocomplete

3 bài giảng ∙ (50phút)

Phần 10. Danh sách Kéo & Thả Drag & Drop List

1 bài giảng ∙ (13phút)

Phần 11. Toàn bộ đánh giá

1 bài giảng ∙ (24phút)

Ngày đăng:

Cập nhật lần cuối:

Đánh giá

Tất cả

8 đánh giá

5.0

8 đánh giá

wonse
Đánh giá 6
∙
Đánh giá trung bình 5.0
5
7% đã tham gia
単に情報を伝える講義ではなく、受講生とコミュニケーションする感じが入って集中がより良くなる講義でした！！
- jaenam
  Giảng viên
  元税ありがとうございます！スタディと映像はもう少し違うんじゃないですか？ ㅎㅎ
withkey
Đánh giá 2
∙
Đánh giá trung bình 5.0
5
32% đã tham gia
デザインシステムを構築しながら数ヶ月間悩んでいた問題、特にヘッドレス、コンパウンドなどの問題がセクション7ですべて解決されました。から始めて、いくつかのエフェクティブタイプスクリプト、リアクト公式文書スタディ、コンポーネント講義まで..良い講義と資料ありがとうございます。 😭👍
- jaenam
  Giảng viên
  過分な賞賛に身の回りがわかりませんね 😅 役に立ったのは幸いで、今後ももっと面白くて有益なコンテンツを用意しようと努力します！
imhass
Đánh giá 2
∙
Đánh giá trung bình 5.0
5
31% đã tham gia
eddie85
Đánh giá 7
∙
Đánh giá trung bình 5.0
5
100% đã tham gia
UIを開発する際に、ブラウザ、HTML、React、Vanillaを活用する方法と基準がわかる講義でした。付加的に講義を見ながらUI開発をする際の流れを見ることができ、大変 도움이 되었습니다.
zimablue14
Đánh giá 14
∙
Đánh giá trung bình 4.4
5
100% đã tham gia
受講期間が少し残念ですが、内容は100点です。

1.460.430 ₫

Khóa học khác của jaenam

Hãy khám phá các khóa học khác của giảng viên!

[React/VanillaJS] UI要素を直接作成する Part 1

jaenam

代表的なUI要素をReactバージョンと純粋なJavaScriptバージョンにして、Web APIを活用したさまざまな視点と方法を体験し、フロントエンド開発のスキルを一層引き上げてみてください。

초급

React, vanilla-js, ui

[React/VanillaJS] UI要素を直接作成する Part 1

jaenam

リアクト公式文書を一緒に勉強する

jaenam

2023年にリニューアルされたReact公式文書を一緒に学習します。

입문

React, JavaScript, react.js

リアクト公式文書を一緒に勉強する

jaenam

フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る

jaenam

開発から配布まで！一つのサービスを完成するための険しい旅をろ過なくお見せします。初めて使ってみる技術を盛り込んで左衝ウドルウダン湯湯ながらもなんとか迷っていくことができますよ！

초급

React, GraphQL, Firebase

フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る

jaenam

モダンJavaScriptディープダイブスタディ

jaenam

《モダンJavaScriptディープダイブ》本の内容をそのまま追いつくスタディ映像です。

초급

JavaScript

モダンJavaScriptディープダイブスタディ

jaenam

エフェクティブタイプスクリプトスタディ

jaenam

《エフェクティブタイプスクリプト》本の内容をそのまま追従するスタディ映像です。一緒に勉強すればはるかに簡単になります！

초급

TypeScript

エフェクティブタイプスクリプトスタディ

jaenam

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

jaenam

ReactベースのシンプルなSNSサービスを作成しながら、REST APIとGraphQLを練習します。フロントエンド開発のためのバックエンド環境を簡単かつ簡単にする方法を紹介します。

초급

REST API, GraphQL, React

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

jaenam

Javascript ES6+を正しく学ぶ - ボーナス

jaenam

ES6+を正しく学ぶコースは、JavascirptのES6以降の標準ECMAScript仕様について、理論に基づいてES5と異なる点と概念と動作原理を深く教えてくれます。

초급

JavaScript, ES6

Javascript ES6+を正しく学ぶ - ボーナス

jaenam

Javascript ES6+を正しく学ぶ - 中級

jaenam

ES6+を正しく学ぶコースは、JavascriptのES6以降の標準ECMAScript仕様について、理論に基づいてES5とは異なる点と概念と動作原理を深く見ていきます。

중급이상

JavaScript, ES6

Javascript ES6+を正しく学ぶ - 中級

jaenam

Javascript ES6+を正しく学ぶ - 初心者

jaenam

ES6+を正しく学ぶコースは、JavascirptのES6以降の標準ECMAScript仕様について、理論に基づいてES5と異なる点と概念と動作原理を深く教えてくれます。

초급

JavaScript, ES6

Javascript ES6+を正しく学ぶ - 初心者

jaenam

コアJavaScript

jaenam

ES6以前までのJavaScript全体を貫通する重要な概念について、全体的な流れを調べる講義です。

초급

JavaScript

コアJavaScript

jaenam

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

[React/VanillaJS] UI要素を直接作成する Part 1

jaenam

초급

React, vanilla-js, ui

[React/VanillaJS] UI要素を直接作成する Part 1

jaenam

R3F(React + Three.js / Typescript)でインタラクティブなポートフォリオを作る

taejaehan

ReactとThree.jsを一度に！インタラクティブウェブの基礎であるVectorからGSAPまで学べます。3つの事例を一つのポートフォリオに統合するコツとノウハウ！

초급

Interactive Web, Three.js, TypeScript

R3F(React + Three.js / Typescript)でインタラクティブなポートフォリオを作る

taejaehan

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

リアクト＆amp;ネクスト＆amp;リダックス＆amp;リダックスサーガ＆amp; ExpressスタックでTwitterに似たSNSサービスを作成します。最後に、検索エンジンの最適化後にAWSにデプロイします。

중급이상

React, Redux, Node.js

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

[コードファクトリー] [初級] 8時間で終わるコードファクトリのTypescript完全征服フルコース

codefactory

TypeScript(타입スクリプト)をまったく知らない人でも、この濃縮されたTypeScript文法講座で、TypeScript文法の達人になれる講座です。

초급

TypeScript

[コードファクトリー] [初級] 8時間で終わるコードファクトリのTypescript完全征服フルコース

codefactory

Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

gymcoding

最新のNext.js v15 App Routerを学習しながら、Notion基盤の実用的な開発者ブログを一緒に構築する講義です。さらにCursor AI活用法など様々なインサイトも得ることができます。

초급

React, Blog, Next.js

Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

gymcoding

TS/JSデザインパターン with Canvas: ゼロ秒にしっかり学ぶ

zerocho

タイプスクリプト/JavaScriptでペイントを作成し、さまざまなデザインパターンの使い方と長所と短所を学びます。 canvas apiを学べるのはボーナス！

중급이상

Design Pattern, oop, TypeScript

TS/JSデザインパターン with Canvas: ゼロ秒にしっかり学ぶ

zerocho

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

John Ahn

このレッスンを通して、Reddit Webサイトを最初から1つ1つ作成することができます。

초급

Clone Coding, Node.js, React

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

John Ahn

ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

aftercamp

Reactレンダリングの原則、最適化を習得し、実践的な活用とインタビューの準備をしましょう！

중급이상

React, react-usememo, Tech Interview

ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

aftercamp

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

John Ahn

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

초급

React, Firebase, Web Application

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

John Ahn

# [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

dakgangjung123

React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

초급

React, Electron, GUI

# [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

dakgangjung123

一口サイズで学ぶTypeScript(TypeScript)

winterlood

文法を超えて動作原理と概念の理解まで、学んでも学んでも混乱するTypeScript。今、きちんと学んでみましょう！皆さんをTypeScriptウィザード🧙🏻‍♀️にします。

초급

TypeScript

一口サイズで学ぶTypeScript(TypeScript)

winterlood

公式文書で学ぶ本番タイプスクリプト

sowhatcoding

タイプスクリプトを正しく理解するには、公式文書を一度見てください。文書の重要な部分だけがコックを拾い、分かりやすく伝えます。実戦に必要な内容も一緒にお知らせする講義です！

입문

TypeScript, JavaScript, ES6

公式文書で学ぶ本番タイプスクリプト

sowhatcoding

[LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）

LottieFiles

グローバルモーションデザインプラットフォームLottieFilesの公式初韓国語化講座、今Inflearnで独占的にご覧いただけます。講座をすべて受講するとLottieFiles公式修了証を受け取ることができます。

입문

Motion Graphic, Web Design, Lottie

[LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）

LottieFiles

React Native with Expo: ゼロチョから正しく学ぶ

zerocho

Web開発者が(特にReact開発者であれば)本当に簡単にアプリをリリースできる時代になりました。Expoと一緒なら、より一層速くAndroidとiOSアプリの両方をリリースできます。Expoを通じて迅速にアプリまでリリースできる開発者になりましょう。

초급

React, React Native, Hybrid App

React Native with Expo: ゼロチョから正しく学ぶ

zerocho

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

중급이상

React, Next.js, cursor

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

アバターコミュニティアプリ作成 (React Native Expo)

Kyo

React Nativeでアバターベースのコミュニティアプリを開発します。投稿作成だけでなく、コメント/返信、いいね、投票、アバター生成など、完成度の高いコミュニティアプリを構築する過程を学びます。

초급

React Native, TypeScript, expo

アバターコミュニティアプリ作成 (React Native Expo)

Kyo

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

codecamp

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

초급

React, Next.js, expo

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

codecamp

Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

ludgi

Next.jsフルコースをディップして食べよう！ GraphQL、Redis、RabbitMQ、Prisma、TailwindCSS、Docker Compose、Cypress、Prometheus、Grafanaなど、最新技術で実践プロジェクトを完成させ、App RouterとPage Routerの両方を経験できます。

중급이상

Next.js, React, GraphQL

Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

ludgi

完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ

IT s Dev

完全なエンドツーエンド開発者ジャーニー — FastAPI、React、そしてVibe Coding技術を使用して、超高速API、モダンフロントエンドインターフェース、実際のプロジェクト、認証システム、ダッシュボード、そして完全なデプロイメントを構築する。

입문

React, React Native, react.js

完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ

IT s Dev

次世代Node.jsバックエンドサーバーの開発（Fastify＆Prisma＆Typescriptと共に）

Indie Coder

速いスピードを誇るNode.jsフレームワークfastify、orm Prisma、およびTypescirptを活用した最新のNode.jsバックエンドREST APIを学習するコース

초급

Node.js, TypeScript, Prisma

次世代Node.jsバックエンドサーバーの開発（Fastify＆Prisma＆Typescriptと共に）

Indie Coder

[React/VillaJS] Tự tạo các phần tử UI Phần 2

Đánh giá từ những học viên đầu tiên

Bạn sẽ nhận được điều này sau khi học.

Hãy cùng nhau tạo ra nhiều thành phần UI khác nhau nhé!

Tôi giới thiệu điều này cho những người này

Sau giờ học

Tìm hiểu về những điều này.

Phần 1

Phần 2 (bài giảng này)

Các tính năng của khóa học này

Những điều cần lưu ý trước khi tham gia lớp học

Môi trường thực hành

Tài liệu học tập

Kiến thức và ghi chú của người chơi

Bài giảng liên quan 📺

[React / VanillaJS] Tạo các thành phần UI trực tiếp Phần 1

Khuyến nghị cho
những người này

Xin chào
Đây là

Chương trình giảng dạy

Đánh giá

Khóa học khác của jaenam

Khóa học tương tự

[React/VillaJS] Tự tạo các phần tử UI Phần 2

Đánh giá từ những học viên đầu tiên

Bạn sẽ nhận được điều này sau khi học.

Hãy cùng nhau tạo ra nhiều thành phần UI khác nhau nhé!

Tôi giới thiệu điều này cho những người này

Sau giờ học

Tìm hiểu về những điều này.

Phần 1

Phần 2 (bài giảng này)

Các tính năng của khóa học này

Những điều cần lưu ý trước khi tham gia lớp học

Môi trường thực hành

Tài liệu học tập

Kiến thức và ghi chú của người chơi

Bài giảng liên quan 📺

[React / VanillaJS] Tạo các thành phần UI trực tiếp Phần 1

Khuyến nghị cho những người này

Xin chàoĐây là .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Chương trình giảng dạy

Đánh giá

Khóa học khác của jaenam

Khóa học tương tự

Khuyến nghị cho
những người này

Xin chào
Đây là