kiến thức React cho người mới bắt đầu: Cách tạo một ứng dụng từ a-z

xin cách vừa học vừa làm React kiểu mì ăn liền :beat_brick::beat_brick: kỳ này trên lớp có mấy cái đồ án mà đó giờ chưa đụng cái này bao giờ mà giờ học kiểu sâu thì sợ không đủ thời gian
Bạn mô tả thử 5 tính năng chính xem. Coi thử tôi có thể giúp gì hoặc gợi ý học gì.
 
xin cách vừa học vừa làm React kiểu mì ăn liền :beat_brick::beat_brick: kỳ này trên lớp có mấy cái đồ án mà đó giờ chưa đụng cái này bao giờ mà giờ học kiểu sâu thì sợ không đủ thời gian
Đồ án viết bằng React ăn liền dễ toang lắm.
Php rồi render template thôi
 
Bạn mô tả thử 5 tính năng chính xem. Coi thử tôi có thể giúp gì hoặc gợi ý học gì.
Thầy cũng mới đưa đề tài nên e cũng chưa bàn vs nhóm tính năng chi tiết nữa thím. Về cơ bản là làm một sàn thương mại điện tử đấu giá như eBay ấy.
 
Những bài viết như này, đọc và viết không cẩn thận sẽ bị sai lệch nhiều kiến thức.

Việc quá nhiều Component được ref với nhau cũng không hẳn là tốt. Nó chả khác gì loops & callback hell cả.

Còn lý do tôi chọn react cho nhiều dự án,
  • là nó có cộng đồng lớn
  • nhiều thư viện hỗ trợ.
  • đã được chứng minh qua nhiều project lớn
Người mới học đọc post này dễ đi đường rẽ quay đầu
 
Mì ăn liền dạo này hơi nhiều. Fen muốn khác đi và hay hơn thì tạo 1 project bằng npm luôn chứ k dùng cli của thằng react, như thế sẽ dần dần giải thích được react nó dựa vào đâu để hoạt động, nó hoạt động thế nào,...
 
Mì ăn liền dạo này hơi nhiều. Fen muốn khác đi và hay hơn thì tạo 1 project bằng npm luôn chứ k dùng cli của thằng react, như thế sẽ dần dần giải thích được react nó dựa vào đâu để hoạt động, nó hoạt động thế nào,...
Tôi chỉ cần mua xe, học lái rồi đi chứ cần gì phải học chế tạo động cơ mới được phép lái xe nhỉ :)
 
Tôi chỉ cần mua xe, học lái rồi đi chứ cần gì phải học chế tạo động cơ mới được phép lái xe nhỉ :)
Tôi thấy mua xe và học lái k giống học cái này. Fen mua xe và học lái xong thì có thể lái được nhiều loại xe do chúng có nhiều điểm tương đồng. Học React xong fen có thể làm React rất OK, có thể thôi nhé, vì trong quá trình làm fen học k kỹ dễ dẫn đến nhức đầu khó hiểu, ví dụ sao JS nó chạy ở đây như vầy, DOM là cái khỉ gì, ặc request này bị CORS rồi làm sao để fix bây giờ, v.v. Xong ví dụ fen chạy qua framework khác thì lại mất công học từ đầu vì k hiểu bản chất của ngôn ngữ lập trình và principal của framework mình muốn sử dụng. Trong khi đó nếu fen học từ đầu, chú tâm vào hiểu NNLT là gì, tại sao lại có hàm, có biến, có vòng lặp,... thì fen hòa nhập rất nhanh với bất kỳ framework nào sau khi đã học sơ khởi 1 framework tương đồng.
Tôi nhớ 1 câu của ông nào đó nói là Sự hiểu biết là việc kết nối các tri thức lại với nhau.
 
Tôi thấy mua xe và học lái k giống học cái này. Fen mua xe và học lái xong thì có thể lái được nhiều loại xe do chúng có nhiều điểm tương đồng. Học React xong fen có thể làm React rất OK, có thể thôi nhé, vì trong quá trình làm fen học k kỹ dễ dẫn đến nhức đầu khó hiểu, ví dụ sao JS nó chạy ở đây như vầy, DOM là cái khỉ gì, ặc request này bị CORS rồi làm sao để fix bây giờ, v.v. Xong ví dụ fen chạy qua framework khác thì lại mất công học từ đầu vì k hiểu bản chất của ngôn ngữ lập trình và principal của framework mình muốn sử dụng. Trong khi đó nếu fen học từ đầu, chú tâm vào hiểu NNLT là gì, tại sao lại có hàm, có biến, có vòng lặp,... thì fen hòa nhập rất nhanh với bất kỳ framework nào sau khi đã học sơ khởi 1 framework tương đồng.
Tôi nhớ 1 câu của ông nào đó nói là Sự hiểu biết là việc kết nối các tri thức lại với nhau.
Nói chuyện không nhất quán gì thế. Setup project từ npm thì liên quan gì NNLT với network?
tôi đọc còm trước của anh tưởng bắt ông thớt npm init rồi hì hục cài bundle, build, file loader :).
Chẳng qua thằng CRA nó ôm hết nhưng làm không tới thôi chứ như bên angular cli thì không thấy ai chê dev tool cả
 
VS Code là một IDE - Intergrated Development Enviroment
Nhầm gòi bác ưi
1664505006045.png
 

You might have often came across the term IDE and coding editor. But are you sure about you knowing the difference between them?

