한 입 크기로 잘라먹는 Next.js(v15)
이정환 Winterlood
한입 시리즈의 3번째 작품! 세상에서 가장 친절하고 디테일 한 Next.js(15+)강의 입니다. App Router 뿐만 아니라 Page Router까지 프로젝트를 통해 살펴봅니다.
초급
Next.js, React, TypeScript
BEST
Học React.js từng miếng nhỏ: Từ cơ bản đến thực chiến
Hãy cùng học từ khái niệm đến các dự án độc đáo, hoàn thiện JavaScript và React chỉ với khóa học này. Học nhanh, ứng dụng sâu: khóa học All-in-one kéo dài 17 giờ!
Đánh giá từ những học viên đầu tiên
Dịch cái này sang tiếng Việt
Phát triển dự án nhật ký cảm xúc được triển khai thực tế
JavaScript, Node.js, Web: Toàn tập cách hoạt động
React: Kỹ thuật viết mã sạch và tối ưu hóa hiệu suất
Nhấp vào hình ảnh để xem lộ trình.
> Liên kết lộ trình: https://link.onebitefe.com/r/3wokpi
Liên kết bài giảng của Series
> Phản ứng theo từng phần nhỏ: https://inf.run/v3XAj
> TypeScript được chia thành từng phần nhỏ: https://inf.run/FpLm4
> Tiếp theo cắt thành từng miếng nhỏ: https://inf.run/v3XAj
React, bạn có thể hoàn thành nó trong một bài giảng.
Tôi sẽ giúp bạn cắt nó thành từng miếng vừa ăn. 🔥
Nhờ sự yêu mến và ủng hộ của nhiều sinh viên, tôi đã có thể xuất bản các bài giảng thành sách với Insight Publishing.
Một lần nữa, tôi xin gửi lời cảm ơn chân thành nhất tới tất cả các em học sinh và những người đã quan tâm.
Phiên bản gia hạn 2024
Phản ứng cắt thành từng miếng vừa ăn
Hướng tới khóa học React thân thiện và dễ dàng nhất thế giới
Từ những điều cơ bản của JavaScript,
Dự án thực tế React.js
React.js là một thư viện JavaScript chạy trên Node.js.
Vì vậy, cuối cùng thì React.js chỉ là một công cụ giúp bạn sử dụng JavaScript tốt hơn.
Do đó, nếu bạn không hiểu rõ về JavaScript và Node.js, bạn không thể sử dụng React.js đúng cách.
Khóa học này sẽ dạy cho bạn những kiến thức cơ bản về JavaScript, Node.js và React.js.
Nhưng sẽ không vui nếu bạn chỉ học nó! Bạn sẽ học React.js thông qua tổng cộng 3 dự án .
Thông qua quá trình này, bạn sẽ trở thành một nhà phát triển front-end có nền tảng vững chắc.
18 giờ giá trị
Tổng cộng có 3 dự án React.js
Khóa học này không chỉ dạy bạn cách sử dụng React.js.
Chúng tôi cũng đề cập đến nhiều kiến thức khoa học máy tính liên quan đến React.js và tổng cộng 3 dự án.
Bạn có thể phát triển kỹ năng tư duy lập trình của mình trong khi tạo ứng dụng đếm số, danh sách việc cần làm và nhật ký cảm xúc.
Cấu trúc bài giảng
📌 Phần 1~2. JavaScript cơ bản và nâng cao
Trước khi tìm hiểu React.js, chúng ta hãy xem qua các khái niệm cơ bản và nâng cao về JavaScript.
Từ các khái niệm cơ bản như kiểu dữ liệu và toán tử,
Chúng ta cũng sẽ xem xét các chủ đề nâng cao hơn như phương pháp mảng và tác vụ bất đồng bộ.
Ngay cả khi bạn đã biết JavaScript, bạn vẫn nên xem lại để ôn lại kiến thức.
 |  |
📌 Phần 3. Node.js
React.js là công nghệ hoạt động trên Node.js. Do đó, bạn không thể biết React.js nếu không biết Node.js.
Trong Phần 3, chúng ta sẽ xem Node.js là gì, tại sao nó được tạo ra và nó có những tính năng gì, thông qua trải nghiệm thực tế.
 |  |
