Làm Library Chỉ Với ~30 dòng code hoạt động như React+Redux | Thực hành JavaScript cơ bản

👉 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-offline-hn
Trong video này chúng ta sẽ đi vào làm Library Chỉ Với ~30 dòng code hoạt động như React+Redux | Thực hành JavaScript cơ bản
- PHẦN 2, SỬ DỤNG THƯ VIỆN NÀY CODE TODO APP: kzread.info/dash/bejne/h5WepMScopvZlsY.html
- Xem chọn bộ Javascript nâng cao của F8: fullstack.edu.vn/courses/javascript-nang-cao
Các bạn thấy đấy, để làm ra một ứng dụng khó/nâng cao/xịn xò đòi hỏi chúng ta phải nắm rất chắc những kiến thức từ khi học lập trình cơ bản, lập trình cơ bản là nền móng giúp các bạn đi xa hơn. Vì vậy, đừng nóng vội, đừng chủ quan nhé. Hãy chăm chỉ, chịu khó, hãy biến lập trình thành niềm yêu thích, đam mê để sống với nó mỗi ngày. Tin mình đi, bạn sẽ giỏi!
Phân cảnh trong video:
00:00 -Giới thiệu
06:10 - Vào code nào
Hướng dẫn này mình tham khảo từ thư viện innerself
#hoclaptrinh #hoclaptrinhmienphi #javascript #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/lessons-for-newbie
Xây dựng giao diện với HTML, CSS: fullstack.edu.vn/courses/html-css
Xây dựng web responsive: fullstack.edu.vn/courses/responsive-web-design
Lập trình Javascript cơ bản: fullstack.edu.vn/courses/javascript-co-ban
Lập trình Javascript nâng cao: fullstack.edu.vn/courses/javascript-nang-cao
Làm việc với Terminal & Ubuntu: fullstack.edu.vn/courses/windows-terminal-wsl
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-css-tutorials
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu.vn/courses/tool-canh-bao-so-len-mat
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: groups/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.

