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

  • @F8VNOfficial
    @F8VNOfficial2 жыл бұрын

    👉👉👉 Đ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

    @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

    @vuongqtvn

    2 жыл бұрын

  • @adminappkiemtien5762

    @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.

  • @cheng6630
    @cheng66302 жыл бұрын

    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ó

  • @aminguyen7212
    @aminguyen72122 жыл бұрын

    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.

  • @pineapplesub3581
    @pineapplesub35812 жыл бұрын

    Huhu giấc mơ có thật, ngày đầu tuần ảnh ra 3 tập luôn !!! Cảm ơn anh!

  • @ComradeBao
    @ComradeBao2 жыл бұрын

    Yeah, có video mới rồi. Cảm ơn anh =))

  • @chickendev5759
    @chickendev5759 Жыл бұрын

    Hay quá, cảm ơn anh nhiều, hướng dẫn từ gốc đến ngọn luôn

  • @NhatNguyen-zg6il
    @NhatNguyen-zg6il2 жыл бұрын

    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

  • @h_sangg9459
    @h_sangg94592 жыл бұрын

    em nộp bài ạ: const course = { courses.map((course) => {return {course.name}}) } ReactDOM.render(course, document.querySelector('.root'))

  • @quangtoanta8577

    @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

    @lightd1404

    Жыл бұрын

    @@quangtoanta8577 bro làm phức tạp hóa lên thế =))

  • @lightd1404

    @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

    @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

    @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

  • @HaiNguyen-bx4kr
    @HaiNguyen-bx4kr2 жыл бұрын

    Quá tuyệt vời, cảm ơn anh nhiều.

  • @hoangnguyen-qf7ht
    @hoangnguyen-qf7ht10 ай бұрын

    const ul= {course.map(function(e) { return {e.name} })} const root=ReactDOM.createRoot(document.querySelector('#root')) root.render(ul)

  • @zakiryu2065
    @zakiryu20652 жыл бұрын

    1 ngày 2 video học cho phê luôn anh hihi

  • @chinhphuc9847
    @chinhphuc98472 жыл бұрын

    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 ạ

  • @TuiTenBo-xw5qy
    @TuiTenBo-xw5qy2 жыл бұрын

    Em nộp bài ạ const h = {courses.map(function(element){ return {element.name} })}

  • @TuTran-th3wd
    @TuTran-th3wd2 жыл бұрын

    qua hay anh a cam on anh rat nhieu

  • @NamNguyen-oz8uj
    @NamNguyen-oz8uj2 жыл бұрын

    Anh giảng rất hay, dễ hiểu. Cảm ơn anh rất nhiều!

  • @TuanTran-rn5ot
    @TuanTran-rn5ot Жыл бұрын

    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

  • @sonbuiquang6599
    @sonbuiquang65992 жыл бұрын

    Tuyệt quá a ơi

  • @thanhhoangngoc8251
    @thanhhoangngoc82512 жыл бұрын

    Tuyệt cú mèo quá anh ơi @@

  • @vietucnguyen4452
    @vietucnguyen44522 жыл бұрын

    F8 - Nhà cái hàng đầu Việt Nam

  • @TranucTV

    @TranucTV

    2 жыл бұрын

    Nhà cái lâp trình b êi

  • 2 жыл бұрын

    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

  • @vankhiem3614
    @vankhiem36142 жыл бұрын

    Hay quá anh

  • @phamquoctuan5037
    @phamquoctuan50372 жыл бұрын

    const ul = { courses.map((el,index) => ( {el.name} )) } em nộp bài anh ơi

  • @FangYuan51
    @FangYuan512 жыл бұрын

    hay quá a ơi

  • @phuongnamhoang7897
    @phuongnamhoang78972 жыл бұрын

    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

  • @khoatrananh7372
    @khoatrananh73722 жыл бұрын

    Nay cắt tóc đẹp trai quá anh ơi :))

  • @ando1349
    @ando13492 жыл бұрын

    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ê :))

  • @thang8617
    @thang86172 жыл бұрын

    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

    @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.

  • @huyvo8126
    @huyvo812610 ай бұрын

    cảm ơn

  • @hoangvua2k38
    @hoangvua2k382 жыл бұрын

    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

  • @hungcao1342
    @hungcao1342 Жыл бұрын

    nice !

  • @vietucnguyen4452
    @vietucnguyen44522 жыл бұрын

    Yeahh ,

  • @hoaimiqng
    @hoaimiqng2 жыл бұрын

    nộp bài , hi

  • @huytruong288
    @huytruong2882 жыл бұрын

    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

    @duyfly2710

    2 жыл бұрын

    được nha

  • @vuxuanhuy9079
    @vuxuanhuy9079 Жыл бұрын

    jsx hộ trợ viết html vào trong js

  • @hopnguyen3177
    @hopnguyen31772 жыл бұрын

    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

    @nguyenmanhtienk15dn82

    Жыл бұрын

    bạn tắt mấy cái extensions fomat code trong vs code là được

  • @amhongson6394
    @amhongson63942 жыл бұрын

    Like đi mng

  • @namnguyenhoai2259
    @namnguyenhoai2259 Жыл бұрын

    Cam on video cua ban. Nhung ma ban noi 'JavaScript' nhanh minh cu nghe nham thanh 'Transcript'.

  • @xb_mathsonghanhcungcon2126

    @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

  • @tanhoang28201
    @tanhoang282012 жыл бұрын

    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

    @lightd1404

    Жыл бұрын

    có phải bạn truyển thêm đối số vào hàm render không =))

  • @nghiatranvan9442
    @nghiatranvan94422 жыл бұрын

    const ulDOM = { courses.map((course, index) => {course.name})}

  • @minhphamduy4003

    @minhphamduy4003

    2 жыл бұрын

    key lam gi v ban

  • @nhat4546
    @nhat45462 жыл бұрын

  • @becode9266
    @becode92662 жыл бұрын

    1

  • @lightd1404
    @lightd1404 Жыл бұрын

    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)

  • @jockerthe8189
    @jockerthe81892 жыл бұрын

    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

    @sharkreview2024

    2 жыл бұрын

    Fpt

  • @kylewiley

    @kylewiley

    2 жыл бұрын

    k biết ông chọn chưa nhưng recommend là fpt là ông

  • @jockerthe8189

    @jockerthe8189

    2 жыл бұрын

    @@kylewiley em chọn học trường gần cđ FBT rồi ạ :)

Келесі