JSX là gì? Tại sao cần JSX? | JSX ReactJS
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- 👉 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. - วิทยาศาสตร์และเทคโนโลยี
👉👉👉 Đ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é 😍😍
ok bạn ơi.
ồ 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 ạ?
❤
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 ạ
@@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.
Yeah, có video mới rồi. Cảm ơn anh =))
Huhu giấc mơ có thật, ngày đầu tuần ảnh ra 3 tập luôn !!! Cảm ơn anh!
em nộp bài ạ: const course = {
courses.map((course) => {return {course.name}})
}
ReactDOM.render(course, document.querySelector('.root'))
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
@@quangtoanta8577 bro làm phức tạp hóa lên thế =))
@@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 =))
@@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
@@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
Hay quá, cảm ơn anh nhiều, hướng dẫn từ gốc đến ngọn luôn
Quá tuyệt vời, cảm ơn anh nhiều.
Em nộp bài ạ
const h =
{courses.map(function(element){
return {element.name}
})}
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 ạ
1 ngày 2 video học cho phê luôn anh hihi
const ul=
{course.map(function(e) {
return {e.name}
})}
const root=ReactDOM.createRoot(document.querySelector('#root'))
root.render(ul)
qua hay anh a cam on anh rat nhieu
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
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
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
Tuyệt quá a ơi
Tuyệt cú mèo quá anh ơi @@
const ul =
{
courses.map((el,index) => (
{el.name}
))
}
em nộp bài anh ơi
Anh giảng rất hay, dễ hiểu. Cảm ơn anh rất nhiều!
F8 - Nhà cái hàng đầu Việt Nam
Nhà cái lâp trình b êi
Hay quá anh
hay quá a ơi
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ó
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.
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
Nay cắt tóc đẹp trai quá anh ơi :))
cảm ơn
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
nice !
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ê :))
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 ạ
được nha
Yeahh ,
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
bạn tắt mấy cái extensions fomat code trong vs code là được
jsx hộ trợ viết html vào trong js
Cam on video cua ban. Nhung ma ban noi 'JavaScript' nhanh minh cu nghe nham thanh 'Transcript'.
Ồ 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
nộp bài , hi
Em chạy toàn lỗi này mong mọi người giúp em ạ :Target container is not a DOM element.
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})}
key lam gi v ban
Like đi mng
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 ạ .
Fpt
k biết ông chọn chưa nhưng recommend là fpt là ông
@@kylewiley em chọn học trường gần cđ FBT rồi ạ :)
1