Học ReactJS: Cơ bản tới Nâng cao (Phần 1)

Đăng bởi admin - November 18, 2021
ReactJS là gì

Dành cho các bạn chỉ có kiến thức căn bản về Javascript nhưng muốn biết thêm về ReactJS. Bài viết lần này FPT Software Academy sẽ đưa ra một số kiến thức nền tảng kèm ví dụ xoay quanh ReactJS để bạn đọc có cái nhìn tổng quan và làm quen dần với ReactJS một cách dễ dàng hơn.

1. ReactJS là gì?

ReactJS là một thư viện Javascript dùng để xây dựng giao diện người dùng. Được nhận xét bởi đa số cộng đồng coder thì ReactJS rất nhanh, dễ học và vui.

Tiếp theo chúng ta sẽ bắt đầu đến với những khái niệm nha!

2. Component

React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Bạn có thể tạo ra một component bằng các gọi phương thức createClass của đối tượng React, điểm bắt đầu khi tiếp cận với thư viện này. 

Ví dụ:

  Lộ Trình học ReactJS từ cơ bản tới nâng cao

Phương thức createClass nhận vào một tham số, là đối tượng mô tả đặc tính của component. Đối tượng này bao gồm tất cả các phương thức để hình thành nên component. Phương thức quan trọng nhất là render, phương thức này được trigger khi component đã sẵn sàng để được render lên trên page.

Trong hàm đó, bạn sẽ trả về một mô tả cho việc bạn muốn React render cái gì lên trên page. Như trong ví dụ ở trên,  đơn giản chúng mình đang muốn render một button.

3. JSX — Javascript Syntax Extension

Đây đơn giản là một syntax extension của Javascript. Với JSX bạn có thể viết Javascript với những tag giống như XML (XML-like). Về bản chất, các tag thực sự là những lời gọi hàm, sẽ được chuyển đổi trong React code và end up dưới dạng HTML và Javascript trong cây DOM.

Nhưng với những gì bạn biết ở hiện tại, chỉ cần hiểu đơn giản nó giống như là HTML/XML với một số khả năng khác.

4. Multiple components

Còn nếu bạn muốn lồng nhiều component vào nhau, bạn sẽ làm điều này trong lệnh return của phương thức render.

Ví dụ:

Lộ Trình học ReactJS từ cơ bản tới nâng cao (Phần 1)

Phía trên, ta đang lồng Form component vào trong App component. Đây là một dạng quan hệ cha con (parent-child) mà bạn có thể dễ dàng nhận thấy trong HTML.

Phương thức React.render() như các bạn thấy ở trên nhằm mục đích kickstart việc render, và render thừ root component, trong trường hợp trên là App vào trong DOM với container cụ thể là element có id là app

5. Hết phần 1

Bài đọc lần này FPT Software Academy đem tới cho bạn 3 thuật ngữ chúng ta thường xuyên nhắc tới khi làm việc trên ReactJS. Trong phần sau chúng ta sẽ tìm hiểu về các kiểu data và cách chúng di chuyển trong ReactJS.

Nhớ liên tục theo dõi trang web chính thức của FPT Software Academy để cập nhật những thông tin mới nhất của chúng mình nha!

——————————–

Hiện tại FPT Software đang có kế hoạch tuyển dụng lập trình viên ReactJS với chương trình Fresher Frontend ReactJS 

hoccungFA ReactJs
Có thể bạn quan tâm

Quy định về việc đóng phí, bảo lưu, hoàn phí, sang tên của Học Viện Đào Tạo FPT Software

Học Viện Đào Tạo FPT Software thông báo về quy định đóng phí, bảo lưu, hoàn...
Đăng bởi LinhTDK - November 25, 2022

Chân dung “nữ tướng” đầy bản lĩnh của FPT Software Academy

Với những đức tính vốn có của phụ nữ như kiên trì, tỉ mỉ, chỉn chu cộng...
Đăng bởi LinhNTK7 - October 13, 2022

“Mình đã thử rất nhiều cách để cân bằng giữa việc học và làm việc”

Đó là những chia sẻ mở đầu của Nguyễn Hữu Hoàng – Hiện đang theo học...
Đăng bởi LinhNTK7 - September 28, 2022