Пікірлер: 80

  • @congdatt
    @congdatt3 жыл бұрын

    Tết này em đang cày F8 hí hí. Cảm ơn sự chăm chỉ của a. Chúc a năm mới an lành 🙆

  • @HaiNguyen-he3gi
    @HaiNguyen-he3gi3 жыл бұрын

    Chúc anh năm mới mạnh khỏe, thành công trong công việc, vạn sự như ý. Mong anh ra nhiều video hay như này nữa.

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

    hay quá ạ, đoạn cuối nhờ anh chỉ ra đường code chạy mà em thông não rất nhiêu luôn

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

    Em xem 5 lần cuối cũng cũng hiểu nguyên lí, cảm ơn a Sơn và đội ngũ F8 ạ

  • @baolee4622
    @baolee46223 жыл бұрын

    quá hay. hiểu được bản chất của react = redux. Video của anh chất lượng quá. Cảm ơn anh nhiều

  • @DuyTran-ss4lu
    @DuyTran-ss4lu3 жыл бұрын

    Quá là hay. Cảm ơn anh đã mang đến kiến thức này. Xem xong đầu óc e như được mở mang đến 1 chân trời mới z

  • @F8VNOfficial

    @F8VNOfficial

    3 жыл бұрын

    *Làm ngay ứng dụng Todo App với thư viện này (video sau video này) luôn e ơi*

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

    em phải xem 4 lần, và lần thứ 5 vừa xem vừa code y hệt thì cuối cùng đã hiểu đc nguyên lý hoạt động... Cảm ơn anh

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

    Kiến thức này có lẽ hiếm có! Ít ai hiểu rõ và chia sẻ tận gốc vấn đề

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

    Phân cảnh trong video: 00:00 - Chém gió (có thể bỏ qua) 06:10 - Vào quẩy code thôi =))) Anh em lưu ý, bài học này với mục đích nâng cao level/kiến thức cho các bạn. Thư viện này có thể dùng để xây dựng những ứng dụng nhỏ trong quá trình học tập như Todos App, App quản lý X, v.v. Để triển khai sản phẩm thực tế sẽ cần phải thêm nhiều tính năng + fix nhiều vấn đề liên quan tới bảo mật & hiệu năng.

  • @ducpham206
    @ducpham2063 жыл бұрын

    anh sơn ra vài video về git tuy không phải là lập trình nhưng nó khá quan trọng cho các bạn đi làm đấy ạ

  • @tranhuuquocat8927
    @tranhuuquocat89272 жыл бұрын

    bữa nào bạn hướng dẫn nhiều clip build core như vậy nha. kiểu như build reactjs bằng JS thuần Mình thấy cách này nó hay hơn là học framework

  • @MinhVu-kj5zn
    @MinhVu-kj5zn2 жыл бұрын

    Hay quá anh

  • @hoangucollection6181
    @hoangucollection61812 жыл бұрын

    đúng câu cây củi khô cũng có thể làm vũ khí..quan trọng là hiểu và vận dụng cái căn bản theo ý mình muốn .

  • @ongnguyen2276
    @ongnguyen22762 жыл бұрын

    Hay quá anh ơi

  • @KhangNguyen-kq2iw
    @KhangNguyen-kq2iw2 жыл бұрын

    Ch có seri react mà coi đc video là hiểu có seri react là siêu phẩm nóng hổi r, hóng còn hơn hóng phim bom tân thầy Sơn ơi kkk

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

    Chắc đây sẽ là video nhiều view nhất =)) đúng câu "Cơ bản nhưng lại rất là khó, dễ thì ai cũng làm được " =)) Cảm ơn a đã chia sẻ thông tin rất tuyệt vời ak

  • @minh2410
    @minh24103 жыл бұрын

    Tết a ra video xịn xò thế

  • @igdev6095
    @igdev60953 жыл бұрын

    Công nhận a chăm kinh, mấy ngày tết này thề e học ko vào nên tải liên minh về đánh :v

  • @F8VNOfficial

    @F8VNOfficial

    3 жыл бұрын

    Thế thì e vẫn đang là "phải" học rồi haha. Chúc em năm mới thành công nhé!

  • @ngthuongnguyen9804
    @ngthuongnguyen98042 жыл бұрын

    A ơi a làm một project sử dụng triệt để JavaScript đi

  • @quangtoanta8577
    @quangtoanta85772 жыл бұрын

    Xem 3 lần r anh ơi! còn 47 lần nữa =))

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

    Qua hay

  • @NamHoang-wk8ik
    @NamHoang-wk8ik2 жыл бұрын

    Mặc dù nghe chưa hiểu, nhưng cảm ơn anh chỉ dẫn nhiệt tình :)

  • @F8VNOfficial

    @F8VNOfficial

    2 жыл бұрын

    Chịu khó ôn lại 2-3 ngày là ok nhé bạn

  • @quangnhan9244
    @quangnhan92443 жыл бұрын

    khó quá anh ơi, đúng là cơ bản e vẫn chưa chắc

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

    1 năm trước xem lơ ngơ, phải làm việc với JS 1 năm sau, e mới hiểu được a làm gì @@

  • @phamvanhieu240
    @phamvanhieu2403 жыл бұрын

    xem 2 lần rồi mà vẫn lú a ơi :)))

  • @ductc241

    @ductc241

    3 жыл бұрын

    bạn hiểu được bài này chưa ạ ;(((

  • @phamvanhieu240

    @phamvanhieu240

    3 жыл бұрын

    @@ductc241 bài này dùng higher order function nên load hơi chậm chút :))) t chuyển qua học react rồi quay lại xem bài này xem lại rồi.

  • @ductc241

    @ductc241

    3 жыл бұрын

    @@phamvanhieu240 tui cũng định v :))) chứ nhìn code như này choáng quá

  • @thienpham.h5954
    @thienpham.h595411 ай бұрын

    F8 là một trong những kênh rất chất lượng

  • @F8VNOfficial

    @F8VNOfficial

    11 ай бұрын

    Cảm ơn bạn nhiều nha 😘🫶

  • @cejay2064
    @cejay20642 жыл бұрын

    Mọi người giúp e giải thích arrow function ở phút thứ 26 đc ko ạ

  • @minhtran-uv4nd
    @minhtran-uv4nd3 жыл бұрын

    Hàm connect hack não thật

  • @2kvlogs785
    @2kvlogs7853 жыл бұрын

    đúng là khó hơn rất là nhiều thật !!! =)))

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

    16:57 | sao em dùng func ở chỗ reduce ko đc mà phải là arrow func ạ

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

    Mình có hệ thống lại bài này, bạn nào thấy khó hiểu quá thì tham khảo: drive.google.com/file/d/1uNnhYqX-FCCDdmxdJNv19wB2u7cmyw83/view?usp=sharing Bài này không khó ở logic mà khó ở cách sắp xếp hệ thống, mà trước khi làm bài này các bạn phải nắm chắc các kiến thức làm việc với mảng, hàm, và các tác vụ trong ES6. Các bạn coi lại 183, 189, 190, 192 và 193 trong khoá cơ bản nhé.

  • @tuannguyenhuu964

    @tuannguyenhuu964

    Жыл бұрын

    Bạn ơi bạn gõ tên bài ra luôn được không ạ, mình kiếm số mà ko thấy trùng. Mình mới coi lại bài về destructuring, rest, spread, tagged template literals, modules trong JS ES6. Bạn xem còn bài nào mình thiếu nữa ạ chứ mình ko hiểu a Sơn từ lúc 23:13

  • @minh551

    @minh551

    Жыл бұрын

    @@tuannguyenhuu964 ông cho tôi fb hay discord đi. Chúng ta cùng nhau thảo luận bài này.

  • @KhangNguyen-gb9vn

    @KhangNguyen-gb9vn

    Жыл бұрын

    10 điểm

  • @thanhattran8101

    @thanhattran8101

    Жыл бұрын

    tuyet voi lam

  • @ahnlinh2197
    @ahnlinh21973 ай бұрын

    cũng phải mất 2 ngày mới đả thông kinh mạch được, quá lú

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

    em chưa hiểu lắm chỗ connect, tại sao chỗ này mình lại return (props, ...args) nhỉ, vì phần nay em debug ra underfined, Mong anh rep hehe

  • @vunguyenhuy3688
    @vunguyenhuy36882 жыл бұрын

    hay js callback với function truyền thiếu tham số

  • @bigwife512
    @bigwife5122 жыл бұрын

    Anh cho em hỏi hàm connector(app) trả về cái hàm (props,...args)=> {return component(Object..)} mà hàm này chưa được gọi sao nó chạy đc vào hàm component(Object) vậy anh

  • @tvtchanel9845

    @tvtchanel9845

    2 жыл бұрын

    connector(app) được chạy sẽ chạy hàm có đối số là component, và component là app mà app đã được chạy và render ròi nên nó sẽ tiếp tục chạy hàm còn lại và return ra cái component(Object)

  • @myhanhnguyen5198
    @myhanhnguyen51982 жыл бұрын

    anh ơi, ở đoạn 18:40, true, false c anh nói là gì vậy ạ? nội dung đó ở video nào ạ?

  • @trannguyenvu5958

    @trannguyenvu5958

    2 жыл бұрын

    truthy và falsy, ở bài 28 khóa js cơ bản nha

  • @myhanhnguyen5198

    @myhanhnguyen5198

    2 жыл бұрын

    Cảm ơn bạn nhé❤️

  • @minhvuong7706
    @minhvuong77062 жыл бұрын

    Bài giảng này của anh rất hay ạ. Em cảm ơn anh ạ Em có chút thắc mắc là tại 47:00 khi gọi hàm component() thì có phải giống là connector(App) không. Và tại 52:33 khi đã dispatch xong và gọi lại render() và trong function render lại gọi lại hàm component() thì vẫn giống là connector(App) đúng không ạ

  • @tranucminh6099

    @tranucminh6099

    2 жыл бұрын

    Mình cũng có thắc mắc giống bạn.

  • @oduythinh5513
    @oduythinh55133 жыл бұрын

    Nhìn hơi giống mô hình MVC nhỉ =.=

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

    em có thắc mắc ạ , em code y như anh đến đoạn phút thứ 38 rồi , đúng ra thì nó phải hiện bên live server chứ , nhưng nó không hiện lỗi , cũng không hiện lên chữ Hello World , em đã kiểm tra từng dòng code rồi vẫn không biết sai ở đâu ạ

  • @F8VNOfficial

    @F8VNOfficial

    Жыл бұрын

    Em debug biết code chạy tới đc tới dòng nào chưa em?

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

    anh hơi cho em xin link source code với ạ

  • @phonels9847
    @phonels98477 ай бұрын

    ai giải thích giúp mình đoạn (props,...args) được không? đoạn này mình thấy vẫn chưa được gọi sao mà cái component() sau hàm lại đc gọi chạy nhỉ

  • @quano6185

    @quano6185

    7 ай бұрын

    theo mình hiểu thì nó chỉ là nhận đối số thôi chứ chưa gọi, đến lần gọi component() cuối cùng ý là để merge tất cả các dữ liệu trước đó xong truyền vào component() _ lúc này đủ tham số rồi nên mình mới gọi

  • @nguyenthanhtrung5674
    @nguyenthanhtrung56742 жыл бұрын

    18:59 anh ơi anh nói "true si" với "false si" viết như thế nào ạ để em tìm keyword. Em mò chưa ra

  • @F8VNOfficial

    @F8VNOfficial

    2 жыл бұрын

    Truly, falsy em nha

  • @nguyenthanhtrung5674

    @nguyenthanhtrung5674

    2 жыл бұрын

    @@F8VNOfficial cảm ơn anh nhiều 😁

  • @vunguyenhuy3688
    @vunguyenhuy36882 жыл бұрын

    công nhận khó thật nhưng dễ ko tới lược mình

  • @hoangtranvan1582
    @hoangtranvan15822 жыл бұрын

    Thông não r

  • @hoangucollection6181
    @hoangucollection61812 жыл бұрын

    em chỉ mới hiểu được từng ý code của anh để làm gì chứ chưa đủ trình mà tự code được như vậy. (có code được chắc cũng do xem nhiều lần quá rồi nhớ nhớ code lại thôi ạ) Nên em hỏi là giờ em học thẳng reactJS luôn được chưa anh ạ :((. thất nghiệp lâu quá em rén quá rồi ạ

  • @fullcoursesforfree

    @fullcoursesforfree

    11 ай бұрын

    còn theo ngành kh anh

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

    Khúc này rối nha.

  • @testtest-rj6mo
    @testtest-rj6mo3 жыл бұрын

    cày view :((

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

    Sao video mờ vậy anh

  • @F8VNOfficial

    @F8VNOfficial

    3 жыл бұрын

    Tiếng nữa em xem lại là nét nhé

  • @quynguyen-cy5by
    @quynguyen-cy5by3 жыл бұрын

    anh ơi chất lượng 360 :(( làm em vừa code vừa dính sát mặt vào nhìn khó

  • @F8VNOfficial

    @F8VNOfficial

    3 жыл бұрын

    Tiếng nữa em xem lại là nét nhé

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

    31:19

  • @luubaoncter8734
    @luubaoncter87342 жыл бұрын

    "Có những người 30-40-50 tuổi rồi ngta vẫn học được rất nhiều cái mới" => Vì họ quên hết mấy cái cũ rồi :v

  • @hoaitrung6955
    @hoaitrung69552 жыл бұрын

    18:40 đoạn này e không hiểu, x => x là sao ạ

  • @TuanLe-bp2be

    @TuanLe-bp2be

    2 жыл бұрын

    18:40 , hình như bạn nói chỗ này, mình cũng không hiểu, Sơn có nói gì nghe giống như "true c, false c" gì đó và kêu học lại nhưng mình tìm không thấy. Kiến thức này là tập nào vậy mọi người?

  • @tinycat.99

    @tinycat.99

    2 жыл бұрын

    Cấu trúc es6. Trong ngoặc nó là hàm này function (x) { return (x && x!==true || x===0) }

  • @TuanLe-bp2be

    @TuanLe-bp2be

    2 жыл бұрын

    @@tinycat.99 àh, arrow function, mình chưa quen mắt với cách viết này nên bữa giờ không biết là viết cái gì. Cảm ơn bạn.

  • @thanhvo1703

    @thanhvo1703

    2 жыл бұрын

    @@tinycat.99 Bạn giải thích cho mình chỗ return 1 xíu được ko mình hơi lú. Nếu là true thì nó loại ra vì ko thỏa mãn điều kiện đó, vậy thì false thì nó thõa mãn là false && false !== true rồi mà thì nó vẫn phải được in ra chứ, còn nếu mình thêm && x !== false thì mình thấy mình hiểu nó loại được thằng false. Nhưng tại sao chỉ để x !== true mà nó vẫn loại được thằng false vậy bạn.

  • @loantruong7752

    @loantruong7752

    2 жыл бұрын

    @@thanhvo1703 Vì x=>x là false => false trong điều kiện và nên biểu thức logic cuối là false

Келесі