I. ReactJS là gì?
**A JavaScript library for building user interfaces**
* React được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook. React lần đầu tiên được triển khai cho ứng dụng Newsfeed của Facebook năm 2011, sau đó triển khai cho Instagram năm 2012, và chính thức được mở mã nguồn (open-sourced) tại JSConf US vào tháng 5 năm 2013.
II. Tại sao lại là ReactJS?
* Về cơ bản, việc xây dựng một ứng dụng MVC phía client với ràng buộc dữ liệu 2 chiều (2 way data-binding) là khá đơn giản. Tuy nhiên, nếu dự án ngày càng mở rộng, nhiều tính năng hơn, thì sẽ làm cho việc bảo trì dự án gặp khó khăn, đồng thời hiệu năng cũng bị giảm.* React ra đời để giúp chúng ta xây dựng tầng Views (V trong mô hình MVC) khi ứng dụng của chúng ta ngày một lớn hơn. Mục tiêu chính của React là nhanh, đơn giản, hiệu năng cao và dễ dàng mở rộng.
* Ngoài ra, lý do làm cho React được giới lập trình ưu ái sử dụng là vì:
- Cho phép Developer viết ứng dụng trực tiếp với mã JavaScript dễ dàng hơn bằng JSX. Developer giờ đây có thể tạo một tính năng mới và có thể xem nó xuất hiện ngay trong thời gian thực, giúp Developer có thể đưa trực tiếp các đoạn HTML vào JavaScript.
- Cho phép Developer phá vỡ những cấu tạo UI phức tạp thành những Component độc lập. Developer sẽ không phải lo lắng về tổng thể ứng dụng web, mà thay vào đó có thể dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành những Component nhỏ hơn.
- Không chỉ vậy, thông qua Props, các Compoment có thể kết nối với nhau bằng cách sử dụng data tùy biến. Điều này giúp chuyển các dữ liệu đã được tùy biến đến một UI Component cụ thể.
- Tính năng State khi sử dụng trong ReactJS sẽ giúp điều chỉnh trạng thái cho các Component (Child) nhận data từ một Component nguồn (Parent). Developer có thể thay đổi trạng thái cho nhiều Component (Child) trên ứng dụng nhưng không ảnh hưởng tới Component gốc (Parent) đang ở trạng thái Stateful. Việc điều chỉnh các ứng dụng cũng trở nên dễ dàng hơn.
- Dom ảo (Virtual DOM) giúp cho ứng dụng nhanh hơn. DOM ảo hỗ trợ rất tốt cho việc cấu trúc UI phản ứng kịp thời với những thay đổi nhằm tăng trải nghiệm người dùng. Khi tạo ra ReactJS, các nhà thiết kế đã dự đoán đúng việc cập nhật các HTML cũ là cực kỳ quan trọng nhưng cũng khá tốn kém chi phí. Vì thế, ý tưởng sử dụng DOM ảo giúp ReactJS biết chính xác khi nào cần render lại hoặc khi nào bỏ đi những phần tử của DOM chính vì phát hiện ra những thay đổi trên data.
III. Các thành phần - yếu tố cơ bản của React.
1. JSX
* JSX (JavaScript Syntax eXtension) là một cú pháp mở rộng cho JavaScript, nó hòa trộn giữa JavaScript và XML, vì vậy nó cũng dễ dàng hơn khi viết mã, và thân thiện hơn với các lập trình viên. JSX cung cấp cú pháp ngọt (syntactic sugar) để thay cho câu lệnh React.createElement() trong React.* Mã lệnh viết bằng JSX sẽ được chuyển sang JavaScript để trình duyệt có thể hiểu được.
* Việc sử dụng JSX trong React là không bắt buộc. Chúng ta có thể sử dụng chỉ JavaScript thuần. Tuy nhiên có rất nhiều lý do cho việc sử dụng JSX trong React, đó là:
- JSX có cú pháp gần giống XML, cấu trúc cây khi biểu thị các attributes, điều đó giúp chúng ta dễ dàng định nghĩa, cũng như quản lý được các Component phức tạp, thay vì việc phải định nghĩa và gọi ra nhiều hàm hoặc object trong JavaScript. Đồng thời, khi nhìn vào cấu trúc đó cũng dễ dàng đọc hiểu được ý nghĩa của các Component.
- Code JSX ngắn hơn, và dễ hiểu hơn code JavaScript.
- JSX không làm thay đổi ngữ nghĩa của JavaScript.
- Faster (Nhanh hơn): JSX thực hiện tối ưu hóa trong khi biên dịch mã JavaScript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương được viết trực tiếp bằng JavaScript.
- Safer (An toàn hơn): ngược với JavaScript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy (giống Java, C++), vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt.
- Easier (Dễ dàng hơn): JSX kế thừa dựa trên JavaScript, vì vậy rất dễ dàng cho các lập trình viên JavaScript có thể sử dụng.
* Cú pháp JSX: như đã đề cập ở trên thì JSX cung cấp cú pháp thuận tiện thay cho React.createElement(). Trong ReactJS thì JSX thường được dùng để khai báo phần tử hoặc trong khi render một Component.
- Dùng JSX trong React Element.
+ Hãy xem xét một ví dụ khai báo một phần tử sau đây:
```
const element = (
<h1 className=”greeting”>
Hello, world!
</h1>
);
```
Đoạn mã trên sẽ tương đương với:
```
const element = React.createElement(
‘h1’,
{className: ‘greeting’},
‘Hello, world!’
);
```
- Dùng JSX trong React Component
+ Chúng ta có thể sử dụng JSX trong Component:
```
var Welcome = React.createClass({
render: function () {
return <h1>Hello, world!</h1>
}
});
```
+ Hoặc nếu sử dụng ES6, đoạn code trên có thể viết theo format như sau:
```
class Welcome extends React.Component {
render() {
return <h1>Hello, world!</h1>
}
}
```
- Lưu ý: Một element cũng có thể khai báo sử dụng một component được định nghĩa sẵn.
+ Ví dụ, sau khi định nghĩa một component Welcome như sau:
```
var Welcome = React.createClass({
render: function () {
return <h1>Hello, world!</h1>
}
});
```
+ Thì chúng ta có thể khai báo một phần tử dựa trên component này:
`const element = <Welcome />`
- JSX Expression
+ Chúng ta có thể nhúng JavaScript expression bên trong JSX sử dụng bên trong cặp dấu {}:
```
const user = {
firstName: ‘John’,
lastName: ‘Doe’
};
const element = (
<h1>Hello, {user.firstName}!</h1>
);
```
+ Cũng như thực hiện các toán tử có trong JavaScript:
```
const element = (
<h1>Hello, {user.firstName + ‘ ‘ + user.lastName}!</h1>
);
```
2. Components
* React cho phép lập trình viên tạo ra các Component (thành phần) tương ứng với các phần của giao diện. Các Component này có thể tái sử dụng, hoặc kết hợp với các Component khác để tạo ra một giao diện hoàn chỉnh. Mỗi Component trong React 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.* Ý tưởng về Component chính là chìa khóa giải quyết vấn đề khó khăn khi dự án ngày càng lớn. Giao diện được tạo ra từ các Component ghép lại với nhau, và một Component có thể được sử dụng tại nhiều nơi trong dự án. Vì vậy, thật dễ dàng khi bạn chỉ cần quản lý và sửa chữa các Component của chính mình.
* Khai báo Component:
- Function: cách đơn giản nhất để định nghĩa một Component là viết function JavaScript, ví dụ:
```
function Welcom(props) {
return <h1>Hello, {props.name}</h1>
}
```
- Class: hoặc bạn có thể sử dụng ES6 class để định nghĩa một Component:
```
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}>/h1>
}
}
```
3. Props
* Props (viết tắt của Properties) về cơ bản là một đối tượng, nó lưu trữ các giá trị của các attributes của một thẻ.* Trong ReactJS, khi ta tạo 1 Component thì nó giống như việc ta tạo ra một thẻ (tag) mới của chính mình. Mỗi property của Component sẽ tương ứng với một attribute của thẻ.
* Ví dụ:
```
class Greeting extends React.Component {
render() {
return (
<div className=”greeting”>
<h3>Hello {this.props.fullName}</h3>
</div>
);
}
}
```
4. State
* Giống như props, state cũng giữ thông tin về component. Tuy nhiên, State hoạt động khác với Props. State là thành phần của Component, trong khi Props lại được truyền giá trị từ bên ngoài vào Component.* Chúng ta không nên cập nhật State bằng cách sử dụng trực tiếp this.state mà luôn sử dụng setState để cập nhật state của các đối tượng.
* Khi trạng thái của Component thay đổi, ReactJS sẽ re-render Component này trên giao diện. Khi người dùng thay đổi nội dung trên phần tử <input>, giá trị này sẽ được cập nhật cho đối tượng state của Component thông qua sự kiện onChange.
* Ví dụ:
```
class Form extends React.Component {
constructor (props) {
super(props) ,
this.state = {
input: ''
}
};
handleChange = (text) => {
this.setState({ input: text })
};
render () {
const { input } = this.state;
return (
<div>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</div> ) }
}
```
+ Trong đoạn code trên, có thể thấy một lớp Form với một state input. Nó hiển thị một text input chấp nhận đầu vào của người dùng. Mỗi khi người dùng nhập văn bản, onChange được kích hoạt, lần lượt gọi setState trên input.
+ setState kích hoạt re-rendering lại Component, và giao diện người dùng (UI) bây giờ được cập nhật với thông tin mới nhất được nhập từ người dùng.
No comments:
Post a Comment