Nhập môn cơ bản về ReactJs

1989

ReactJs đang được rất nhiều lập trình viên tìm đến, nếu bạn là người mới thì bài viết này sẽ giúp bạn biết được ReactJs là gì, những khái niệm cơ bản cũng như làm thế nào để đưa giao diện html vào reactjs. Cùng bắt đầu tìm hiểu thôi nào!

Vậy React là gì?

Được phát triển Facebook, React là một thư viện javascript phổ biến nhất hiện nay dùng để xây dựng UI (User Interface) có tính tương tác cao, có trạng thái và có thể sử dụng lại được. Điển hình như Facebook và Instagram là nơi làm ra và maintain React.js thì Yahoo hay Airbnb là những ví dụ nổi bật có sử dụng thư viện này.

Điểm thu hút của React chính là việc nó không chỉ hoạt động trên phía client mà còn được render trên server và có thể kết nối với nhau.

Có thể bạn quan tâm:

  Học ReactJS trong 15 phút

Những khái niệm cơ bản

Virtual DOM:

Virtual DOM là một object Javascript, mội object chứa đầy đủ các thông tin cần thiết để tạo ra một DOM, nó sẽ giúp tối ưu hóa việc re-render DOM tree thật bằng cách tính toán sự thay đổi giữa object và tree thật khi dữ liệu thay đổi. Việc chỉ node gốc có trạng thái và sẽ tái cấu trúc lại toàn bộ khi nó thay đổi dẫn đến việc DOM tree sẽ thay đổi một phần làm ảnh hưởng đến tốc độ xử lý. Sử dụng virtual DOM giúp cho ReactJs cải thiện vấn đề này và giúp cải thiện hiệu năng cho ứng dụng.

Giới thiệu về JSX:

JSX là một dạng ngôn ngữ với ưu điểm nhanh hơn cho phép viết các mã HTML trong Javascript. Với các ưu điểm:

  • Nhanh hơn: JSX giúp tối ưu hóa thời gian khi biên dịch sang mã Javascript, các đoạn mã này được thực hiện nhanh hơn sơ với viết trực tiếp bằng Javascript.
  • An toàn hơn: khác biệt với Javascript, JSX được biên dịch trước khi chạy, giống như Java, C++ (statically-typed) giúp phát hiện lỗi ngay trong quá trình biên dịch, bên cạnh đó nó còn có tính năng gỡ lỗi khi biên dịch rất tốt.
  • Dễ dàng hơn: JSX kế thừa dựa trên Javascript giúp cho các lập trình viên Javascript dễ dàng sử dụng.

Components:

Khác với các framework khác, React không sử dụng template mà được xây dựng xung quanh các component. Trong React, để xây dựng trang web chúng ta sử dụng những component, có thể tái sử dụng một component ở nhiều nơi với các trạng thái hoặc thuộc tính khác nhau và một component có thể chứa thành phần khác. Mỗi component có một trạng thái riêng, có thể thay đổi và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái.

Props:

Giúp các component tương tác với nhau. Khi component nhận input gọi là props à trả thuộc tính mô tả những gì component con sẽ render. Đặc tính của Prop là bất biến.

State:

Thể hiện trạng thái của ứng dụng. Khi state thay đổi thì component đồng thời render lại để cập nhật UI.

REACT NATIVE – Overview Cách Làm App Trong 3 Tiếng

Cách đưa giao diện HTML vào ReactJS

Làm thế nào để tạo project và chạy ra màn hình mặc định của reactjs:

Để tao một project reactjs chúng ta sử dụng cú pháp:

Trong cú pháp này thì my-app chính là tên project

Nhập môn cơ bản về ReactJs
Dòng lệnh yarn create react-app my-app khi chạy trên terminal

Sau khi thực hiện xong chúng ta sẽ vào thư mục chứa project và tiến hành chạy yarn start đến bước này đã tạo xong câu lệnh kia để chạy.

Nhập môn cơ bản về ReactJs
Khi chạy terminal với câu lệnh yarn start

Một lúc sau trình duyệt sẽ tự mở và project của chúng ta đã xuất hiện trước mắt

Phân tích qua các thư mục ban đầu:

Nhập môn cơ bản về ReactJs

Trước tiên là node_modules đây chính là nơi sẽ chứa các thư viện của app, thư mục public sẽ chứa các file liên quan tới người dùng như hình ảnh sau này. Tiếp đến chính là cốt lõi của chúng ta, trong thư mục src chứa toàn bộ code dành cho app này.

Cắt ghép một số giao diện đơn giản:

Trước tiên, điều cần làm đó chính là bạn phải tạo thêm một thư mục components để chứa các components của hệ thống.

Nhập môn cơ bản về ReactJs
Cấu trúc thư mục sau khi thêm Component

Trong kiến trúc này điều bạn cần để ý đến index.html đây chính là html của ứng dụng. Bạn có thể nhúng các thư viện như javascript, css …

Bạn cần chú ý đến thẻ  divid="root vì thẻ này chứa nội dung ứng dụng của bạn. Nó được gọi ở index.js

Đến đây bạn sẽ thấy chỗ render <App /> đây chính là component chính được gọi và đưa vào thẻ div có  id = "root"

Chúng ta cùng xem file app.js có gì nhé

Component này được xem là component cha và các component khác vào khi muốn chạy chúng. Chúng ta gọi  <UsersComponent/> là nội dung ứng dụng và import file css vào để dùng chung cho cả app.

Nếu chỉ nhìn sơ qua thì nó giống như các thẻ html đơn thuần nhưng không phải là tất cả, ở đây một bên là html thuần, bên còn lại là jsx. Ví dụ như class trong html nhưng lại là classNamejsx.

Bạn cũng có thể vào đây để chuyển toàn bộ code html sang jsx

Quay lại với project ở file UsersComponent.js

Chúng ta có thể nhìn thấy đoạn code nội dung trên tất cả từ đầu đến cuối được tạo bởi một div duy nhất. Sau khi viết code theo các code trên, bạn có thể tạo ra cho mình ứng dụng chạy bằng reactjs.

Nhập môn cơ bản về ReactJs
Đây chính là kết quả

Tổng kết:

Qua những gì chúng ta tìm hiểu ở trên bạn đã học được “bài học vỡ lòng” của dân lập trình đó chính là Hello Word rồi. Hy vọng rằng bài viết này sẽ cung cấp cho bạn những kiến thức cơ bản trước khi bắt đầu tìm hiểu sâu hơn về ReactJS nhé.

TopDev via Viblo