[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-settings":3,"nav-course-tabs":225,"blog-article-reactjs-la-gi-lo-trinh-hoc-react":282},{"site":4,"home":19,"footer":172,"payment":214,"promo":221},{"name":5,"tagline":6,"url":7,"logoUrl":8,"primaryColor":9,"contactEmail":10,"hotline":11,"facebookUrl":12,"youtubeUrl":13,"kungfutechUrl":14,"announcement":15},"MelyDemy","Học lập trình thực chiến từ con số 0","https:\u002F\u002Fmelydemy.io.vn","\u002Fimages\u002Fbrand\u002Flogo.svg?v=3","#dc2626","techmely.creation@gmail.com","","https:\u002F\u002Fwww.facebook.com\u002Fmelydemy.techmely\u002F","https:\u002F\u002Fwww.youtube.com\u002Fc\u002FTechMely?sub_confirmation=1","https:\u002F\u002Fkungfutech.io.vn",{"enabled":16,"text":17,"link":18},true,"Ưu đãi Mely 29k — học lập trình trọn đời chỉ từ 29.000đ","\u002Fkhoa-hoc\u002F29k",{"seo":20,"hero":26,"banners":49,"sectionCopy":60,"categories":78,"features":100,"onlyMelyDemy":117,"aboutUs":130,"testimonials":142,"newsletter":167},{"title":21,"description":22,"keywords":23},"MelyDemy - Khoá học lập trình thực chiến dành cho bạn","MelyDemy cung cấp khoá học lập trình Frontend, Backend, DevOps và AI thực chiến bằng tiếng Việt, học trọn đời chỉ từ 29.000đ.",[24,5,25],"Khoá học lập trình","Thực chiến lập trình",{"badge":27,"title":28,"highlight":29,"description":30,"primaryCta":31,"secondaryCta":34,"stats":36},"Nền tảng học lập trình #1 cho người Việt","Học kỹ năng công nghệ","thực chiến, trọn đời","Hơn 40 khoá học Frontend, Backend, DevOps và AI — video bài bản, source code đi kèm, học mọi lúc mọi nơi.",{"label":32,"to":33},"Khám phá khoá học","\u002Fkhoa-hoc",{"label":35,"to":18},"Ưu đãi 29k",[37,40,43,46],{"value":38,"label":39},"40+","Khoá học",{"value":41,"label":42},"15.000+","Học viên",{"value":44,"label":45},"4.8\u002F5","Đánh giá",{"value":47,"label":48},"Trọn đời","Truy cập",[50,56],{"badge":51,"title":52,"description":53,"link":54,"color":55},"Xu hướng 2026","Lộ trình AI thực chiến","Prompt, workflow và tích hợp công cụ — học theo bài lab, áp dụng ngay vào dự án.","\u002Fkhoa-hoc\u002Fai","#7c3aed",{"badge":57,"title":58,"description":59,"link":18,"color":9},"Mely 29k","Học lập trình từ 29.000đ","Video trọn đời, source code đi kèm — bắt đầu Frontend, Backend hoặc DevOps hôm nay.",{"courses":61,"onlyMelyDemy":64,"about":67,"community":70,"blog":74},{"title":62,"subtitle":63},"Khoá học nổi bật","Các khoá học xây dựng bài bản, đáp ứng nhu cầu thực tế của thị trường",{"title":65,"subtitle":66},"Chỉ có tại MelyDemy","Khoá học chất lượng với mức giá dễ tiếp cận nhất",{"title":68,"subtitle":69},"Lộ trình học trên MelyDemy","Ba lộ trình cốt lõi — Full-stack, DevOps và AI — giúp bạn áp dụng ngay vào dự án thực tế.",{"headline":71,"title":72,"subtitle":73},"Được học viên tin tưởng","Học viên nói gì về MelyDemy","Hàng nghìn học viên đã học lập trình thực chiến — từ sinh viên, fresher đến người chuyển ngành.",{"title":75,"subtitle":76,"listPageSubtitle":77},"Blog","Tin tức, kiến thức công nghệ mới nhất từ MelyDemy","Tổng hợp tin tức AI và công nghệ mới nhất — kiến thức thực chiến cho lập trình viên.",[79,84,88,93,97],{"label":80,"to":81,"icon":82,"color":83},"Frontend","\u002Fkhoa-hoc\u002Fkhoa-hoc-frontend","i-lucide-layout-template","#f97316",{"label":85,"to":86,"icon":87,"color":9},"Backend","\u002Fkhoa-hoc\u002Fkhoa-hoc-backend","i-lucide-server",{"label":89,"to":90,"icon":91,"color":92},"DevOps","\u002Fkhoa-hoc\u002Fkhoa-hoc-devops","i-lucide-container","#0ea5e9",{"label":94,"to":54,"icon":95,"color":96},"AI","i-lucide-sparkles","#8b5cf6",{"label":57,"to":18,"icon":98,"color":99},"i-lucide-ticket-percent","#16a34a",[101,105,109,113],{"title":102,"description":103,"icon":104},"Video trọn đời","Mua một lần, học mãi mãi — cập nhật nội dung miễn phí.","i-lucide-infinity",{"title":106,"description":107,"icon":108},"Source code đi kèm","Mỗi bài học đều có code mẫu để bạn thực hành ngay.","i-lucide-code-xml",{"title":110,"description":111,"icon":112},"Tiếng Việt dễ hiểu","Giảng viên giải thích rõ ràng, ví dụ sát dự án thật.","i-lucide-languages",{"title":114,"description":115,"icon":116},"Cộng đồng hỗ trợ","Hỏi đáp nhanh cùng cộng đồng KungFuTech và mentor.","i-lucide-users-round",[118,122,126],{"title":119,"description":120,"image":121},"Giới thiệu chương trình","\u003Cp>Học lập trình với khoá học chất lượng: video bài giảng, source code và quyền truy cập trọn đời.\u003C\u002Fp>","\u002Fimages\u002Fhome\u002F49k-section-1.jpg",{"title":123,"description":124,"image":125},"Học dễ dàng, chi phí thấp","\u003Cp>Khoá học ngắn gọn, thực tế với mức giá chỉ từ 29K. Theo dõi thường xuyên để cập nhật ưu đãi.\u003C\u002Fp>","\u002Fimages\u002Fhome\u002F49k-section-2.jpg",{"title":127,"description":128,"image":129},"Chọn khoá học và bắt đầu","\u003Cp>Khám phá khoá học Frontend, Backend, DevOps, Mobile và AI — bắt đầu hành trình của bạn hôm nay.\u003C\u002Fp>","\u002Fimages\u002Fhome\u002F49k-section-3.jpg",[131,136,139],{"title":132,"description":133,"icon":134,"image":135},"Backend & Frontend","Xây dựng ứng dụng web từ giao diện đến hệ thống phía sau với công nghệ hiện đại.","i-lucide-layers","\u002Fimages\u002Fhome\u002Fabout-track-1.jpg",{"title":89,"description":137,"icon":91,"image":138},"Triển khai, vận hành và tối ưu hệ thống để ứng dụng chạy ổn định, mở rộng dễ dàng.","\u002Fimages\u002Fhome\u002Fabout-track-2.jpg",{"title":94,"description":140,"icon":95,"image":141},"Xây dựng ứng dụng tích hợp AI, tự động hoá workflow và phát triển sản phẩm thông minh.","\u002Fimages\u002Fhome\u002Fabout-track-3.jpg",[143,147,151,155,159,163],{"fullname":144,"role":145,"description":146},"Nguyễn Minh Anh","Sinh viên CNTT — Đại học Bách Khoa TP.HCM","Rất nhiều khoá học bổ ích từ Frontend, Backend đến DevOps — mình chọn lộ trình phù hợp mà không bị lạc. Video và source trọn đời, ôn lại rất tiện.",{"fullname":148,"role":149,"description":150},"Trần Hoàng Nam","Kế toán chuyển ngành IT — Hà Nội","Khoá AI giúp mình hiểu prompt, workflow và cách tích hợp công cụ vào việc học code hằng ngày. Bài ngắn, học buổi tối không bị quá tải.",{"fullname":152,"role":153,"description":154},"Lê Thị Hương","Fresher Frontend — FPT Software Đà Nẵng","Khoá TypeScript làm rõ type, interface và cách refactor code cũ — mình tự tin review PR và làm task trong dự án thật.",{"fullname":156,"role":157,"description":158},"Phạm Quốc Bảo","Kỹ sư cơ khí — tự học lập trình buổi tối","Lộ trình DevOps (CI\u002FCD, Docker) giúp mình hiểu pipeline deploy thay vì chỉ code local. Checklist từng tuần giữ nhịp học ổn định.",{"fullname":160,"role":161,"description":162},"Võ Thanh Tú","Intern Backend — startup tại TP.HCM","Khoá Node.js và thiết kế API giúp mình nắm REST, validation và database qua bài lab thực tế. Slide đính kèm tiện ôn phỏng vấn.",{"fullname":164,"role":165,"description":166},"Đặng Kim Ngân","Designer chuyển sang UI Developer","Khoá HTML\u002FCSS Grid & Flexbox giúp mình chuyển layout Figma sang markup chuẩn, responsive đúng spec.",{"title":168,"description":169,"placeholder":170,"buttonLabel":171},"Nhận tin khoá học & ưu đãi","Đăng ký email để cập nhật lộ trình mới, workshop và chương trình Mely 29k.","Email của bạn","Đăng ký",{"brandLine":173,"description":174,"columns":175},"MELYDEMY — Học lập trình từ con số 0","Nền tảng khoá học lập trình thực chiến thuộc hệ sinh thái KungFuTech.",[176,184,204],{"title":39,"links":177},[178,180,182],{"label":179,"to":33},"Tất cả khoá học",{"label":181,"to":18},"Ưu đãi Mely 29k",{"label":183,"to":54},"Khoá học AI",{"title":185,"links":186},"Tài nguyên",[187,189,192,195,198,201],{"label":75,"to":188},"\u002Fblog",{"label":190,"to":191},"Giới thiệu","\u002Fgioi-thieu",{"label":193,"to":194},"Liên hệ","\u002Flien-he",{"label":196,"to":197},"Câu hỏi thường gặp","\u002Fcau-hoi-thuong-gap",{"label":199,"to":200},"Điều khoản","\u002Fterms-and-conditions",{"label":202,"to":203},"Chính sách bảo mật","\u002Fprivacy-policy",{"title":205,"links":206},"Hệ sinh thái",[207,209,212],{"label":208,"href":14},"KungFuTech",{"label":210,"href":211},"TechMely YouTube","https:\u002F\u002Fwww.youtube.com\u002Fc\u002FTechMely",{"label":213,"href":12},"Facebook MelyDemy",{"bankName":215,"bankCode":216,"accountNumber":217,"accountName":218,"qrTemplate":219,"note":220},"MB Bank","MBBank","0680126400005","PHAM NGOC HOA","https:\u002F\u002Fqr.sepay.vn\u002Fimg?acc={accountNumber}&bank={bankCode}&amount={amount}&des={paymentCode}","Khoá học sẽ được gửi vào email của bạn sau khi thanh toán thành công.",{"promo49k":222},{"enabled":16,"displayPrice":223,"title":57,"description":224},29000,"Học lập trình trọn đời chỉ từ 29.000đ",[226,238,249,260,272],{"id":227,"name":228,"slug":229,"title":24,"canonicalSlug":230,"heroDescription":231,"seoTitle":232,"seoDescription":233,"intro":234},1,"Tất cả các khóa học","tat-ca",null,"Khám phá lộ trình Frontend, Backend, DevOps và AI — học thực chiến với video trọn đời.","Khoá học lập trình online tiếng Việt | MelyDemy","Học lập trình online cùng MelyDemy: khoá Frontend, Backend, DevOps và AI thực chiến bằng tiếng Việt, video xem trọn đời, kèm source code dự án.",[235,236,237],"MelyDemy là nền tảng khoá học lập trình bằng video tiếng Việt, tập trung vào kỹ năng làm được việc: mỗi khoá đi từ kiến thức nền tảng đến dự án thực tế, có source code đi kèm để bạn thực hành theo từng bài.","Danh mục gồm bốn nhóm chính. Frontend dành cho người muốn xây giao diện web với HTML, CSS, JavaScript, ReactJS hay Next.js. Backend dạy lập trình API, cơ sở dữ liệu và kiến trúc hệ thống với nhiều ngôn ngữ và framework. DevOps hướng dẫn Docker, CI\u002FCD, cloud và vận hành hệ thống. Nhóm AI giúp bạn dùng các công cụ và agent AI để tăng năng suất làm việc.","Bạn có thể lọc theo nhóm hoặc tìm theo tên công nghệ. Khoá học được mua một lần và xem lại không giới hạn thời gian, phù hợp cho cả người mới bắt đầu lẫn lập trình viên muốn mở rộng kỹ năng. Nếu chưa biết nên bắt đầu từ đâu, hãy chọn nhóm Frontend hoặc Backend và xem phần nội dung chi tiết của từng khoá để đánh giá độ phù hợp.",{"id":239,"name":85,"slug":240,"title":85,"canonicalSlug":241,"heroDescription":242,"seoTitle":243,"seoDescription":244,"intro":245},2,"khoa-hoc-backend","backend","API, database và kiến trúc hệ thống — từ nền tảng đến dự án thực tế.","Khoá học lập trình Backend online | MelyDemy","Học lập trình Backend bằng tiếng Việt: xây dựng API, làm việc với cơ sở dữ liệu và thiết kế hệ thống qua các khoá video thực chiến tại MelyDemy.",[246,247,248],"Lập trình Backend là phần xử lý đằng sau mọi ứng dụng: nhận yêu cầu từ giao diện, xử lý nghiệp vụ, lưu và truy vấn dữ liệu rồi trả kết quả về cho người dùng. Các khoá Backend tại MelyDemy hướng dẫn bạn xây dựng API, làm việc với cơ sở dữ liệu quan hệ và NoSQL, xác thực người dùng và triển khai ứng dụng.","Mỗi khoá bắt đầu từ nền tảng ngôn ngữ và framework, sau đó đi tới các chủ đề thực tế như thiết kế REST API, tối ưu truy vấn, bảo mật và kiểm thử. Bạn học qua video, làm theo source code và hoàn thành dự án cuối khoá để có sản phẩm đưa vào hồ sơ.","Hãy chọn ngôn ngữ phù hợp với mục tiêu công việc của bạn, xem nội dung từng chương trong trang khoá học rồi bắt đầu học theo tốc độ riêng. Học viên có thể xem lại bài giảng không giới hạn thời gian.",{"id":250,"name":80,"slug":251,"title":80,"canonicalSlug":252,"heroDescription":253,"seoTitle":254,"seoDescription":255,"intro":256},3,"khoa-hoc-frontend","frontend","HTML, CSS, JavaScript và framework hiện đại — xây giao diện responsive chuẩn doanh nghiệp.","Khoá học lập trình Frontend online | MelyDemy","Học Frontend bằng tiếng Việt: HTML, CSS, JavaScript, ReactJS, Next.js và nhiều hơn nữa, xây giao diện responsive qua khoá video thực chiến tại MelyDemy.",[257,258,259],"Lập trình Frontend là kỹ năng xây dựng phần giao diện người dùng nhìn thấy và tương tác trên web. Các khoá Frontend tại MelyDemy đi từ HTML, CSS và JavaScript nền tảng đến các framework hiện đại như ReactJS và Next.js, giúp bạn dựng giao diện responsive đạt chuẩn doanh nghiệp.","Nội dung nhấn mạnh thực hành: bạn xây dựng từng thành phần giao diện, quản lý trạng thái, gọi API, tối ưu hiệu năng và SEO, rồi hoàn thiện một dự án hoàn chỉnh. Source code được cung cấp để bạn đối chiếu và tự chỉnh sửa.","Nếu mới bắt đầu, hãy học chắc JavaScript trước khi chuyển sang framework. Nếu đã có nền tảng, bạn có thể chọn thẳng khoá ReactJS hoặc Next.js. Xem mục nội dung trong từng khoá để biết chính xác bạn sẽ học những gì.",{"id":261,"name":262,"slug":263,"title":262,"canonicalSlug":264,"heroDescription":265,"seoTitle":266,"seoDescription":267,"intro":268},4,"Devops","khoa-hoc-devops","devops","CI\u002FCD, container và vận hành hệ thống — triển khai ổn định, mở rộng dễ dàng.","Khoá học DevOps online tiếng Việt | MelyDemy","Học DevOps bằng tiếng Việt: Docker, CI\u002FCD, cloud và vận hành hệ thống qua các khoá video thực chiến, giúp triển khai ứng dụng ổn định tại MelyDemy.",[269,270,271],"DevOps kết nối phát triển và vận hành: tự động hoá việc build, kiểm thử, triển khai và giám sát để phần mềm được đưa đến người dùng nhanh và ổn định hơn. Các khoá DevOps tại MelyDemy hướng dẫn bạn làm quen với Linux, container, pipeline CI\u002FCD và hạ tầng đám mây.","Bạn sẽ thực hành trực tiếp: đóng gói ứng dụng bằng Docker, thiết lập quy trình tự động triển khai, quản lý cấu hình và theo dõi hệ thống khi chạy thật. Mỗi bài đều đi kèm ví dụ có thể làm lại trên máy hoặc máy chủ của bạn.","Nhóm khoá này phù hợp với lập trình viên muốn tự triển khai sản phẩm của mình, hoặc người muốn chuyển hướng sang vai trò DevOps và cloud. Hãy xem nội dung chi tiết từng khoá để chọn lộ trình phù hợp.",{"id":273,"name":94,"slug":274,"title":94,"canonicalSlug":274,"heroDescription":275,"seoTitle":276,"seoDescription":277,"intro":278},5,"ai","Prompt, workflow và tích hợp công cụ AI — học theo bài lab, áp dụng ngay vào dự án.","Khoá học AI ứng dụng cho lập trình | MelyDemy","Học AI ứng dụng bằng tiếng Việt: prompt, workflow tự động và agent AI qua các bài lab thực hành, áp dụng ngay vào công việc và dự án tại MelyDemy.",[279,280,281],"Các khoá AI tại MelyDemy tập trung vào việc ứng dụng: dùng công cụ AI để viết code nhanh hơn, tự động hoá công việc lặp lại và xây dựng agent hỗ trợ công việc hằng ngày, thay vì chỉ giải thích lý thuyết.","Bạn sẽ học cách viết prompt hiệu quả, thiết kế workflow kết nối nhiều công cụ, tự host agent trên máy chủ riêng và tích hợp AI vào quy trình phát triển phần mềm. Mỗi chủ đề có bài lab để bạn làm theo và áp dụng được ngay.","Nhóm khoá này phù hợp với lập trình viên, người làm nội dung và bất kỳ ai muốn tăng năng suất bằng AI. Hãy xem phần nội dung từng khoá để biết công cụ và kết quả bạn sẽ đạt được.",{"id":283,"slug":284,"title":285,"excerpt":286,"createdAt":287,"updatedAt":287,"category":288,"thumbnail":290,"content":291,"head":292,"author":299,"image":302,"same_category":303,"sameCategory":352},"148411db-52e4-4e7b-bee1-e442d12fd509","reactjs-la-gi-lo-trinh-hoc-react","ReactJS là gì? Lộ trình học React từ cơ bản","ReactJS là gì, cần biết gì trước khi học, component, props, state, hooks và lộ trình lên Next.js.","2026-11-03T15:05:41",{"name":75,"slug":289,"description":11},"blog",{"url":11,"alt":285},"\u003Cp>\u003Cstrong>ReactJS là gì?\u003C\u002Fstrong> React là thư viện JavaScript mã nguồn mở do Meta phát triển, dùng để xây dựng giao diện người dùng từ các \u003Cstrong>component\u003C\u002Fstrong> nhỏ, có thể tái sử dụng. React tự cập nhật giao diện khi dữ liệu thay đổi, giúp bạn tập trung mô tả giao diện “trông như thế nào” thay vì thao tác từng phần tử DOM. Bài viết giải thích các khái niệm cốt lõi của React và đưa ra lộ trình học từ cơ bản đến Next.js.\u003C\u002Fp>\n\n\u003Ch2>Vì sao React phổ biến?\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Tư duy component:\u003C\u002Fstrong> chia giao diện thành các khối như \u003Ccode>Header\u003C\u002Fcode>, \u003Ccode>ProductCard\u003C\u002Fcode>, \u003Ccode>CartButton\u003C\u002Fcode>, dễ tái sử dụng và bảo trì.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Khai báo (declarative):\u003C\u002Fstrong> bạn mô tả giao diện ứng với trạng thái dữ liệu, React lo việc cập nhật.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Hệ sinh thái lớn:\u003C\u002Fstrong> nhiều thư viện routing, quản lý form, quản lý dữ liệu, UI component.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Đa nền tảng:\u003C\u002Fstrong> kiến thức React dùng được cho mobile với React Native.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Cơ hội việc làm:\u003C\u002Fstrong> React xuất hiện thường xuyên trong tin tuyển dụng frontend. Bạn có thể tự kiểm chứng bằng cách tìm kiếm trên các trang tuyển dụng IT.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>Cần biết gì trước khi học React?\u003C\u002Fh2>\n\u003Cp>React là JavaScript, nên nền tảng JavaScript yếu là nguyên nhân hàng đầu khiến người học React gặp khó. Trước khi bắt đầu, bạn nên nắm:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>HTML, CSS cơ bản và bố cục Flexbox\u002FGrid.\u003C\u002Fli>\n\u003Cli>JavaScript ES6+: \u003Ccode>let\u002Fconst\u003C\u002Fcode>, arrow function, destructuring, spread, template string.\u003C\u002Fli>\n\u003Cli>Các phương thức mảng: \u003Ccode>map\u003C\u002Fcode>, \u003Ccode>filter\u003C\u002Fcode>, \u003Ccode>find\u003C\u002Fcode>, \u003Ccode>reduce\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Module \u003Ccode>import\u002Fexport\u003C\u002Fcode>, Promise và \u003Ccode>async\u002Fawait\u003C\u002Fcode>, gọi API bằng \u003Ccode>fetch\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Nếu chưa vững, hãy xem lại \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-javascript\">khoá học JavaScript\u003C\u002Fa> hoặc bài \u003Ca href=\"\u002Fblog\u002Flo-trinh-hoc-lap-trinh-web-cho-nguoi-moi\">lộ trình học lập trình web cho người mới\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch2>Các khái niệm cốt lõi của React\u003C\u002Fh2>\n\u003Ch3>JSX\u003C\u002Fh3>\n\u003Cp>JSX là cú pháp cho phép viết “HTML” ngay trong JavaScript. Thực chất JSX được biên dịch thành các lời gọi hàm JavaScript.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function Welcome() {\n  const name = \"MelyDemy\";\n  return <h1>Xin chào {name}<\u002Fh1>;\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Component và props\u003C\u002Fh3>\n\u003Cp>Component là một hàm trả về JSX. Props là dữ liệu truyền từ component cha xuống component con, giống như tham số của hàm.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>function CourseCard({ title, price }) {\n  return (\n    <div className=\"card\">\n      <h3>{title}<\u002Fh3>\n      <p>{price}<\u002Fp>\n    <\u002Fdiv>\n  );\n}\n\n<CourseCard title=\"ReactJS\" price=\"29.000₫\" \u002F>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>State\u003C\u002Fh3>\n\u003Cp>State là dữ liệu thay đổi theo thời gian bên trong component. Khi state đổi, React render lại giao diện.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>import { useState } from \"react\";\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  return <button onClick={() => setCount(count + 1)}>Đã bấm {count} lần<\u002Fbutton>;\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Render danh sách và điều kiện\u003C\u002Fh3>\n\u003Cpre>\u003Ccode>{courses.length === 0\n  ? <p>Chưa có khoá học<\u002Fp>\n  : courses.map(c => <CourseCard key={c.id} {...c} \u002F>)}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Mỗi phần tử trong danh sách cần một \u003Ccode>key\u003C\u002Fcode> duy nhất và ổn định để React cập nhật hiệu quả.\u003C\u002Fp>\n\n\u003Ch2>Hooks quan trọng\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\u003Ctr>\u003Cth>Hook\u003C\u002Fth>\u003Cth>Dùng để\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\u003Ctd>\u003Ccode>useState\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Lưu state cục bộ trong component\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ccode>useEffect\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Chạy tác vụ phụ: gọi API, đăng ký sự kiện, đồng bộ với hệ thống bên ngoài\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ccode>useRef\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Tham chiếu phần tử DOM hoặc lưu giá trị không gây render lại\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ccode>useMemo\u003C\u002Fcode> \u002F \u003Ccode>useCallback\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Ghi nhớ giá trị\u002Fhàm để tối ưu hiệu năng khi thật sự cần\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Ccode>useContext\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Chia sẻ dữ liệu (theme, user) mà không truyền props qua nhiều tầng\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Bạn cũng có thể tự viết \u003Cstrong>custom hook\u003C\u002Fstrong> (ví dụ \u003Ccode>useFetch\u003C\u002Fcode>, \u003Ccode>useDebounce\u003C\u002Fcode>) để tái sử dụng logic giữa các component.\u003C\u002Fp>\n\n\u003Ch2>Quản lý dữ liệu trong ứng dụng React\u003C\u002Fh2>\n\u003Cp>Dữ liệu trong ứng dụng React thường chia làm hai loại:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Client state:\u003C\u002Fstrong> trạng thái giao diện như modal mở\u002Fđóng, tab đang chọn. Dùng \u003Ccode>useState\u003C\u002Fcode>, Context, hoặc thư viện như Zustand, Redux Toolkit khi ứng dụng lớn.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Server state:\u003C\u002Fstrong> dữ liệu lấy từ API cần cache, làm mới, xử lý loading và lỗi. Thư viện \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-react-query\">React Query (TanStack Query)\u003C\u002Fa> giải quyết rất tốt phần này thay vì tự viết \u003Ccode>useEffect\u003C\u002Fcode> cho mọi lời gọi API.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>Lộ trình học React gợi ý\u003C\u002Fh2>\n\u003Col>\n\u003Cli>\u003Cstrong>Nền tảng:\u003C\u002Fstrong> JSX, component, props, state, sự kiện, render danh sách.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Hooks:\u003C\u002Fstrong> useState, useEffect, useRef, custom hook.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Form:\u003C\u002Fstrong> controlled component, kiểm tra dữ liệu (có thể dùng React Hook Form).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Routing:\u003C\u002Fstrong> chia ứng dụng nhiều trang với React Router.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Gọi API và server state:\u003C\u002Fstrong> fetch, React Query.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>TypeScript với React:\u003C\u002Fstrong> định nghĩa kiểu cho props và dữ liệu API. Xem bài \u003Ca href=\"\u002Fblog\u002Ftypescript-la-gi\">TypeScript là gì\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Styling:\u003C\u002Fstrong> CSS Modules hoặc Tailwind CSS.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Next.js:\u003C\u002Fstrong> render phía server, định tuyến theo file, tối ưu SEO.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>Dự án luyện tập\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Todo app có lọc và lưu localStorage.\u003C\u002Fli>\n\u003Cli>Trang danh sách sản phẩm có tìm kiếm, phân trang, giỏ hàng.\u003C\u002Fli>\n\u003Cli>Dashboard hiển thị dữ liệu từ API kèm biểu đồ.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>React và Next.js khác nhau thế nào?\u003C\u002Fh2>\n\u003Cp>React là thư viện xây dựng giao diện. Next.js là framework xây dựng trên React, bổ sung những thứ một ứng dụng thật cần: định tuyến, render phía server (SSR), sinh trang tĩnh (SSG), tối ưu ảnh và API route. Nếu website cần SEO tốt (blog, thương mại điện tử, landing page), Next.js thường là lựa chọn hợp lý. Tham khảo \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-nextjs\">khoá học Next.js: học framework React hiện đại\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Ch2>Sai lầm thường gặp khi học React\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Thay đổi state trực tiếp (\u003Ccode>state.push(...)\u003C\u002Fcode>) thay vì tạo giá trị mới.\u003C\u002Fli>\n\u003Cli>Dùng \u003Ccode>useEffect\u003C\u002Fcode> cho mọi thứ, kể cả những giá trị có thể tính trực tiếp khi render.\u003C\u002Fli>\n\u003Cli>Quên mảng dependency hoặc khai báo sai, gây vòng lặp gọi API vô hạn.\u003C\u002Fli>\n\u003Cli>Dùng index của mảng làm \u003Ccode>key\u003C\u002Fcode> khi danh sách có thể thay đổi thứ tự.\u003C\u002Fli>\n\u003Cli>Chia component quá nhỏ hoặc quá lớn; hãy chia theo trách nhiệm rõ ràng.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>React render hoạt động như thế nào?\u003C\u002Fh2>\n\u003Cp>Hiểu cơ chế render giúp bạn tránh nhiều lỗi và viết ứng dụng nhanh hơn. Mỗi khi state hoặc props của một component thay đổi, React gọi lại hàm component đó để tạo ra mô tả giao diện mới. React so sánh mô tả mới với mô tả cũ và chỉ cập nhật những phần thật sự thay đổi trên DOM.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Render không đồng nghĩa với cập nhật DOM:\u003C\u002Fstrong> component có thể render lại nhưng nếu kết quả giống cũ, DOM không bị đụng tới.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Component cha render thì component con cũng render\u003C\u002Fstrong> theo mặc định. Nếu một component con nặng, bạn có thể cân nhắc \u003Ccode>React.memo\u003C\u002Fcode>, nhưng chỉ khi đo đạc thấy cần.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>State cập nhật theo “ảnh chụp”:\u003C\u002Fstrong> trong một lần render, giá trị state là cố định. Nếu cần cập nhật dựa trên giá trị trước, dùng dạng hàm: \u003Ccode>setCount(c => c + 1)\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ch2>Tổ chức thư mục dự án React\u003C\u002Fh2>\n\u003Cp>Không có cấu trúc bắt buộc, nhưng một cách tổ chức rõ ràng giúp dự án dễ mở rộng:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>src\u002F\n  components\u002F   # component dùng chung: Button, Modal, CourseCard\n  features\u002F     # theo tính năng: auth\u002F, courses\u002F, cart\u002F\n  hooks\u002F        # custom hook dùng chung\n  lib\u002F          # gọi API, tiện ích\n  pages\u002F hoặc app\u002F  # các trang (tuỳ router\u002Fframework)\n  styles\u002F\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Khi dự án lớn, tổ chức theo \u003Cstrong>tính năng\u003C\u002Fstrong> (mỗi thư mục chứa component, hook, API của tính năng đó) thường dễ bảo trì hơn tổ chức theo loại file. Quan trọng là cả nhóm thống nhất một quy ước.\u003C\u002Fp>\n\n\u003Ch2>Kiểm thử ứng dụng React\u003C\u002Fh2>\n\u003Cp>Viết test giúp bạn tự tin khi sửa code. Bộ công cụ phổ biến gồm Vitest hoặc Jest để chạy test và React Testing Library để kiểm tra component theo cách người dùng tương tác: tìm nút theo chữ hiển thị, bấm nút, kiểm tra nội dung xuất hiện. Với luồng quan trọng như đăng nhập, thanh toán, có thể bổ sung test end-to-end bằng Playwright hoặc Cypress.\u003C\u002Fp>\n\n\u003Ch2>Câu hỏi thường gặp\u003C\u002Fh2>\n\u003Ch3>ReactJS là framework hay thư viện?\u003C\u002Fh3>\n\u003Cp>Về mặt chính thức React là thư viện tập trung vào giao diện. Next.js hay Remix mới là framework đầy đủ xây dựng trên React.\u003C\u002Fp>\n\u003Ch3>Học React mất bao lâu?\u003C\u002Fh3>\n\u003Cp>Nếu đã vững JavaScript, bạn có thể nắm các khái niệm cơ bản trong vài tuần. Để tự tin làm dự án thật cần thêm thời gian luyện tập với routing, gọi API và quản lý state.\u003C\u002Fp>\n\u003Ch3>Nên học React hay Vue hay Angular?\u003C\u002Fh3>\n\u003Cp>Cả ba đều tốt. React có hệ sinh thái rất lớn; \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-vue-js-vue3\">Vue\u003C\u002Fa> dễ tiếp cận; \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-angular\">Angular\u003C\u002Fa> đầy đủ và có cấu trúc chặt, hay gặp trong doanh nghiệp. Hãy chọn một và học sâu.\u003C\u002Fp>\n\u003Ch3>Có cần học class component không?\u003C\u002Fh3>\n\u003Cp>Không cần ưu tiên. Code React mới chủ yếu dùng function component và hooks. Bạn chỉ cần đọc hiểu class component khi bảo trì dự án cũ.\u003C\u002Fp>\n\u003Ch3>React có tốt cho SEO không?\u003C\u002Fh3>\n\u003Cp>Ứng dụng React chỉ render phía trình duyệt có thể gặp hạn chế về SEO. Dùng Next.js với SSR hoặc SSG giúp nội dung có sẵn trong HTML, thân thiện hơn với công cụ tìm kiếm.\u003C\u002Fp>\n\n\u003Ch2>Kết luận\u003C\u002Fh2>\n\u003Cp>React giúp xây dựng giao diện hiện đại bằng component và state. Hãy học vững JavaScript trước, nắm chắc hooks, làm dự án có gọi API, rồi tiến tới TypeScript và Next.js. Nếu cần lộ trình bài bản kèm dự án, tham khảo \u003Ca href=\"\u002Fkhoa-hoc\u002Fkhoa-hoc-reactjs\">khoá học ReactJS lập trình web hiện đại\u003C\u002Fa> của MelyDemy.\u003C\u002Fp>\n",{"description":286,"keywords":293},[294,295,296,297,298],"ReactJS","trình","học","React","bản",{"fullname":300,"avatar":11,"position":301,"quote":11},"Mely Demy","Editor",{"url":11,"alt":285},[304,312,320,328,336,344],{"id":305,"slug":306,"title":307,"excerpt":308,"createdAt":309,"updatedAt":309,"category":310,"thumbnail":311},"9aa1bf78-82ec-4bf0-b0ff-7b0a7bf4b22a","hoc-ai-bat-dau-tu-dau","Học AI bắt đầu từ đâu? Lộ trình cho dev và người mới","Lộ trình học AI: dùng công cụ AI, Python, toán nền, machine learning, deep learning, LLM và AI agent.","2026-11-03T15:09:31",{"name":75,"slug":289,"description":11},{"url":11,"alt":307},{"id":313,"slug":314,"title":315,"excerpt":316,"createdAt":317,"updatedAt":317,"category":318,"thumbnail":319},"f3ad15b5-1753-46e0-ab87-ab9f767c8030","chung-chi-aws-nen-thi-cai-nao","Chứng chỉ AWS nên thi cái nào? Lộ trình từ cơ bản","So sánh Cloud Practitioner, Solutions Architect Associate\u002FProfessional, Developer Associate; lộ trình và cách ôn.","2026-11-03T15:09:08",{"name":75,"slug":289,"description":11},{"url":11,"alt":315},{"id":321,"slug":322,"title":323,"excerpt":324,"createdAt":325,"updatedAt":325,"category":326,"thumbnail":327},"d7e50156-ec43-4afc-b097-1979e02e8d8a","typescript-la-gi","TypeScript là gì? Vì sao dev JavaScript nên học","TypeScript là gì, khác JavaScript thế nào, kiểu dữ liệu, interface, generic và cách dùng với React.","2026-11-03T15:08:43",{"name":75,"slug":289,"description":11},{"url":11,"alt":323},{"id":329,"slug":330,"title":331,"excerpt":332,"createdAt":333,"updatedAt":333,"category":334,"thumbnail":335},"f6d8e6c9-7289-4c91-a5f5-f5f66c9bc5dc","kubernetes-la-gi","Kubernetes là gì? Pod, Node, Service giải thích dễ hiểu","Kubernetes (K8s) là gì, khi nào cần, các khái niệm pod, node, deployment, service và so với Docker.","2026-11-03T15:08:20",{"name":75,"slug":289,"description":11},{"url":11,"alt":331},{"id":337,"slug":338,"title":339,"excerpt":340,"createdAt":341,"updatedAt":341,"category":342,"thumbnail":343},"59f770d8-1fad-4707-99e0-780fc7b997e1","lo-trinh-hoc-devops","Lộ trình học DevOps bắt đầu từ đâu cho người mới","DevOps bắt đầu từ đâu: Linux, Git, Docker, CI\u002FCD, Kubernetes, cloud AWS và giám sát với Grafana.","2026-11-03T15:07:57",{"name":75,"slug":289,"description":11},{"url":11,"alt":339},{"id":345,"slug":346,"title":347,"excerpt":348,"createdAt":349,"updatedAt":349,"category":350,"thumbnail":351},"94151f16-08e8-47d6-95f1-599aeceaec4c","hoc-sql-co-ban","Học SQL cơ bản: SELECT, JOIN, GROUP BY kèm ví dụ","SQL cơ bản cho người mới: truy vấn, lọc, JOIN, GROUP BY, index và bài tập với MySQL.","2026-11-03T15:07:33",{"name":75,"slug":289,"description":11},{"url":11,"alt":347},[353,356,359,362,365,368],{"id":305,"slug":306,"title":307,"excerpt":308,"createdAt":309,"updatedAt":309,"category":354,"thumbnail":355},{"name":75,"slug":289,"description":11},{"url":11,"alt":307},{"id":313,"slug":314,"title":315,"excerpt":316,"createdAt":317,"updatedAt":317,"category":357,"thumbnail":358},{"name":75,"slug":289,"description":11},{"url":11,"alt":315},{"id":321,"slug":322,"title":323,"excerpt":324,"createdAt":325,"updatedAt":325,"category":360,"thumbnail":361},{"name":75,"slug":289,"description":11},{"url":11,"alt":323},{"id":329,"slug":330,"title":331,"excerpt":332,"createdAt":333,"updatedAt":333,"category":363,"thumbnail":364},{"name":75,"slug":289,"description":11},{"url":11,"alt":331},{"id":337,"slug":338,"title":339,"excerpt":340,"createdAt":341,"updatedAt":341,"category":366,"thumbnail":367},{"name":75,"slug":289,"description":11},{"url":11,"alt":339},{"id":345,"slug":346,"title":347,"excerpt":348,"createdAt":349,"updatedAt":349,"category":369,"thumbnail":370},{"name":75,"slug":289,"description":11},{"url":11,"alt":347}]