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.

https://d1iv5z3ivlqga1.cloudfront.net/wp-content/uploads/2021/04/29235048/1_QAG9RXQyyMAY7i9OYo84FA.png
Got It Vietnam
February 04, 2021
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
Visual Studio Code là gì? Lợi thế từ việc sử dụng Visual Studio Code

Visual Studio Code là gì? Lợi thế từ việc sử dụng Visual Studio Code

Visual Studio Code là gì mà khiến cộng đồng IT Việt yêu thích đến vậy? Trình soạn thảo code này sẽ giúp bạn xây dựng ứng dụng web và cloud như thế nào? Hãy cùng Got It tìm hiểu Visual Studio Code ngay hôm nay nhé! Mục lục1. Visual Studio Code là gì?2. Phân biệt […]
Hướng dẫn cách sử dụng Visual Studio Code căn bản

Hướng dẫn cách sử dụng Visual Studio Code căn bản

Nhanh, gọn nhẹ, đa năng và hoạt động mạnh mẽ trên đa nền tảng là những ưu điểm nổi trội của trình soạn thảo VS Code. Cách sử dụng Visual Studio Code cơ bản sẽ được hướng dẫn cụ thể trong bài viết dưới đây. Mục lụcVisual Studio Code là gì và dành cho ai?Phiên […]
Hướng dẫn cách format code Visual Studio Code với Prettier

Hướng dẫn cách format code Visual Studio Code với Prettier

Việc định dạng mã sao cho thống nhất là một thử thách khó khăn đối với đa phần lập trình viên. Prettier chính là công cụ format code của Visual Studio Code giúp bạn duy trì sự nhất quán trong toàn bộ cơ sở mã của nhóm. Cùng tìm hiểu cách dùng Prettier để format […]
Cách sử dụng phím tắt sắp xếp code trong Visual Studio Code

Cách sử dụng phím tắt sắp xếp code trong Visual Studio Code

Chỉ với một vài thao tác đơn giản với phím tắt sắp xếp code trong Visual Studio Code, bạn đã có thể tạo ra một đoạn mã đẹp mắt, ngay ngắn và dễ đọc. Cùng tìm hiểu về cách sử dụng phím tắt này và khám phá thêm một vài phím tắt hữu ích khách […]
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 […]