📌 Phần 4. Giới thiệu về React.js
Hãy cùng tìm hiểu React.js là gì, nó khác với các công nghệ khác như thế nào và xem xét kỹ hơn cách nó giải quyết những hạn chế của các công nghệ hiện có. Trong quá trình này, chúng ta sẽ hiểu sâu hơn về React.js.
 |  |
📌 Phần 5. Giới thiệu về React.js
Tạo một ứng dụng React mới và khám phá các tính năng cơ bản của React, chẳng hạn như Component, State và Props.
Bạn sẽ học tất cả các chức năng cơ bản thông qua các bài tập thực hành và hiểu đầy đủ các chức năng đó thông qua các tài liệu minh họa.
 |  |
⛳️ Mục 6. Dự án React.js 1. Ứng dụng Counter
Hãy cùng tạo dự án React đầu tiên của chúng ta, "Counter App".
Đây là một dự án đơn giản nhưng là cách hay để hiểu rõ hơn về cách React.js hoạt động và triết lý thiết kế của nó.
📌 Mục 7. Vòng đời
Giống như tất cả con người đều được sinh ra và trải qua thời thơ ấu, tuổi thiếu niên, tuổi trẻ, tuổi già và đến tuổi xế chiều, tất cả các thành phần React đều được sinh ra, thay đổi và biến mất. Vòng đời của một thành phần này được gọi là vòng đời.
Hiểu và kiểm soát vòng đời của một thành phần sẽ cho phép bạn thực hiện các hành động bạn muốn vào thời điểm bạn muốn. Vì vậy, trong Phần 7, chúng ta sẽ xem xét vòng đời và cách kiểm soát nó bằng thực hành.
 |  |
⛳️ Phần 8. Dự án React.js 2. Danh sách việc cần làm
Hãy cùng tạo dự án React thứ hai, "Ứng dụng danh sách việc cần làm".
Trong khi triển khai dự án này, chúng tôi đã triển khai dữ liệu CRUD (thêm, tra cứu, sửa đổi, xóa) và các chức năng tìm kiếm.
Chúng ta sẽ xem xét một số cách xử lý dữ liệu dạng mảng trong React.
📌 Mục 9. useReducer - Phân tách logic quản lý trạng thái
Việc phân tách mã theo vai trò luôn là một ưu điểm trong phát triển phần mềm.
Hãy cùng xem xét useReducer, công cụ giúp phân tách mã quản lý trạng thái phức tạp.
Thực hành bằng cách áp dụng trực tiếp vào dự án danh sách việc cần làm.
 |  |
📌 Mục 10. Tối ưu hóa
Nếu có bất kỳ hoạt động không cần thiết nào trong dự án của chúng ta, chúng ta nên mạnh dạn loại bỏ chúng!
Hãy cùng xem xét một số kỹ thuật tối ưu hóa cho Ứng dụng React giúp loại bỏ tính toán lãng phí.
Thực hành bằng cách áp dụng trực tiếp vào dự án danh sách việc cần làm.
 | |
📌 Mục 11. Bối cảnh
Hãy cùng xem xét Context, nơi cung cấp dữ liệu cho nhiều thành phần khác nhau theo cách ngắn gọn và rõ ràng hơn.
Thực hành bằng cách áp dụng trực tiếp vào dự án danh sách việc cần làm.
 |  |
⛳️ Mục 12. Dự án React.js 3. Nhật ký cảm xúc
Hãy cùng tạo nhật ký cảm xúc cho dự án cuối kỳ của riêng mình bằng cách sử dụng tất cả các khái niệm đã học cho đến nay.
Ngoài ra, chúng tôi sử dụng cơ sở dữ liệu của trình duyệt và triển khai dự án để người dùng có thể truy cập.
Liên kết demo: https://emotion-diary.winterlood.com/
📌 Mục 13. Kết luận
 |  |
Bài giảng kết thúc, nhưng việc học của chúng ta thì không.
Hãy cùng thảo luận về hướng đi mà chúng ta nên thực hiện trong tương lai.
Người tốt bụng nhất thế giới
4 Nguyên tắc giảng dạy React
📣 Quy tắc 1. Luôn giải thích một cách đơn giản, thân thiện và trực quan.
Bất kể nội dung có phức tạp và khó khăn đến đâu!
Chúng tôi đã nỗ lực để làm cho nội dung dễ hiểu và thân thiện hơn bằng các phương tiện trực quan.
Đây là tất cả hình ảnh tôi tự tạo, vì vậy bạn có thể chụp lại và sử dụng chúng trong các bài đăng trên blog về học tập của mình. 😃
 |  |
 |  |
