React có gì hot

Là một thư viện Front-End với mind set là xây dưng các component với cách này sẽ giúp cho việc sử dụng lại trở nên dễ dàng hơn. Hãy nghĩ xem thay vì viết cả đống thử trong một view, và ở một view khác chúng ta lại viết rất nhiều nhưng lại có rất nhiều phần giống nhau nhưng chúng ta lại không sử dụng lại được, thật tốn kém. Trong khi một view thực ra được tạo bởi nhiều phần khác nhau. Vậy việc tạo ra những component khác nhau rồi khi nào cần dùng thì sẽ được gọi ở những chỗ khác nhau. Khá là tiện lợi khi việc phát triển cho Front-End lại khá giống việc dùng cá đối tường như Back-End. Bằng việc tạo ra các component và sử dụng lại, và đương nhiên mỗi chỗ khác nhau sẽ dùng các biến khác nhau, và cho các mục đích khác nhau. Cũng giống như cách viết ra các function hay class vậy. Rồi khi dùng tới thì sẽ truyền các tham số vào cho đối tượng đó, và dựa vào giá trị của các tham số được truyền vào thì ở mỗi chính đối tượng đó sẽ tạo ra các hiển thị khác nhau.

Với khái niệm Vitual DOM, khi bạn ghi DOM ví dụ <div> thì sẽ không phải ngay lập tức tạo ra một <div> mà thay vào đó là một <div> ảo đại diện cho 1 <div>. Giống như nó là một cách đánh dấu để nhắc tới React cái gì sẽ được render. Và sau đó React Engine sẽ đảm bảo DOM thực sự nào sẽ match với DOM ảo đã được đánh dấu. Với ý tưởng làm việc với javasript thì nhanh nhưng làm việc với các DOM thì lại rất chậm. việc tương tác hay thay đổi với các DOM thực thì rất chậm, vì mỗi lần như vậy thì Browser sẽ phải reflow và redraw lại tất cả các DOM. Và với ý tưởng tạo và thay đổi các DOM ảo rất nhanh React giúp cho việc tăng Performance đáng kể. Bây giờ chúng ta sẽ đi vào tìm hiểu những cái được gọi là trái tim và linh hồn của React.

ReactDOM.render(

<div>Hello!</div>, document.getElementById('container') ); # JSX Là một cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML. Trên thực tế không có trình duyệt nào hỗ trợ cú pháp JSX, do vậy nó sẽ dùng một thư viện là Babel để biên dịch JSX thành JavaScript để trình duyệt có thể hiểu được. Ví dụ đoạn code của JSX là: <MyButton color="blue" shadowSize={2}> Click Me </MyButton> sau khi được biên dịch thành JavaScript thì sẽ là: React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me' ) Tuy việc dùng JSX là không bắt buộc nhưng vì React là thư viện làm việc với Front-End thì việc viết các đoạn mã gần hơn với các DOM thường dùng thì sẽ gần gũi và dễ hiểu hơn. # Components Components được xem là trái tim và linh hồn của React, việc phát triển React cũng dựa trên concept này. một ví dụ cho việc tạo và sử dụng components. * Tạo một component có tên là MessageComponent var MessageComponent = React.createClass({ render: function() { return ( <div>{this.props.message}</div> ); } }); * Render instance của MessageComponent vào document.body ReactDOM.render( <MessageComponent message="Hello!" />, document.body ); Để tạo ra một component chúng ta sử dụng React.createClass. và mỗi điều kiện khi tạo ra mỗi component là đều phải implement cho phần render. Để khi gọi component này để biết nó sẽ render ra cái gì, nếu không thì đâu còn là 1 component nữa =)) # Props Theo mình nghĩ thì đây là từ viết tắt của Properties. với ý nghĩ là việc quản lý các thuộc tính, nhưng mà là thuộc tính của cả React Engine, như vậy thì bất cứ đối tượng component nào cũng có thể dùng nó để truy cập vào tương tác với các thuộc tính. Và mỗi component khi tạo ra sẽ có thể truy cập vào thuộc tính của nó thông qua cú pháp this.props.thuộc tính cần tương tác Ví dụ: * Tạo ra một component là VacancySign, với thuộc tính nó sẽ sử dụng là hasvacancy và việc tương tác với thuộc tính này thông qua this.props.hasvacancy var VacancySign = React.createClass({ render: function() { var text; if (this.props.hasvacancy) {ReactDOM.render( <VacancySign hasvacancy={false} />, document.getElementById('container') ); text = 'Vacancy'; } else { text = 'No Vacancy'; } return <div>{text}</div>; } }); * Khi gọi tới component thì sẽ truyền các thuộc tính tương ứng cho component đó ReactDOM.render( <VacancySign hasvacancy={false} />, document.getElementById('container') ); Như vậy component VacancySign giống như một method với thuộc tính cần truyền vào là hasvacancy và trong method này ta sẽ làm công việc tùy ý với thuộc tính này. Ở đây chúng ta sẽ dựa vào giá trị true false để hiển thị ra text tương ứng. Khá dễ dàng và tiện dụng. Mình thì lại thích cách làm việc khác giống Back-End developer với mind set làm việc giống như hướng đối tượng vậy =)) # State Việc tương tác với các giá trị trong Props giống như kiểu biến tính vậy, được truyền từ nơi gọi tới component và trong mỗi component sẽ so sánh hay sử dụng các giá trị đó. Vậy thì làm sao để có thể tương tác với các data động, thay đổi giá trị của các thuộc tính, tính toán xử lý ở trong chính từng component. Và State sẽ giải quyết vấn đề này. Điểm khác biệt giữa State và Props là State là internal được dùng trong chính từng component còn Props là external được cho bất cứ khi nào render bất cứ component nào. * Một ví dụ đơn giản tương tác với State: var CowClicker = React.createClass({ getInitialState: function() { return { clicks: 0 }; },

