![[React / VanillaJS] UI 요소 직접 만들기 Part 1강의 썸네일](https://cdn.inflearn.com/public/courses/333258/cover/1b33bae1-68fa-4b4d-b089-199eab988c84/333258.png?f=avif&w=420)
[React / VanillaJS] UI 요소 직접 만들기 Part 1
정재남
대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.
초급
React, vanilla-js, ui
BEST
Full Stack React Live Coding - Tạo một trung tâm mua sắm đơn giản
Từ phát triển đến phân phối! Chúng tôi cho bạn thấy hành trình gian khổ để hoàn thành một dịch vụ mà không cần bất kỳ sự lọc nào. Bằng cách giới thiệu nhiều kỹ thuật mà có thể bạn chưa từng sử dụng trước đây, bạn sẽ có thể vượt qua mọi thăng trầm!
Đánh giá từ những học viên đầu tiên
Dịch cái này sang tiếng Việt
React phát triển dịch vụ web
GraphQL
Truy vấn phản ứng
căn cứ hỏa lực
Nghe một bài giảng sống động và chân thực
Bắt đầu viết mã và xây dựng dịch vụ trung tâm mua sắm trực tuyến! 🩳
Một dịch vụ
Hành trình đến sự hoàn thiện 🚢
Khóa học này được giảng dạy trực tiếp với học viên, do đó bạn có thể nhanh chóng tìm và áp dụng ngay nội dung mình cần.
Chúng tôi sẽ chỉ cho bạn quy trình xem xét và giải quyết nhiều vấn đề phát sinh trong quá trình phát triển mà không cần lọc chúng.
Qua bài giảng này, tôi muốn cho bạn thấy rằng bạn có thể hoàn thành một việc gì đó ngay cả khi bạn chỉ mới bắt đầu viết mã mà không cần chuẩn bị gì cả.
Với điều này, tôi hy vọng sẽ tiếp thêm động lực cho những người đang tìm việc hoặc những người mới vào nghề đang gặp khó khăn trong việc sáng tạo ra điều gì đó.
Mã đầy đủ có sẵn trên GitHub , vì vậy hãy tham khảo nhé!
"Tôi đã học React, nhưng tôi cảm thấy bối rối khi tự mình thực hiện một dự án .
Tôi cũng tò mò muốn biết những người khác đang nghiên cứu về phát triển như thế nào."
-Người tìm việc front-end-
"Tôi hoàn toàn không có kiến thức gì về phần backend nên tôi cảm thấy bối rối khi nghĩ đến việc phát triển.
Tôi cảm thấy bị hạn chế trong tiến độ của dự án ."
-Lập trình viên Front-end cơ bản-
"Khi tôi gặp khó khăn khi viết mã, tôi không biết phải làm gì và cảm thấy bối rối.
Ngoài ra, tôi muốn thực hành GraphQL và BFF .
-Lập trình viên front-end-
Trong mã hóa trực tiếp
Học một điều mỗi ngày 🎥
Ngày 1
- Cài đặt môi trường máy khách (vite), xử lý bộ định tuyến
- Tạo danh sách sản phẩm và trang chi tiết
- Chính sách bộ nhớ đệm truy vấn React
- Được viết bởi GNB
Ngày 2
- Giới thiệu Mock Service Worker
- Tạo API giả lập cho danh sách sản phẩm và giỏ hàng
- Tạo trang giỏ hàng
Ngày 3
- Áp dụng API giỏ hàng
- invalidateQueries so với cập nhật lạc quan
- Triển khai chức năng Xóa giỏ hàng và Chọn
Ngày 4
- Quản lý trạng thái giỏ hàng (recoil)
- Trang thanh toán
Ngày 5
- Giới thiệu monorepo (không gian làm việc Yarn)
- Cài đặt môi trường máy chủ
- Định nghĩa lược đồ và trình giải quyết
Ngày 6
- Tạo DB json
- Phản ánh những thay đổi của máy chủ tới khách hàng
Ngày 7
- Cuộn vô hạn - Nhiệm vụ máy chủ
- sử dụngInfiniteQuery
- giao lộObserver
Ngày thứ 8
- Viết API quản trị
- Trang quản trị - triển khai các chức năng thêm, chỉnh sửa và xóa danh sách và sản phẩm
Ngày thứ 9
- Ứng dụng Firebase
Ngày 10
- Hoàn thiện và triển khai Firebase
🔔 Tạo dịch vụ trung tâm mua sắm thông qua việc lập trình mà bạn học được thông qua trải nghiệm thực tế trong 10 ngày.
Sau khi nghe hết các bài giảng
Một bức ảnh của một học sinh 😎
Bạn sẽ có đủ kiến thức để tự mình thực hiện các dự án.
Bạn sẽ có được sức mạnh để giải quyết nhiều vấn đề phát sinh trong quá trình thực hiện dự án.
Tôi sẽ hào phóng chia sẻ với bạn nhiều kiến thức chuyên môn mà tôi đã tích lũy được sau 9 năm kinh nghiệm thực tế .
Bất cứ khi nào tôi bắt đầu một dự án mà không suy nghĩ và gặp phải vấn đề,
Chúng tôi sẽ chỉ cho bạn cách tìm giải pháp bằng cách kết hợp tìm kiếm, gỡ lỗi và đoán mò.
Hỏi & Đáp 💬
H. Tôi tò mò về trình độ mà tôi có thể tham gia khóa học.
Khóa học này không bao gồm kiến thức cơ bản về React hay TypeScript, vì vậy bạn cần có một số kiến thức nền tảng để hoàn thành. Tuy nhiên, bạn không cần phải có thêm kiến thức nào khác; chỉ cần lắng nghe, suy nghĩ và theo dõi là bạn đã có thể tiếp thu kiến thức một cách tự nhiên.
H. Nội dung bài giảng có bao gồm lý thuyết không?
Video này bao gồm thông tin cần thiết cho tiến độ dự án, cũng như giải đáp trực tiếp các câu hỏi của thành viên tham gia trong quá trình quay phim. Xin lưu ý rằng không có giải thích lý thuyết chi tiết nào ngoài nội dung này.
H. Nội dung bài giảng này có phù hợp để lập hồ sơ năng lực không?
Vì tôi chỉ tập trung vào phát triển và tạo kiểu tối giản, nên khóa học này sẽ không đủ để tạo ra một tác phẩm chất lượng portfolio. Tuy nhiên, tôi tin rằng bạn sẽ có đủ kiến thức để thực hiện các dự án mới.
H. Có môi trường thực hành đặc biệt nào mà tôi cần phải chuẩn bị không?
Mặc dù khóa học tập trung vào MacOS, nhưng nó cũng cung cấp một số hướng dẫn về cách giải quyết các vấn đề phát sinh trong môi trường Windows. Mặc dù Visual Studio Code (VSCode) được sử dụng làm IDE, bạn hoàn toàn có thể sử dụng bất kỳ công cụ phát triển nào khác.
Người chia sẻ kiến thức
Bạn có tò mò về các bài giảng khác không? 💁♂️
JavaScript cốt lõi (nhấp chuột)
Hiểu về Javascript ES6+ - Người mới bắt đầu (Nhấp chuột)
Javascript ES6+: Hướng dẫn đầy đủ - Trung cấp (Nhấp chuột)
Hiểu về Javascript ES6+ - Phần thưởng (Nhấp chuột)
Khuyến nghị cho
những người này
Khóa học này dành cho ai?
Một người tìm việc làm front-end đã học React nhưng lại cảm thấy bối rối khi phải tự mình thực hiện một dự án.
Nhà phát triển front-end cấp dưới cảm thấy bị hạn chế về tiến độ dự án do không có kiến thức về back-end
Các nhà phát triển front-end và người tìm việc muốn thực hành GraphQL/BFF
Cần biết trước khi bắt đầu?
ReactJS
Bản đánh máy
32,337
Học viên
671
Đánh giá
393
Trả lời
4.8
Xếp hạng
11
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ả
48 bài giảng ∙ (8giờ 1phút)
Ngày đăng:
Cập nhật lần cuối:
Đánh giá
Tất cả
15 đánh giá
4.8
15 đánh giá
LynĐánh giá 8
∙
Đánh giá trung bình 4.8
- Yoon Geon-ung
Đánh giá 12
∙
Đánh giá trung bình 5.0
- 0S
Đánh giá 5
∙
Đánh giá trung bình 5.0
- Ucopy Theme
Đánh giá 5
∙
Đánh giá trung bình 5.0
- ak
Đánh giá 9
∙
Đánh giá trung bình 5.0
477.582 ₫
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 2강의 썸네일](https://cdn.inflearn.com/public/courses/333795/cover/0cf744ff-43a2-4de7-a5e5-7f5619b7cb15/333795.png?f=avif&w=420)
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!
![구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]강의 썸네일](https://cdn.inflearn.com/public/files/courses/338045/cover/01k1cvnt514nzd42eadka09p64?f=avif&w=420)
![이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]강의 썸네일](https://cdn.inflearn.com/public/files/courses/338102/cover/01k1bjkdeb2ap7p4b0vb2fck06?f=avif&w=420)
![GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]강의 썸네일](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?f=avif&w=420)
![[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스강의 썸네일](https://cdn.inflearn.com/public/files/courses/332860/cover/01jnwb77yxra1hp8cm9hed0wnd?f=avif&w=420)
![Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터]강의 썸네일](https://cdn.inflearn.com/public/courses/324976/course_cover/1355e898-fc20-4579-a88f-82340b849595/netflix-flutter-eng.png?f=avif&w=420)
![[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
