React là một thư viện develop UI của Facebook để tạo ra các components tương tác và ổn định đáng tin cậy. React được phát triển và sử dụng bởi Facebook nên bạn có thể yên tâm về chất lượng cũng như sự phát triển , đơn cử như Instagram.com được viết hoàn toàn bằng React
Một trong những điểm đặc biệt là React không chỉ trình diễn ở phía client mà còn có thể render phía server và nó có thể hoạt động cùng với nhau
React còn dùng 1 thứ gọi là Virtual DOM có khả năng render cây con của 1 node dựa còn sự thay đổi trạng thái. Tạo 1 khả năng tuyệt vời để component của bạn được cập nhập tức thời
Bài giới thiệu chi tiết React bạn có thể tham khảo tại đây để có cái nhìn tổng quan hơn
Cách thức hoạt động của Virtual DOM
Tưởng tượng rằng bạn có 1 vật thể giống hình mẫu 1 người, có chứa tất cả các thuộc tính liên quan mà 1 người có thể có và trạng thái hiện tại của người đó. Đây căn bản là thứ React làm với DOM
Giờ hãy nghĩ là bạn lấy vật mẫu đó và làm 1 vài thay đổi. Thêm vào 1 chút râu , chỉnh lại đôi mắt …. Trong react khi chúng ta thay đổi hai thứ sẽ thi hành. Đầu tiên Reach chạy diffing để xác định những thay đổi. Tiếp theo là đối chiếu với vị trí cần thay đổi với sự thay đổi.
Cách React hoạt động là không phải tái tạo lại 1 người mới từ đầu như ta thường thấy lâu nay là node sẽ bị hủy để thêm vào node mới, nó sẽ chỉ thêm vào thay đổi. điều đó có nghĩa là nếu bạn có text trong 1 input và khi phải render lại miễn là input node không thay đổi text ở trong vẫn sẽ không bị mất đi.
Và vì React sử dụng DOM ảo và không phải là DOM thật nó mở ra cho ta rất nhiều khả năng hoạt động. Chúng ta có thể render DOM giả đó trên server và chúng ta có một server side React view
Bắt Đầu
Để bắt đầu với React đơn giản bạn chỉ cần download bộ kit
Hoặc có thể thử online tại
Cài đặt
Đề cài đặt bạn sẽ include react.js và JSXTranfomer.js, và viết component với type là text/jsx:
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="mount-point"></div>
<script type="text/jsx">
// React Code Goes Here
</script>
</body>
</html>
Trong React component chứa trong element, vì thế trong ví dụ chúng ta có thể dùng div mount-point như là lớp cha
Căn bản
Chúng ta hãy bắt đầu với một component React đơn giản :
<script type="text/jsx">
/** @jsx React.DOM */
React.renderComponent(
<h1>Hello, world!</h1>,
document.getElementById('myDiv')
);
</script>
Nếu bạn chưa nhìn thấy cú pháp này bao giờ bạn sẽ thắc mắc không biết đây là ngôn ngữ gì
JSX
Nó được gọi là JSX, và nó là 1 dạng chuyển đổi của Javascript XML. Nó cho phép bạn viết thẻ HTML-ish trong javascript. Tôi gọi là HTML-ish vì nó không hoàn toàn là HTML có một số thuộc tính bạn phải dùng cú pháp tương đương.
Ví dụ như thuộc tính class ta dùng là className và for thì ta dùng là htmlFor trong JSX vì nó trùng với từ khóa của Javascript. Chi tiếp hơn bạn tham khảo tại đây
Nếu bạn không muốn dùng JSX đâu là cú pháp nếu không chuyển đổi
/** @jsx React.DOM */
React.renderComponent(
React.DOM.h1(null, 'Hello, world!'),
document.getElementById('myDiv')
);
Bạn có thể đọc nhiều hơn tại đây
Trong đọc code đầu tiên bạn có để ý đến dòng /** @jsx React.DOM */
Tại đầu của đoạn code. Đó là dòng quan trọng, nó nói với React rằng chúng ta đang dùng JSX và đoạn code đó cần chuyển đổi. Vì thế chúng ta cần viết dòng đó nếu dùng cú pháp JSX
Components
Khi sử dụng phương thức renderComponent ở trên tham số đầu tiên là component ta muốn render, và tham số thứ 2 là vị trí DOM node muốn chèn vào. Chúng ta có thể dùng createClass để tạo
1 lớp component tùy ý. Hãy xem đọc code sau
var MyComponent = React.createClass({
render: function(){
return (
<h1>Hello, world!</h1>
);
}
});
Sau khi tạo class chúng ta có thể render như sau
React.renderComponent(
<MyComponent/>,
document.getElementById('myDiv')
);
Props
Khi chúng ta dùng component tự tạo , chúng ta có thể thêm vào các thuộc tính được gọi là prop. Những thuộc tính này tồn tại trong component với cú pháp this.props và có thể dùng phương thức rendder dữ liệu động
var MyComponent = React.createClass({
render: function(){
return (
<h1>Hello, {this.props.name}!</h1>
);
}
});
React.renderComponent(<MyComponent name="Handsome" />, document.getElementById('myDiv'));
Đặc trưng, vòng đời và trạng thái
Phương thức rendder là yêu cầu duy nhất cho component, nhưng vẫn còn một vài phương thức vòng đời và đặc trưng có thể hữu dụng cho chúng ta sáng tạo
Lifecycle Methods
- componentWillMount – Invoked once, on both client & server before rendering occurs.
- componentDidMount – Invoked once, only on the client, after rendering occurs.
- shouldComponentUpdate – Return value determines whether component should update.
- componentWillUnmount – Invoked prior to unmounting component.
Specs
- getInitialState – Return value is the initial value for state.
- getDefaultProps – Sets fallback props values if props aren’t supplied.
- mixins – An array of objects, used to extend the current component’s functionality.
Vẫn còn nhiều thứ khác bạn có thể tìm thấy tại đây đây.
Trạng thái (state)
Tất cả component đều có một state object và một props object. Trạng thái (state) được nhận bởi phương thức setState. Gọi setState sẽ kích hoạt UI cập nhập tương tác. Nếu chúng ta muốn tạo trạng thái trước bất kì 1 tương tác nào chúng ta dùng phương thức getInitialState. Hãy xem đoạn code dưới đây để tạo cho chúng ta component state
var MyComponent = React.createClass({
getInitialState: function(){
return {
count: 5
}
},
render: function(){
return (
<h1>{this.state.count}</h1>
)
}
});
Sự Kiện
React cũng có một hệ thống sự kiện đa trình duyệt. Sự kiện được đính kèm như thuộc tính của component và có thể kích hoạt phương thức. Hãy thử tạo một bộ đếm sử dụng sự kiện
/** @jsx React.DOM */
var Counter = React.createClass({
incrementCount: function(){
this.setState({
count: this.state.count + 1
});
},
getInitialState: function(){
return {
count: 0
}
},
render: function(){
return (
<div class="my-component">
<h1>Count: {this.state.count}</h1>
<button type="button" onClick={this.incrementCount}>Increment</button>
</div>
);
}
});
React.renderComponent(<Counter/>, document.getElementById('mount-point'));
Dòng chảy dữ liệu đa hướng
Trong React dòng chảy của dữ liệu đa hướng dựa vào state và props. Có nghĩa là trong trường hợp nhiều component phân cấp, một component cha nên quản lí các state và truyền xuống chuỗi bên dưới thông qua props.
State của bạn nên được cập nhập bằng phương thức setState để chắc rằng UI được làm mới. Giá trị cuối cùng nên được truyền xuống component con bằng thuộc tính được truy cập bằng this.props
Hãy xem ví dụ sau :
/** @jsx React.DOM */
var FilteredList = React.createClass({
filterList: function(event){
var updatedList = this.state.initialItems;
updatedList = updatedList.filter(function(item){
return item.toLowerCase().search(
event.target.value.toLowerCase()) !== -1;
});
this.setState({items: updatedList});
},
getInitialState: function(){
return {
initialItems: [
"Apples",
"Broccoli",
"Chicken",
"Duck",
"Eggs",
"Fish",
"Granola",
"Hash Browns"
],
items: []
}
},
componentWillMount: function(){
this.setState({items: this.state.initialItems})
},
render: function(){
return (
<div className="filter-list">
<input type="text" placeholder="Search" onChange={this.filterList}/>
<List items={this.state.items}/>
</div>
);
}
});
var List = React.createClass({
render: function(){
return (
<ul>
{
this.props.items.map(function(item) {
return <li key={item}>{item}</li>
})
}
</ul>
)
}
});
React.renderComponent(<FilteredList/>, document.getElementById('mount-point'));
Kết
Qua bài viết tôi hi vọng đã cho các bạn thấy được cách sử dụng React cơ bản , hãy dành chút thời gian để xem qua React API và JSX để có thể sử dụng React tốt hơn.
Khả năng của react còn rất nhiều như tôi đã nói không chỉ ở client side mà còn cả ở server side nếu có điều kiện tôi sẽ đề cập ở bài sau
Leave a Comment