ReactJS là gì? cách cài đặt ReactJS

ReactJS là gì? cách cài đặt ReactJS

Rate this post

Trong một vài năm gần đây các ngôn ngữ lập trình UI có sự phát triển mạnh, đặc biệt là các ngôn ngữ JavaScript, ReactJS là một thư viện JS chất lượng và dễ sử dụng cho người dung. Ứng dụng của nó trong việc xây dựng ứng dụng đã có tăng trưởng chóng mặt trong thời gian qua. Hôm nay hãy cùng với websitehcm tìm hiểu về ReactJS và hãy cùng tìm hiểu cách xây dựng chương trình sử dụng thư viện ReactJS.

Các bài viết liên quan:

ReactJS là gì?

ReactJS là một thư viện giao diện người dùng, dựa trên mã nguồn mở, chịu trách nhiệm cho lớp xem của ứng dụng và được duy trì bởi Facebook

ReactJS sử dụng cơ chế DOM ảo để điền dữ liệu(lượt xem) vào HTML DOM. DOM ảo hoạt động nhanh với thực tế vì nó chỉ thay đổi các phần tử DOM riêng lẻ thay vì tải lại DOM hoàn chỉnh mỗi lần

Một ứng dụng React được tạo thành từ nhiều thành phần, mỗi thành phần chịu trách nhiệm xuất ra một đoạn HTML nhỏ, có thể tái sử dụng. Các thành phần có thể lồng vào nhau để cho phép các  ứng dụng phức tạp được xây dựng từ các khối xây dựng đơn giản. Một thành phần cũng có thể duy trì trạng thái bên trong- ví dụ: một thành phần TabList có thể lưu trữ một biến tương ứng với tab đang mở

React cho phép chúng ta viết các thành phần bằng ngôn ngữ dành riêng cho miền gọi là JSX. JSX cho phép chúng ta viết các thành phần bằng HTML, trong khi trộn các sự kiện JavaScript. React sẽ chuyển đổi nội bộ này thành DOM ảo và cuối cùng sẽ xuất HTML

React “phản ứng” với các thay đổi trạng thái trong các thành phần một cách nhanh chóng và tự động để kết xuất các thành phần trong HTML DOM, bằng cách sử dụng DOM ảo. DOM ảo là 1 đại diện trong bộ nhớ DOM thực. Bằng cách thực hiện hầu hết quá trình xử lý bên trong DOM ảo thay vì trực tiếp trong DOM của trình duyết, React có thể hoạt động nhanh chóng và chỉ thêm, cập nhật và xóa các thành phần đã thay đổi kể từ chu kỳ hiển thị cuối cùng xảy ra

Cách cài đặt ReactJS

ReactJS là một thư viện JavaScript được chứa trong một tệp duy nhất react-<version>.js có thể đưa vào bất kỳ trang HTML nào. Mọi người cũng thường cài đặt thư viện React DOM react-dom-<version>.js cùng với tệp React chính:

<!DOCTYPE html> 
<html> 
 <head></head> 
 <body> 
 <script type="text/javascript" src="/path/to/react.js"></script> 
 <script type="text/javascript" src="/path/to/react-dom.js"></script> 
 <script type="text/javascript"> 
 //code React được ghi ở đây
 </script> 
 </body> 
 </html>
  • Để tải các tệp Javascrip, truy cập vào trang cài đặt của tài liệu React chính thức
  • React cũng hỗ trợ cứu pháp JSX syntax. JSX là phần mở rộng do Facebook tạo ra, bổ sung cú pháp XML vào Javascript. Để sử dụng JSX, bạn cần thư viện Babel và thay đổi <script type=”text/javascript”> thành <script type=”text/babel”> để dịch JSX sang mã code Javascript

Cách cơ bản

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
<script type="text/javascript" src="/path/to/react.js"></script> 
<script type="text/javascript" src="/path/to/react-dom.js"></script> 
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>  <script type="text/babel"> 
 // Code react JSX được viết ở đây
 </script> 
</body> 
</html>

Cách cài đặt qua npm

Bạn có thể cài đặt React bằng npm bằng cách:

npm install –save react react-dom

Để sử dụng React trong dự án Javascript của mình, bạn có thể làm như sau:

Var React=require('react');
Var ReactDOM=require('react-dom');
ReactDOM.render(<App/>,…);

Cách cài đặt qua Yarn

Facebook đưa ra gói quản lí của riêng mình có tên là Yarn, cũng được dùng để cài đặt React. Sau khi cài đặt Yarn, bạn chỉ cần chạy lệnh nay:

yarn add react react-dom

Sau đó, bạn có thể sử dụng React trong dự án của mình theo cách giống hệt như khi bạn đã cài đặt React qua npm

Viết chương trình “hello world”

Hello Word với các Stateless function

Components stateless fuction trong lâp trình chức năng. Điều này có nghĩa là: Một hàm luôn trả về chính xác những gì chúng được cung cấp.

Ví dụ:

const statelessSum=(a,b) => a+b;
let a=0;
const statefulSum=() =>a++;

Từ ví dụ trên chúng ta có thể thấy: statelessSum sẽ luôn trả về các giá trị giống nhau cho trước là a và b. Tuy nhiên, hàm statefulSum sẽ không trả về các giá trị giống nhau cho dù không có tham số nào. Hành vi của chức năng này được gọi là hiệu ứng phụ. Từ đó, component sẽ ảnh hưởng đến một số thứ khác

Vì thế, nên thường sử dụng các thành phần Stateless function, vì chúng không có tác dụng phụ và cùng tạo ra 1 hành vi. Đó là những gì bạn muốn sau cùng trong ứng dụng của mình, vì trạng thái biến đổi là trường hợp xấu nhất đối với 1 chương trình đang bảo trì

Loại function phổ biến nhất là loại Stateless function . Các thành phần React là các chức năng thuần túy và không yêu cầu bất kỳ quản lý trạng thái nội bộ nào có thể được viết dưới dạng các hàm JavaScript đơn giản. Đây được cho là các thành phần chức năng Stateless function vì chúng chỉ là một chức năng, không có bất kỳ trạng thái nào để theo dõi.

Dưới đây là một ví dụ đơn giản để minh họa khái niệm về thành phần Stateless function

<div id="element"></div> 
const MyComponent = props => { 
 return <h1>Hello, {props.name}!</h1>; 
}; 
ReactDOM.render(<MyComponent name="Arun" />, element); 

Lưu ý rằng: tất cả những gì thành phần này làm là hiển thị một phần tử h1 có chứa tên prop. Thành phần này không theo dõi bất kỳ trạng thái nào. Đây là 1 ví dụ về ES6

import React from 'react' 
const HelloWorld = props => ( 
 <h1>Hello, {props.name}!</h1> 
)
HelloWorld.propTypes = { 
 			name: React.PropTypes.string.isRequired 
}
export default HelloWorld

Vì các thành phần này không yêu cầu phiên bản sao lưu để quản lý trạng thái, nên React nên React có nhiều chỗ hơn để tối ưu hóa

Leave a Reply