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