JSX là gì? Tại sao cần JSX? | JSX ReactJS
Ғылым және технология
👉 Xem Lộ Trình Học: fullstack.edu.vn/learning-paths
👉 Đăng Ký Học Offline Tại F8: short.f8team.dev/dang-ky-hoc-...
Video này chúng ta sẽ tìm hiểu JSX là gì? Tại sao cần JSX? | JSX ReactJS
Qua những bài học trước anh em đã biết cách tạo ra React element với React.createElement() rồi đúng không? Nếu dùng cách này để code giao diện chắc chắn sẽ rất khó, chính vì vậy JSX ra đời giúp developer như chúng ta có cú pháp "ngọt ngào" hơn.
Tiếp theo ta cần thư viện Babel, JSX cần được phân tích cú pháp và chuyển đổi về code Javascript.
Các bạn có thể thử Live demo ở đây nhé: bit.ly/2VOIMN7
Phân đoạn trong video: JSX là gì? Tại sao cần JSX?
00:00 - Chữa bài tập
02:12 - JSX là gì?
#hoclaptrinh #hoclaptrinhmienphi #javascript #reactjs #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu.vn/courses/less...
Xây dựng giao diện với HTML, CSS: fullstack.edu.vn/courses/html...
Xây dựng web responsive: fullstack.edu.vn/courses/resp...
Lập trình Javascript cơ bản: fullstack.edu.vn/courses/java...
Lập trình Javascript nâng cao: fullstack.edu.vn/courses/java...
Làm việc với Terminal & Ubuntu: fullstack.edu.vn/courses/wind...
Xây Dựng Website với ReactJS: fullstack.edu.vn/courses/reactjs
Xây dựng web với Node & Express: fullstack.edu.vn/courses/nodejs
HTML, CSS tips: fullstack.edu.vn/courses/html...
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu.vn/courses/tool...
Xem thêm tại: fullstack.edu.vn/courses
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.
Пікірлер: 89
👉👉👉 Đoạn 10:02 mình nhầm nhé, ngáo quá sorry anh em. Với React.createElement thì prop "style" sẽ nhận value là object các bạn nhé, truyền chuỗi sẽ bị lỗi. Mình sẽ nói chi tiết về cách sử dụng & làm việc với JSX trong những videos tới nên anh em yên tâm nhé 😍😍
2 жыл бұрын
ok bạn ơi.
@khanhduong4716
2 жыл бұрын
ồ video bên youtube lên trước bên web F8 à, mà sao UI bên F8 cái thanh slider đầu tiên dùng chuột kéo được qua lại mà mấy thanh bài tập với bài viết ở dưới anh lại ko đồng bộ luôn cho UX nó mượt ạ?
@vuongqtvn
2 жыл бұрын
❤
@adminappkiemtien5762
2 жыл бұрын
anh ơi php có thể kết hợp với reactjs dc ko ạ, e tìm video nhưng không có video cụ thể mà toàn video nước ngoài ko ạ, phải chăng php không phù hợp để kết hợp với php hay sao vậy ạ
2 жыл бұрын
@@adminappkiemtien5762 php có thể kết hợp được với react nhưng mà đừng nên như vậy, nếu bạn làm thuần SPA thì nên cho nó một server (hoặc docker...) riêng để chạy. Còn nếu muốn chạy lai để SEO thì nên dùng node cho nó thuận tiện.
Hay quá ạ, làm react 1 năm rồi mà giờ mới hiểu bản chất sâu bên trong nó
bài giảng rất hay ngắn gọn xúc tích, ko lòng vòng vào thẳng nội dung chính, ví dụ trực quan dễ hiểu, tài liệu và phiên bản lun cập nhật mới nhất, thực sự cảm ơn anh vì sự nhiệt tâm và những kiến thức anh đã truyền đạt.
Huhu giấc mơ có thật, ngày đầu tuần ảnh ra 3 tập luôn !!! Cảm ơn anh!
Yeah, có video mới rồi. Cảm ơn anh =))
Hay quá, cảm ơn anh nhiều, hướng dẫn từ gốc đến ngọn luôn
Làm trái nghề xong quay về lại code mà gặp ngay ông này , ông mà gặp tui ngoài đường là no bia với tôi
em nộp bài ạ: const course = { courses.map((course) => {return {course.name}}) } ReactDOM.render(course, document.querySelector('.root'))
@quangtoanta8577
2 жыл бұрын
const ul = {courses.reduce(function (acc, currValue) { return acc.concat(`${currValue.name}`) }, []).join('')} ReactDOM.render(ul, document.getElementById('root')) Sao tôi làm ntn mà sai nhỉ ? AI giúp cái
@lightd1404
Жыл бұрын
@@quangtoanta8577 bro làm phức tạp hóa lên thế =))
@lightd1404
Жыл бұрын
@@quangtoanta8577 const ul = {courses.reduce(function (acc, currValue) { return acc.concat({currValue.name}) }, [])} ReactDOM.render(ul, document.getElementById('root')) Bỏ cái `` này đi và không cần join(''') nưa là ra =))
@hoangtruong5663
Жыл бұрын
@@quangtoanta8577 hình như do lần lập 2 acc trở thành kiểu string nên ko dùng hàm join đc nên bị lỗi
@CHINHHANTUONG
Жыл бұрын
@@hoangtruong5663 ko phải đâu bạn, do khi join lại thì nó trở thành 1 chuỗi kiểu này: {"html,cssResponesive web designReactJs"} nên nó in ra chuỗi luôn
Quá tuyệt vời, cảm ơn anh nhiều.
const ul= {course.map(function(e) { return {e.name} })} const root=ReactDOM.createRoot(document.querySelector('#root')) root.render(ul)
1 ngày 2 video học cho phê luôn anh hihi
a cho e hỏi muốn truyền 2 style vào cùng 1 thẻ thì có truyền được không ạ , như trong video a truyền color vậy muốn truyền thêm 1 trường như background-color thì làm thế nào ạ
Em nộp bài ạ const h = {courses.map(function(element){ return {element.name} })}
qua hay anh a cam on anh rat nhieu
Anh giảng rất hay, dễ hiểu. Cảm ơn anh rất nhiều!
anh ơi cho em hỏi xíu, việc render theo kiểu khác gì so với {component()} ạ, và nên render theo kiểu nào anh ha
Tuyệt quá a ơi
Tuyệt cú mèo quá anh ơi @@
F8 - Nhà cái hàng đầu Việt Nam
@TranucTV
2 жыл бұрын
Nhà cái lâp trình b êi
Mọi người ơi cho mình hỏi cách làm slider trang f8 như đầu video vậy. Nó đi tới slide cuối xong lại đến slide đầu
Hay quá anh
const ul = { courses.map((el,index) => ( {el.name} )) } em nộp bài anh ơi
hay quá a ơi
Em học reactjs được 1 thời gian rồi nhưng giờ xem video của anh mới hiểu cặn kẽ. Cảm ơn anh nhiều
Nay cắt tóc đẹp trai quá anh ơi :))
hồi lăng xang vô học react dc 1 tuần nghẻo vì chả hiểu gì , giờ có hứng lại học ở đẩy phải nói là thông thông rất phê :))
a có thể làm thêm video giải thích về cách babel nó chuyển đổi cú pháp jsx sang mã react được không? E rất quan tâm cái này, nhưng ít người dạy về nó
@F8VNOfficial
2 жыл бұрын
Cái này ít ng quan tâm nên a chưa ưu tiên làm video đc. E than khảo từ khoá "Babel under the hood" xem, anh nghĩ là có nhiều nơi giải thích mà. Cơ bản nó dùng regex để parse sau đó transform thôi e nha.
cảm ơn
ad ơi cho mình hỏi xíu. mình đang bị lỗi tự động nhảy dòng lên sau khi save khi viết code trong cặp thẻ và do mình không có thói quen sử dụng dấu ";" cuối mỗi câu lệnh nên sẽ bị lỗi (thêm ; thì sẽ ko lỗi). có cách nào khắc phục lỗi trên ko, mình xài vscode
nice !
Yeahh ,
nộp bài , hi
cho em hỏi . E có làm web react nhưng file thì chỉ sử dụng file .js thôi , k có dùng .jsx v có sao không ạ
@duyfly2710
2 жыл бұрын
được nha
jsx hộ trợ viết html vào trong js
Có ai viết code xong SAVE lại thì nó tự động format xóa tab space và khoảng trắng k ạ? ai biết cách fix lỗi này k? giúp mình với
@nguyenmanhtienk15dn82
Жыл бұрын
bạn tắt mấy cái extensions fomat code trong vs code là được
Like đi mng
Cam on video cua ban. Nhung ma ban noi 'JavaScript' nhanh minh cu nghe nham thanh 'Transcript'.
@xb_mathsonghanhcungcon2126
Жыл бұрын
Ồ thì đúng gần như bạn ""Việt hóa"" cách phât âm của nó còn gì! Phiên âm quốc tế là: ˈjävəskript (ˈjävə skript) trọng âm rơi vào âm ˈjä nên âm və gần như mất đồng thời nối âm với skript
Em chạy toàn lỗi này mong mọi người giúp em ạ :Target container is not a DOM element.
@lightd1404
Жыл бұрын
có phải bạn truyển thêm đối số vào hàm render không =))
const ulDOM = { courses.map((course, index) => {course.name})}
@minhphamduy4003
2 жыл бұрын
key lam gi v ban
1
const courses = [ { name: "Learn JS" }, { name: 'Learn HTML, CSS', }, { name: 'Learn React' }, ] const ulReact = {courses.map((course) => {course.name}) } const rootElement = document.getElementById('root') const root = ReactDOM.createRoot(rootElement) root.render(ulReact)
E ở Hà Nội thì lên học trường nào ạ (học cao đẳng ạ tại trước e học ngành khác rồi giờ ko thi lại chắc chỉ học đc cao đẳng) . Các a,chị đi trước cho e xin ý kiến ạ .
@sharkreview2024
2 жыл бұрын
Fpt
@kylewiley
2 жыл бұрын
k biết ông chọn chưa nhưng recommend là fpt là ông
@jockerthe8189
2 жыл бұрын
@@kylewiley em chọn học trường gần cđ FBT rồi ạ :)