📣 Quy tắc 2. Phát âm sao cho vẫn có thể nghe được ngay cả khi chơi ở tốc độ cao.
Nếu bạn nghe lại để xem lại hoặc đang vội, hãy nghe ở tốc độ cao!
Chúng tôi đặc biệt chú ý để đảm bảo rằng cách phát âm của bạn có thể nghe rõ với tốc độ lên đến 2x 😎
(Hãy nghe video bên dưới, phát ở tốc độ 1,5x!)
📣 Quy tắc 3. Lưu mã của bạn để dễ tìm
Chẳng phải sẽ là một điều đáng tiếc nếu chỉ giữ lại những quy tắc thực hành mà bạn đã dày công viết ra sao?
Tôi cẩn thận sắp xếp mã thành các phần để tôi có thể quay lại và xem lại bất cứ lúc nào.
Liên kết kho lưu trữ mã: https://github.com/winterlood/onebite-react-v2
📣 Quy tắc 4. Giao tiếp liên tục
Tập hợp trong một cộng đồng chỉ dành cho sinh viên để chia sẻ kiến thức và tin tức với nhau và cùng phát triển.
Tham gia kênh Discord của chúng tôi: https://discord.gg/YDqhkH8XkN(Bạn có thể kiểm tra phòng chat mở trong tài liệu lớp học)
Câu hỏi dự kiến Q&A 💬
H. Ai đủ điều kiện tham gia khóa học này?
Bài giảng này được tối ưu hóa cho những người có hiểu biết về HTML và CSS.
Tuy nhiên, vì có phần giải thích trong suốt bài giảng nên bạn không cần phải ghi nhớ toàn bộ nội dung!
H. Tôi mới bắt đầu. Tôi không biết nhiều về JavaScript hoặc Node.js. Tôi có thể tham gia được không?
Vâng, chào mừng! 🙋♂️
Khóa học này sẽ dạy cho bạn kiến thức về JavaScript và Node.js, những kiến thức cần thiết để học React.
Do đó, với bài giảng này, trước tiên bạn có thể học được kiến thức cơ bản cần thiết cho React và sau đó tìm hiểu về React.
H. Nội dung này được trình bày trong lớp học ở mức độ nào?
Chúng tôi sẽ trình bày mọi thứ, từ lý do React ra đời, đến cách sử dụng cơ bản và các kỹ thuật tối ưu hóa hiệu suất cho quá trình phát triển sản phẩm thực tế.
Ngoài ra, chúng tôi thực sự triển khai nó bằng Vercel và hoàn thiện nó bằng cài đặt Open Graph.
Nó chứa đựng tất cả kiến thức bạn cần để phát triển một dự án web từ đầu đến cuối.
Danh mục đầu tư và video cá nhân
Khuyến nghị cho
những người này
Khóa học này dành cho ai?
Người mới tiếp cận React
Người muốn học React.js dù chưa thạo JavaScript và Node.js!
Người muốn học tập cùng với đông đảo học viên thông qua các thử thách hoàn thành khóa học.
Người muốn tạo ra kết quả đáng tự hào khi hoàn thành khóa học.
Người đã từng viết HTML & CSS dù chỉ một lần (không cần phải giỏi đâu!)
Cần biết trước khi bắt đầu?
👋 Kiến thức rất cơ bản về HTML, CSS
31,057
Học viên
1,777
Đánh giá
1,355
Trả lời
4.9
Xếp hạng
5
Các khóa học
웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
📚 도서
📹 강의
한 입 크기로 잘라먹는 Next.js
한 입 크기로 잘라먹는 타입스크립트
한 입 크기로 잘라먹는 리액트
Chương trình giảng dạy
Tất cả
98 bài giảng ∙ (18giờ 33phút)
Tài liệu khóa học:
Tài liệu bài giảng
8. 1.5) Kiểu dữ liệu
11:46
9. 1.6) Ép kiểu
08:28
10. 1.7) Toán tử 1
13:37
11. 1.8) Toán tử 2
08:48
13. 1.10) Vòng lặp
08:01
14. 1.11) Hàm
11:33
17. 1.14) Scope
06:41
20. 1.17) Mảng
04:12
Ngày đăng:
Cập nhật lần cuối:
Đánh giá
Tất cả
944 đánh giá
4.9
944 đánh giá
seonjun MoonĐánh giá 27
∙
Đánh giá trung bình 4.7
- 진영
Đánh giá 2
∙
Đánh giá trung bình 5.0
- 학운학운
Đánh giá 8
∙
Đánh giá trung bình 4.9
5
76% đã tham gia타사이트에서 영어로 먼저 리액트를 수강했습니다. 영어를 100% 이해하지 못한 상태에서 수강하다보니 개념을 잘못 이해하거나 설명을 했는데 이해하지 못하는 문제가 있었습니다. 그래서 인프런에서 리액트 강의를 찾아보다가 좋아보여서 듣게되었습니다. 강의는 자바스크립트부터 다시 알려주셔서 자바스크립트까지 공부하게 되어 좋았습니다. 리액트에 대해서도 개념을 잘 알려주셔서 공부가 많이 되었습니다. 한가지 아쉬운 것은 A->C를 설명하실 때 중간에 A->B->C 이렇게 B까지 설명해주신다면 이해하기 훨씬 좋았을 것 같은 부분도 몇군데 있었습니다. 그런 것들은 강의 질문답변란에서 다른 분들도 질문을 많이 남겨주셨더라구요. 이런 부분만 보완이 된다면 정말 100점 강의일 것 같습니다.
- 흰머리오목눈이
Đánh giá 5
∙
Đánh giá trung bình 5.0
5
64% đã tham gia아직 다보지는 않았습니다만, 여러개의 리액트 강의를 구입해서 본 입장으로 이 강의가 원탑입니다. 다른 강의들도 숙련된 자바스크립트 개발자 분들이 만드셨겠죠. 하지만 문제가 있습니다. 숙련된 분들은 자기의 머릿속에 이미 코드가 어떻게 작동하는지에 대한 이미지가 다 머리에 있는 상황에서 강의를 합니다. 그러니 밥아저씨처럼 말하면서 코드를 작성하면서 강의를 합니다. 하지만 초심자의 입장에서는 도대체 무슨 일이 일어나는지 머릿속에서 전혀 그려지지 않는 상태에서 코드만 따라치니 답답한 마음은 물론이고 개념 조차 잘잡히지 않는데요. 이 강의의 경우 코드 이전에 어떤 기능을 쓰면 어떤 일이 일어나는지에 대해 이미지로 먼저 풀어서 개념을 설명해주고 그 다음에 코드를 보여주니, 저 역시도 코드를 보면서 머릿속에서 코드가 작동되는 이미지가 같이 그려집니다. 대부분의 강사님들이 개발자이지. 교육자/교육전공자는 아니기 때문에 이러한 효과적인 교육 방식에 대한 스탠다드 없이 너무 많은 강의들이 양산되고 있다고 느끼는데 이 강의는 정말 최고네요. 강의 다 보지도 않았는데 이미 타입스크립트도 구매했습니다. 퀄리티가 이정돈데 강의값은 또 너무 혜자에요. 커피라도 한 잔 더 하시라고 책도 샀습니다. 제 돈 주고 사는 강의에 '감사하다' 라는 표현이 이상해서 자주 사용하지는 않는데요. 그럼에도 이 강의는 ' 매우 감사합니다 '. 가능하면 Express.js, Next.Js 강의, 그리고 TDD 에 대한 강의도 내주시면 좋을 것 같아요!
- peekaboo
Đánh giá 2
∙
Đánh giá trung bình 5.0
Ưu đãi có thời hạn, kết thúc sau 1 ngày ngày
36.300 ₫
25%
1.016.403 ₫
Khóa học khác của winterlood
Hãy khám phá các khóa học khác của giảng viên!
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!
![제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일](https://cdn.inflearn.com/public/files/courses/336946/cover/01jv48md3p02hgkwt4yh1svf3j?f=avif&w=420)
![[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core강의 썸네일](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-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)
