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

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
Ảnh anh Hiếu quoting

Giảng viên FPT Software Academy: Thổi bùng đam mê học lập trình trong lòng học viên

Tuy đã kinh qua nhiều vị trí khác nhau trong ngành Công Nghệ Thông Tin nhưng với...
Đăng bởi ThoNTA3 - December 15, 2023

Workshop dành riêng cho sinh viên Kỹ sư cầu nối Hàn Quốc

“Talk with FPT Korea” là một workshop đặc biệt dành riêng cho học viên đang trong...
Đăng bởi ThoNTA3 - December 15, 2023

Giấy chứng nhận Đăng ký hoạt động Giáo dục nghề nghiệp

Học Viện Đào Tạo FPT Software chính thức được Sở Lao động – Thương binb...
Đăng bởi LinhTDK - May 17, 2023