Mục lục [Ẩn]
Nếu Angular là một framework thì Reactjs là một library tập trung vào việc giải quyết các vấn đề ở view layer. Được xem là một thư viện của Javascript nối lên với xu hướng Single Page Application, Reactjs đang được nhiều người tin dùng lựa chọn. Vậy Reactjs là gì? Sử dụng Reactjs như thế nào? Hãy cùng tìm hiểu qua bài viết dưới đây.
1. Reactjs là gì?
ReactJS là một thư viện JavaScript mã nguồn mở, được Facebook thiết kế nhằm hỗ trợ thiết kế giao diện web UI nhanh hơn, mạnh hơn và hấp dẫn hơn. Bình thường các lập trình viên sẽ nhúng Javascript vào code HTML thông qua các attribute như AngularJS nhưng với Reactjs làm việc như một thư viện cho phép nhúng HTML vào javascript thông qua JSX. Qua đó bạn có thể dễ dàng lồng các đoạn HTML vào trong JSX làm cho các component dễ hiểu và dễ sử dụng hơn.
Reactjs là gì?
Trong Reactjs thường dùng javascript để thiết kế bố cục cho trang web, nhưng nhược điểm là cấu trúc khá khó. Thay vào đó sử dụng JSX và nhúng các đoạn HTML vào javascript, ta thấy cú pháp dễ hiểu hơn và JSX cũng có thể tối ưu code khi biên soạn. Vữa dễ cho người lập trình mà vừa tiện cho việc biên dịch.
>>> Xem thêm: Javascript là gì? Tại sao Javascript được gọi là NGÔN NGỮ CỦA TƯƠNG LAI?
2. Lợi ích khi sử dụng Reactjs
- Tạo ra cho chính bản thân nó một DOM ảo
Đây là nơi mà các component được tồn tại trên đó. Việc tạo ra dom như vậy giúp cải thiện hiệu suất làm việc rất nhiều, khi có tính toán cần thay đổi hoặc cần cập nhật những gì lên DOM thì ReactJS đều tính toán trước và việc còn lại chỉ là thực hiện chúng lên DOM, làm như vậy sẽ giúp cho ReactJS tránh được những thao tác cần có trên một DOM mà không cần tốn thêm bất cứ chi phí nào
- Việc viết các đoạn code JS sẽ trở nên dễ dàng hơn
Nó sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX nghĩa là cú pháp này cho phép ta trộn được giữa code HTML và Javascript. Ngoài ra ta còn có thể đem đoạn code thêm vào trong hàm render mà không cần phải thực hiện việc nối chuỗi và đây được đánh giá là một trong những đặc tính thú vị của ReactJS và việc chuyển đổi các đoạn HTML thành các hàm khởi động đều được thực hiện từ bộ biến đổi chính đó chính là JSX
Lợi ích khi sử dụng Reactjs
- Có nhiều công cụ phát triển
Khi bạn bắt đầu một ReactJS bạn đừng quên cài đặt thêm ứng dụng mở rộng của Chrome chuyên dành cho ReactJS nhé vì nó sẽ giúp cho bạn debug code một cách dễ dàng hơn, khi bạn đã cài đặt nó xong bạn sẽ có một cái nhìn trực tiếp vào Virtual Dom và lúc đó cũng đồng nghĩa với việc là bạn đang xem một cây dom thông thường vậy
- Thân thiện với SEO
Đây là một trong những điều đặc biệt và chỉ có mỗi ReactJS đây cũng chính là vấn đề lớn của các JS Frameworks vì hầu như các JS Frameworks không thân thiện với các cỗ máy tìm kiếm mặc dù đã được cải thiện nhiều. Còn riêng đối với reactJS thì khá tự hào vì không nằm trong nhóm không thân thiện với SEO vì dưới sự hỗ trợ của các render và trả về trình duyệt dưới dạng web page khi mà bạn chạy ReactJS trên server và các Virtual Dom. Chính vì lý do này mà React có thể đáp ứng đầy đủ được tính SEO Friendly
>>> Xem thêm: HTML là gì? Tại sao phải hiểu rõ vai trò quan trọng của HTML?
3. Thành phần cơ bản của Reactjs là gì?
Thành phần cơ bản của Reactjs được gọi là components. Syntax để viết HTML sử dụng Javascript để render. 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. Có thể lồng nhiều component vào nhau thông qua lệnh return của phương thức render.
Trong một chương trình thì có rất nhiều các component, để đơn giản việc quản lý các component đó người ta sử dụng redux, redux giống như 1 cái kho chứa các component và khi dùng component nào thì chỉ cần gọi nó ra.
Thành phần cơ bản của Reactjs là gì?
Virtual DOM không được tạo ra bởi Reactjs nhưng lại được sử dụng rất nhiều. Đây là một chuẩn của W3C được dùng để truy xuất code HTML hoặc XML. Các Virtual DOM sẽ được tạo ra khi chạy chương trình, đó là nơi chưa các component. Sử dụng DOM sẽ tiết kiệm được hiệu suất làm việc, khi có thay đổi gì Reactjs đều tính toán trước và việc còn lại chỉ là thực hiện chúng lên DOM.
4. Hướng dẫn sử dụng Reactjs
Khi làm việc với Reactjs chắc chắn các bạn sẽ phải tìm hiểm về JSX. JSX – JavaScript XML là phần mở rộng của Javascript viết theo kiểu XML, JSX cung cấp cú pháp thay thế cho câu lệnh React.createElement() trong Reactjs
- Cài đặt môi trường
Để cài đặt môi trường thì điều đầu tiên chúng ta cần là server nodejs và npm. Chỉ cần lên trang chủ của nodejs: https://nodejs.org/en/ và download về rồi cài đặt
- Tạo project đầu tiên
Đã xong môi trường và bây giờ mình sẽ tạo project reactjs đầu tiên. Để tạo project reactjs thì mình vào ổ E tạo 1 cái folder tên bai-tap-ve-nha đi rồi bật cmd lên. Bạn truy cập vào folder vừa bai-tap-ve-nha rồi gõ dòng code sau npm install -g create-react-app như hình bên dưới và ấn enter
Đợi 1 lúc cho nó cài đặt sau đó các bạn gõ tiếp câu lệnh create-react-app my-app như hình bên dưới và ấn enter
Sau khi tạo được xong project với tên là my-app các bạn gõ tiếp câu lệnh này cd my-app như hình bên dưới và ấn enter
Sau khi chuyển cmd vào trong folder my-app các bạn gõ tiếp câu lệnh npm start như hình bên dưới và ấn enter để bắt đầu chạy project
Nếu các bước trên các bạn làm thành công thì trình duyệt web sẽ tự động bật lên và mở một trang web có địa chỉ là https://localhost:3000, giao diện trang web như hình bên dưới
Trong reactjs chúng ta hạn chế sử dụng jquery và code HTML sẽ chuyển sang viết dưới dạng JSX và lưu nó ở file App.js nằm trong folder. Sau này khi chương trình chạy nó sẽ tự chuyển sang dạng HTML để hiển thị trên trình duyệt
- Tạo Component
Sau khi tạo project sẽ tạo ra các component, mỗi component là một phần của website chúng có chức năng đặc biệt và được gọi ra từ các chương trình khác, được liên kết và sử dụng như một bộ phận của chương trình. Mỗi component sẽ là một file riêng biệt dưới dạng file .js. Chúng ta có thể lưu lại và tận dụng cho các dự án khác nếu muốn
Vòng đời của một Component sẽ trải qua các bước sau
+ Khởi tạo Component: Khởi tạo Class, khởi tạo giá trị cho Props và State và gọi các hàm
+ Khi state thay đổi: cập nhật giá trị state và gọi hàm để cập nhật
+ Tương tự như state khi cập nhật Props thay đổi
- Component Title bên trong chứa tiêu đề
import React, {Component} from 'react';
class Title extends Component {
render() {
return(
)
}
}
export default Title;
- Component chứa tóm tắt bài viết
import React, {Component} from 'react';
class Item extends Component {
render() {
return(
1
Tiêu đề bài viết
Nội dung tóm tắt bài viết
)
}
}
export default Item;
- Component chứa form tìm kiếm
import React, {Component} from 'react';
class Search extends Component {
render() {
return(
)
}
}
export default Search;
Sau khi tạo các component theo yêu cầu các bạn sẽ đưa nó vào vị trí mong muốn trong file App.js. Cuối cùng là kiểm tra và chạy chương trình nếu không có lỗi. Kết quả là bạn sẽ có web theo như mong muốn của bạn
Khi làm việc với Reactjs các bạn sẽ cần cơ sở dữ liệu hoặc tạo các Mock data hay dữ liệu ảo để hiển thị lên web. Ngoài ra để có thể thực hiện các chương trình các bạn cần phải hiểu về logic và luồng dữ liệu để xử lý dữ liệu được chính xác và hợp lý
>>> Xem thêm: Localhost là gì? Hướng dẫn cài đặt local host nhanh nhất
5. Kết luận
Trên đây chính là tất cả những thông tin về ReactJS mong sẽ đem lại hữu ích cho các bạn đang tìm hiểu và các bạn IT đang muốn tối ưu hóa về tốc độ và truy cập cũng như việc nâng cao thêm kiến thức và có cách hiểu sâu xa hơn về ReactJS để rút được kinh nghiệm cho bản thân mình để tìm kiếm được công việc có mức lương cao hơn và nâng cao được tay nghề của bản thân mình hơn. Chúc các bạn thành công!
Tầng 4 - Toà nhà 97 - 99 Láng Hạ, Quận Đống Đa, Thành Phố Hà Nội
Điện thoại: 1900 6680 - (024) 7308 6680
Mail: sales@nhanhoa.com
Phản ánh chất lượng dịch vụ: 091 140 8966