IDE or Code Editor? Visual Studio or VS code?​

If you weren’t knowing it before then let me tell you that VS code or Visual Studio Code is an editor while Visual Studio is an IDE (Integrated Development Environment).

I’m addressing this fact because VS code feels more like an IDE than just an editor. Visual Studio is an IDE because it comes with built in support for editor, compilers, interpreters, intellisense, and many other features but VS code doesn’t comes packed with all of these.

https://medium.com/analytics-vidhya...you-need-make-an-informed-choice-5bb2a4f48ec2


IDE is an integrated environment to develop some kind of software. Text editor is something that edit text. But what happened in recent years was that text editor went far beyond editing text due to mainly plugins.

I would say because of that the boundary between text editors and IDEs are increasingly blurred. What lies between them is less and less technical and more and more personal or conventional. So why differentiating at all? Consider it an IDE if you believe it can be so INTEGRATED with all its plugins and configurations. Consider it a text editor if you believe it is less PRECONFIGURED

Visual Studio Code is an amazing and advanced code editor with some features of an IDE such as debugging, and can apply other features via plugins…. however it is not a complete environment with everything that a full scale IDE such as Visual Studio provides out of the box.

https://www.quora.com/Why-isnt-Visual-Studio-Code-an-IDE

Thanks bác.
 

IDE or Code Editor? Visual Studio or VS code?​

If you weren’t knowing it before then let me tell you that VS code or Visual Studio Code is an editor while Visual Studio is an IDE (Integrated Development Environment).

I’m addressing this fact because VS code feels more like an IDE than just an editor. Visual Studio is an IDE because it comes with built in support for editor, compilers, interpreters, intellisense, and many other features but VS code doesn’t comes packed with all of these.

https://medium.com/analytics-vidhya...you-need-make-an-informed-choice-5bb2a4f48ec2


IDE is an integrated environment to develop some kind of software. Text editor is something that edit text. But what happened in recent years was that text editor went far beyond editing text due to mainly plugins.

I would say because of that the boundary between text editors and IDEs are increasingly blurred. What lies between them is less and less technical and more and more personal or conventional. So why differentiating at all? Consider it an IDE if you believe it can be so INTEGRATED with all its plugins and configurations. Consider it a text editor if you believe it is less PRECONFIGURED

Visual Studio Code is an amazing and advanced code editor with some features of an IDE such as debugging, and can apply other features via plugins…. however it is not a complete environment with everything that a full scale IDE such as Visual Studio provides out of the box.

https://www.quora.com/Why-isnt-Visual-Studio-Code-an-IDE

Thanks bác.
ok bác. Em dùng cả intellij lẫn VS code. Nên thành ra cảm thấy nếu gọi vs Code là 1 IDE thì nó hơi khập khiễng, chỉ vậy thôi. Hehe.
 
- Ok đi tiếp nào. Hôm nay thêm vài components nữa thì tôi sẽ giới thiệu về React Hooks và chuyển sang backend, làm việc với api, kết nối frontend và backend, sử dụng firebase để xác thực authentication, và deploy. Có quá nhiều việc cần phải làm.

- Update hiện tại là voz không cho tôi upload code vì có lỗi "Oops! We ran into some problems. Please try again later. More error details may be in the browser console." Vào console thì báo lỗi "Failed to load resource: net::ERR_BLOCKED_BY_CLIENT" và lỗi "draft:1 Failed to load resource: the server responded with a status of 403 ()".

- Vì vậy, tôi sẽ chuyển qua phần React Hooks. Hẳn anh chị sẽ thắc mắc Hooks dùng để làm gì? Ưu điểm của nó? Một số trường hợp sử dụng use cases thường gặp? etc.

- Đầu tiên, Hooks là gì? Hook trong tiếng anh nghĩa là cái móc hoặc lưỡi câu. Hooks trong React là những tính năng được tạo ra để làm việc với trạng thái state, tương tác với nó, và thay đổi nó. Vậy trạng thái state là gì? Trả lời - bất kỳ điều gì hiển thị trên website hoặc ứng dụng mà có sự thay đổi. Ví dụ:
  • Một ô checkbox, lúc vừa tải xong trang web render chưa có dấu tick, là ở state 1. Anh chị trỏ chuột và click vào, ô checkbox đó chuyển trạng thái checked, nghĩa là ở state 2
  • Một biểu mẫu form tạo tài khoản mới register. Ở trạng thái ban đầu nó để trống leave it empty, là ở state 1. Anh chị điền vào ô user, password, và confirm password, click vào nút button Register, nó sẽ chuyển trạng thái, trình duyệt browser popup một tin nhắn mới alert "Successful", sau đó ba ô về trạng thái empty, đó là React đang chuyển trạng thái liên tục state 2, state 3
  • Một ứng dụng tính toán + - x / đơn giản của Google. Trạng thái ban đầu chưa có số nhập vào input, đó là trạng thái state 1. Anh chị nhập 6 x 5, đó là state 2. Google trả về kết quả 30, đó là state 3

- Những ứng dụng hiện đại modern applications ngày nay, với yêu cầu tương tác cao với users, load nhanh, đòi hỏi dùng ít data payloads thấp, sẽ ưa thích React Hooks. Bởi vì nó giải quyết được những tác vụ cơ bản mà không cần phải viết thêm classes.
 
Last edited:
Back
Top