Những điều về ReactJs mà người mới học nên biết

Bài đăng này đã không được cập nhật trong 2 năm

Trong bài này mình xin giới thiệu một số điều nên biết về ReactJs cho những ai mới học mà mình sưu tầm được.

ReactJs chỉ là view Library

React là một thư viện của Facebook giúp render ra phần view, nó không phải framework js nào cả.
React hỗ trợ xây dựng những thành phần UI có tính tương tác cao, có trạng thái và có thể sử dụng lại.
React xây dựng xung quanh các component
React không chỉ hoạt động trên phía client, và còn được render trên server và có thể kết nối với nhau.
React không phải là một MVC framework vì thế React sẽ không có Model và Controller mà phải kết hợp với các thư viện khác

Component & Props

 var MyCpn = React.createClass({
                render: function() {
                   return <div>Hello {this.props.name}</div>;
                }
            });
            ReactDOM.render(<MyCpn name="ReactJS" />, document.body);

Phương thức createClass nhận vào 1 tham số, nó là đối tượng mô tả đặc tính của component và nó gồm tất cả các phương thức để hình thành nên component.
Phương thức quan trọng nhất là render, phương thức này được trigger khi component đã sẵn sàng để được render lên trên page.
Khi sử dụng components của mình, chúng ta có thể thêm attributes gọi là props. Những attributes này được gọi ra trong components bằng this.props và có thể được sử dụng trong method render để render dữ liệu động.

State

var MyCpn = React.createClass({
            getInitialState: function(){
                return {
                    count: 5
                }
            },
            render: function(){
                return (
                    <h1>{this.state.count}</h1>
                )
            }
        });

State được thiết lạp sử dụng method setState, gọi setState kích hoạt cập nhật UI và gắn liền với hoạt động của React . Nếu chúng ta muốn thiết lập một trạng thái ban đầu trước khi có tương tác thì ta có thể sử dụng method getInitialState.

Hãy giữ Components luôn nhỏ gọn

Bất cứ lập trình giỏi nào cũng đều biết, giữ cho function/class càng nhỏ gọn thì sẽ càng dễ hiểu và dễ bảo trì. Với React cũng vậy, và Components nhỏ sẽ đúng với tinh thần Thinking in React, chia các phần thành các Component nhỏ nhất có thể, để có thể tái sử dụng và hiệu năng cao. Độ chia nhỏ tùy thuộc và mức độ của Team nữa.

Ví dụ với với Components hiển thị danh sách bài viết liên quan ở cuối:

const LatestPostsComponent = props => (
  <section>
    <div><h1>Latest posts</h1></div>
    <div>
      { props.posts.map(post => <PostPreview key={post.slug} post={post}/>) }
    </div>
  </section>
);
<LastestPostsComponent />  chỉ chứa 1 thẻ <h1> và mỗi posts được truyền cho components khác <PostPreview />

Write functional components

Có nhiều cách để viết Components, thứ nhất sử dụng React.createClass():

const MyComponent = React.createClass({
  render: function() {
    return <div className={this.props.className}/>;
  }
});

Và bằng ES6

class MyComponent extends React.Component {
  render() {
    return <div className={this.props.className}/>;
  }
}

React 0.14 mới cho phép bạn viết nhanh 1 Components bằng 1 hàm với tham số props:

const MyComponent = props => (
  <div className={props.className}/>
);

Với các Components lớn và nhiều xử lý, nên sử dụng cách 1 hoặc 2. Còn trong đa số các trường hợp khác, Components không cần state, chỉ render() từ props thì nên sử dụng cách thứ 3 này, giúp cho ứng dụng mạch lạc và nhanh hơn.

Sử dụng ít State components

State lưu giữ linh hồn của ứng dụng. React với các ứng dụng lớn và mở rộng liên tục, ta nên giữ State luôn đơn giản (stateless components).

State làm cho test khó khăn hơn.
State liên quan đến việc render() hiển thị, mỗi lần render() ta sẽ quan tâm: đã khởi tạo dữ liệu cho state hay chưa, state có thay đổi hay chưa, có nên render() lại hay không, ...
State chỉ tồn tại nội bộ trong 1 Components, với việc trao đổi dữ liệu với bên ngoài, việc sử dụng nhiều state là không cần thiết. Chỉ sử dụng State khi cần thiết, và phản ánh đúng trạng thái của Components.

Kết hợp với Redux.js

React chỉ là View, nên việc kết hợp với Redux, Flux, hay bất cứ mô hình luồng dữ liệu là cần thiết. Hiện tại mình thấy Redux đang có khá nhiều người sử dụng, và tư duy của nó cũng khá hay. Sau khi học React bạn tiếp tục kết hợp với Redux trong các ứng dụng.

Sử dụng JSX, ES6, Babel, Webpack, và NPM

JSX (XML-like syntax extension to ECMAScript) là tính năng hay của React, những gì chúng ta viết sẽ là những gì hiển thị. Kết hợp với Babel, biên dịch và tận dụng các tính năng mới của ES6. NPM và Webpack giúp quá trình đóng gói và tận dụng các thư viện triệt để hơn.

Sử dụng React và Redux dev tools

Cuối cùng các trình Dev Tools của Redux và React sử dụng rất tốt, giúp chúng ta nhanh chóng Debug và tìm ra lỗi trong ứng dụng.

React dev tools có thể inspect ngược lại các Components của React, trạng thái các Props và State của từng Component. Redux Dev Tools còn hay hơn, giúp bạn quan sát được trạng thái actions, lý do thay đổi State, và back lại state trước. Tải vê Redux Dev Tools ở Github hoặc Chrome Web Store.