Hướng dẫn học ReactJS cơ bản cho người mới bắt đầu

Nếu bạn là một người mới tiếp cận lĩnh vực lập trình, có lẽ việc học ReactJs sẽ tốn khá nhiều thời gian. Bài viết này sẽ hướng dẫn học ReactJS bằng cách đưa ra một số khái niệm cơ bản nhất cho người mới bắt đầu.

Components trong ReactJS

Components trong ReactJS là các block xây dựng nên mọi ứng dụng React. Một component có thể được sử dụng độc lập hoặc kết hợp với nhiều components khác nhau. Quan trọng nhất vẫn là tập trung vào template mà chúng cung cấp. Điều này sẽ được điền vào bằng dữ liệu biến sau đó. Mục đích chính của việc xây dựng component trong React chính là tạo ra JSX từ template này. Sau đó, JSX sẽ được biên dịch sang HTML và hiển thị lại trên DOM.

Có 2 loại React JS Components bạn cần biết đó là: functional components và class-based components. Khi sử dụng functional components, bạn sẽ dễ dàng xử lý dữ liệu hơn vì chúng chỉ cần nhận thông tin sau đó biến đổi thành JSX là đủ. Bạn cũng có thể coi functional components giống như “presentational component”, vì chúng chủ yếu liên quan đến việc hiển thị  UI.

ReactJS là kiến thức quan trọng với 1 lập trình viên
ReactJS là kiến thức quan trọng với 1 lập trình viên

JSX

Khi đã tìm hiểu xong về Components, bước tiếp theo của cẩm nang hướng dẫn học ReactJS chính là tìm hiểu về JSX. 

JSX được sử dụng để tạo ra đầu ra của mỗi component, là thứ mà các lập trình viết sử dụng để tạo nên giao diện đồ hoạ mà người dùng có thể thấy được trên browser. Thực chất, JSX là một syntax extension giúp cho bạn có thể viết XML vào trong một file Javascript. 

Bằng việc sử dụng cú pháp của XML, JSX có thể giúp lập trình viên định nghĩa phần hiển thị giao diện trong ReactJS khá giống với cách mà họ thao tác trên HTML. Hầu hết các thuộc tính cho các tag sử dụng trong HTML đều được thay đổi một chút về cả tên và giá trị khi chúng được sử dụng trong JSX. Ví dụ như thuộc tính “class” sẽ là “className” trong JSX vì class là một từ khóa trong ngôn ngữ lập trình trong Javascript. 

Về bản chất, trong ba thành phần để một trang web có thể hiển thị trên trình duyệt là HTML, Javascript và CSS thì JSX chính là thành phần Javascript. Bạn bắt buộc phải dịch chúng sang JavaScript thuần túy bằng một transpiler (phổ biến nhất là Babel) thì trình duyệt mới có thể đọc và thực thi  chúng. Các transpiler chỉ làm nhiệm vụ khá đơn giản là chuyển cú pháp JSX thành các lời gọi React.createElement() lồng nhau được viết bằng Javascript.

Bạn nhất định phải học kỹ về ReactJS nếu muốn trở thành 1 lập trình viên giỏi
Bạn nhất định phải học kỹ về ReactJS nếu muốn trở thành 1 lập trình viên giỏi

State

Khi tìm hiểu về reactjs, state chắc chắn sẽ khiến bạn khó hiểu nhất. Nhưng đây là kiến thức bạn bắt buộc phải nắm rõ, nếu muốn ứng dụng thành thạo reactjs cho các dự án của bạn. State thể hiện trạng thái nội tại của một component. 

Các giá trị trong state được dùng để tính toán ra một thông tin nào đó sử dụng trong việc hiển thị. Các giá trị này hoàn toàn có thể được thay đổi dựa vào hành động của người dùng, ví dụ như một cú click chuột vào một button sẽ làm cho nó từ trạng thái active chuyển thành disabled. Mỗi class-based component sẽ có có một state object riêng. 