onCowClick: function(evt) { this.setState({ clicks: this.state.clicks + 1 }); },

render: function() { return ( <div> <div>Clicks: {this.state.clicks}</div>

Click the cow

</div> ); } });

ReactDOM.render( <CowClicker />, document.getElementById('container') );

• GETINITIALSTATE Sử dụng function getInitialState sẽ khởi tạo giá trị ban đầu cho các thuộc tính, và hoạt động như dạng map của keys values.
• THIS.STATE Việc tương tác với các thuộc tính trong state cũng giống như cách dùng props this.state. thuộc tính cần dùng
• THIS.SETSTATE Nếu muốn thay đổi giá trị cho các thuộc tính thì sao, React cung cấp function this.setState để làm việc này. Việc gọi lại các function này mình nghĩ nó cũng giống như cách Override lại các function của Lớp cha vậy. =)) Khi component state thay đổi thì React sẽ render lại UI. Nhưng trong hàm this.setState bạn không nhìn thấy bất cứ câu lệnh nào để yêu cầu React render lại UI phải không this.setState({ clicks: this.state.clicks + 1 }); Đó là vì React tự động bind method với instant của các component.

Việc sử dụng UI thì chắc chắn sẽ phải tương tác với các component phải không. Và đương nhiên React cũng sẽ cung cấp cơ chế cho các Event. Ví dụ: var ChildComponent = React.createClass({ render: function() { return ( <div> <div className="prompt">Add a click handler to this button so that when clicked, performMagic is called in the parent component.</div> {/* Props can be any valid JavaScript expression, including functions. When this button is clicked, it calls the given function, which happens to be performMagic in the parent component. */} <button onClick={this.props.onMagicClick}>Do Magic</button> </div> ); } });

var ParentComponent = React.createClass({ performMagic: function() { alert('TAADAH!'); },

render: function() { return ( <div> {/* Notice how we're passing a function as a prop to ChildComponent */} <ChildComponent onMagicClick={this.performMagic} /> </div> ); } });

ReactDOM.render( <ParentComponent />, document.getElementById('container') ); cũng là cách truyền parameter nhưng ở đây chúng ta có thể truyền vào parameter một function, để ở component khi có một sự kiện được tương tác thì nó sẽ gọi tới function đó, Rất là bổ ích.

Trên đây là những kiến thức căn bản của React, và chính những điều đó làm cho React trở nên thú vị, khác biệt. Sơ lược qua thì chúng ta có thể thấy được cái quan trọng nhất là React giải quyết được vấn đề Performance, và nó còn giúp cho việc lập trình Front-End trở nên thuận tiện hơn. Rất đáng để nghiên cứu và áp dụng cho các dự án =)) Link tham khảo: https://www.tutorialspoint.com/reactjs/ http://buildwithreact.com/tutorial