1 ReactJS là gì
-
React là một thư viện JavaScript mã nguồn mở, được xây dựng và phát triển bởi Facebook, giúp xây dựng giao diện người dùng. Rất nhiều thương hiệu lớn hàng đầu trên thế giới sử dụng React như Facebook, Instagram, Lazada, Mashable, Twitter,…
-
React JS là một thành phần trong ngôi nhà React, nó giúp xây dựng giao diện cho các ứng dụng trên nền tảng web. Ngoài ra, còn nhiều thành phần khác như React native được sử dụng xây dựng các ứng dụng di động, React VR được sử dụng để xây dựng các website và tương tác 360 độ, React Desktop xây dựng các ứng dụng trên desktop,… Vì thế đây là một thư viện giúp ta học một lần viết mọi nơi
-
React JS chỉ là một thư viện, không phải là một framework và trong mô hình MVC nó ứng với tầng View (V)
2 Dùng để làm gì, khi nào thì dùng
2.1 Dùng để làm gì
- React JS dùng để xây dựng các ứng dụng trên nền tảng web
- React JS có thể dùng xây dựng giao diện hoặc dùng để xây dựng các server
2.2 Khi nào thì dùng
- React JS dễ dàng quản lý khi quy mô mở rộng, lớn, dữ liệu thay đổi liên tục theo thời gian, nó không dành cho những ứng dụng nhỏ cần hoàn thành sớm
- React JS hỗ trợ rất tốt cho việc xây dựng các ứng dụng web Single Page
3 Cấu trúc, thành phần của ReactJS
React được xây dựng xung quanh các thành phần nhỏ gọi là component nhằm mục đích dễ quản lý và tái sử dụng. Dưới đây là các thành phần của một ứng dụng ReactJS
3.1 Component
Trong React JS, chúng ta xây dựng trang web sử dụng các component nhỏ. Chúng ta có thể tái sử dụng lại các component đó ở nhiều nơi một cách linh hoạt với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể có nhiều thành phần khác. Mỗi component có một trạng thái riêng có thể thay đổi được gọi là state. Trạng thái của component thay đổi thì component cũng được render lại một cách real-time.
Ví dụ: Một trang web sẽ có các component như Header, Content, Footer. Trong component Header có các component như Title, SearchBar,… Trong Content có các component như Form, Button,…
3.2 Props
Props chính là các thuộc tính của một component. Props giúp các component tương tác với nhau, component nhận input gọi là props và trả thuộc tính mô tả những gì component con sẽ render. Props giống như hằng số, không thay đổi được giá trị.
3.3 State
State là trạng thái của component, khi state thay đổi thì component cũng được render lại một cách đồng thời để cập nhật UI.
4 Cài đặt thế nào
Có nhiều cách cài đặt, dưới đây là cách đơn giản nhất để bắt đầu xây dựng một ứng dụng React mới. Trước hết, chúng ta cần cài đặt NodeJS phiên bản mới nhất, có thể cài thêm Yarn và một công cụ để viết code như Sublime Text, Atom, Visual Studio Code,…
4.1 Cài đặt create-react-app
Create-react-app là một câu lệnh giúp bạn khởi tạo một ứng dụng web reactjs ở bất cứ đâu, bất cứ hệ điều hành nào trên máy tính. Để sử dụng được lệnh này, rất đơn giản, bạn tiến hành: Mở công cụ dòng lệnh ưa thích của bạn (Command Line, Windows Power Shell,…) và thực hiện câu lệnh: npm install -g create-react-app.
Sau khi cài đặt xong, chúng ta có thể dùng lệnh create-react-app để tạo một ứng dụng web sử dụng react ở bất kỳ đâu.
4.2 Tạo ứng dụng
Sử dụng câu lệnh create-react-app <tên app> và đợi cho tới khi cài đặt xong. Sau đó, thực hiện câu lệnh cd <tên app> để di chuyển vào thư mục của ứng dụng.
Sử dụng câu lệnh npm start để chạy ứng dụng. Sau khi thực hiện câu lệnh, các mã nguồn của ứng dụng sẽ được build ra các file thực thi và được mở trực tiếp ngay trên trình duyệt trên địa chỉ: http://localhost:3000
Dưới đây là cấu trúc các thành phần của một ứng dụng reactjs
- Thư mục node_modules chứa các thư viện, các thành phần cần thiết cThư mục public chứa các file tài nguyên mà người dùng có thể tải trực tiếp về máy
- Thư mục src chứa source code của ứng dụng
- File package.json chứa các cấu hình cho ứng dụng
4.3 Xuất bản ứng dụng
Sau một thời gian phát triển ứng dụng, bạn muốn đưa ứng dụng của bạn lên host để mọi người cùng sử dụng. Khi đó, bạn cần xuất bản ứng dụng của mình. Để xuất bản, bạn thực hiện câu lệnh npm run build. Sau khi thực hiện xong, ứng dụng của bạn được lưu trong thư mục build, bạn có thể up các file này lên host để tiến hành sử dụng.
5 Demo
Dưới đây là hình ảnh của trang login sử dụng react js:
Để kiểm tra xem ứng dụng của bạn hay một trang web nào đó bạn đang xem có sử dụng reactjs không, bạn có thể cài đặt tiện ích React Developer Tools trên trình duyệt. Tiện ích này do chính Facebook phát triển và có thể sử dụng trên trình duyệt Chrome và Firefox. Sau khi cài đặt tiện ích này, bạn vào một trang web nào đó, nếu biểu tượng của tiện ích có màu:
- Trắng: trang web đó không sử dụng reactjs
- Vàng: trang web đó đang trong chế độ phát triển, chưa xuất bản phiên bản chính thức
- Xanh: trang web đó đã ở chế độ xuất bản chính thức