State object thay đổi sẽ làm component cùng các component  con của nó được render lại từ đầu. State cũng có thể được sử dụng ở functional component bằng cách sử dụng những hàm đặc biệt mà ReactJS cung cấp (React hooks) 

Props

Props là một object được cung cấp cho một component bởi parent của nó. Nếu nói JSX được sử dụng để tạo ra đầu ra của một component thì props giống như là đầu vào của component đó. Cùng một component nhưng có thể hiển thị khác nhau đôi chút ở những nơi khác nhau tùy thuộc vào props mà nó được truyền vào ở từng nơi.

Để tìm hiểu chuyên sâu về ReactJS, bạn nhất định phải thật kiên nhẫn
Để tìm hiểu chuyên sâu về ReactJS, bạn nhất định phải thật kiên nhẫn

Hy vọng bạn đã biết thêm về những kiến thức quan trọng liên quan tới ReactJS sau khi đọc những hướng dẫn học ReactJs hết sức cơ bản và khái quát trên đây. Các kiến thức này cần được nghiên cứu chuyên sâu nhất có thể khi học về lập trình.

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

branding
branding
February 04, 2021
0
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
4 quyển sách Python tiếng Việt cho người mới bắt đầu

4 quyển sách Python tiếng Việt cho người mới bắt đầu

Bạn muốn tìm hiểu về Python nhưng tìm đâu cũng chỉ thấy sách tiếng Anh? Đừng lo, Got It sẽ dành tặng bạn 4 quyển sách Python tiếng Việt cực kỳ hữu ích ngay trong bài viết này! Cùng khám phá nhé! Mục lụcPython cơ bản… Rất là cơ bản – Võ Tuấn DuyTớ Học […]
Tài liệu lập trình Python tiếng Việt tốt nhất hiện nay

Tài liệu lập trình Python tiếng Việt tốt nhất hiện nay

Nếu bạn đang tìm tài liệu lập trình Python tiếng Việt thì hãy tham khảo ngay ebook “Python cơ bản… Rất là cơ bản” của tác giả Võ Duy Tuấn. Đây là tài liệu cung cấp đầy đủ kiến thức Python cơ bản dành cho người Việt. Hãy cùng Got It khám phá tài liệu […]
Lộ trình học lập trình web dành cho người mới bắt đầu

Lộ trình học lập trình web dành cho người mới bắt đầu

Nhiều bạn muốn học lập trình web nhưng chưa biết bắt đầu từ đâu? Lộ trình học lập trình web như thế nào thì hiệu quả? Nếu bạn đang băn khoăn về đề này, hãy tham khảo lộ trình học lập trình web cho người mới bắt đầu dưới đây nhé! Mục lục1. Xác định […]
Clean code là gì? 5 lý do cần code “sạch”

Clean code là gì? 5 lý do cần code “sạch”

Mỗi ngành nghề đều có những cách thực hiện công việc được xem là chuẩn mực. Với lập trình viên, clean code là một trong số đó. Vậy clean code là gì? Hãy cùng Got It đi sâu vào clean code cũng như lý do cần áp dụng clean code nhé! Mục lục1. Clean code […]
6 tip tự học ngôn ngữ lập trình Python hiệu quả

6 tip tự học ngôn ngữ lập trình Python hiệu quả

Tự học ngôn ngữ lập trình Python không phải quá khó, nhưng cũng không hề dễ dàng. Đôi khi, bạn rất dễ nản, chểnh mảng học tập do không có người đốc thúc. Vậy thế nào để học ngôn ngữ này thật hiệu quả? Hãy cùng Got It tìm hiểu 6 tip tự học Python […]
Học ngôn ngữ Python cùng Python for Everybody

Học ngôn ngữ Python cùng Python for Everybody

Python là một trong những ngôn ngữ lập trình được ưa chuộng nhất hiện nay. Tuy nhiên, việc tự học ngôn ngữ Python không phải là đơn giản. Bạn cần lựa chọn được khoá học phù hợp và thực tiễn. Hôm nay, Got It sẽ chia sẻ tới bạn chi tiết về các khoá học […]