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

Trong bài này mình sẽ giới thiệu cho ai mới học Reactjs về những điều cần biết khi bắt đầu học

1: Đầu tiên chúng ta sẽ tìm hiểu React là gì?

• React là 1 thư viện của Facebook giúp render ra phần view, nó không phải là 1 framework js nào hết.

• React hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được.

• React được xây dựng xung quanh các component.

• React không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau...

2: phần cơ bản

• Thành phần cơ bản của React được gọi là components . Syntax để viết HTML sử dụng Javascript để render:

    <script type="text/jsx">
        ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('myDiv')
        );
    </script>

3: JSX

• Đoạn Javascript trên được gọi là JSX và nó là syntax chuyển từ Javascript XML. JSX cho phép bạn viết Javascript theo phong cách HTML.

• Nếu không sử dụng jsx trên thì js sẽ là thế này:

    React.render(
        React.createElement('h1', null, 'Hello!'),
        document.getElementById('myDiv')
    );

4: Component & Props

Ví Dụ:

            var MyCpn = React.createClass({
                render: function() {
                   return <div>Hello {this.props.name}</div>;
                }
            });
            ReactDOM.render(<MyCpn name="Huyền" />, 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.

5: State

• 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.

Ví Dụ:

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

6: Events

• Danh sách các SyntheticEvent trong reactjs

1. boolean bubbles
2. boolean cancelable
3. DOMEventTarget currentTarget
4. boolean defaultPrevented
5. number eventPhase
6. boolean isTrusted
7. DOMEvent nativeEvent
8. void preventDefault()
9. boolean isDefaultPrevented()
10. void stopPropagation()
11. boolean isPropagationStopped()
12. DOMEventTarget target
13. number timeStamp
14. string type

• Chúng ta có thể sử dụng các event preventDefault, stopPropagation. Từ Reactjs v0.12 thì không dùng cách return false ở event handler để stop event propagation. Thay vào đó ta dùng e.stopPropagation() hoặc e.preventDefault() để thực hiện

• Đây là ví dụ về event handler:

 var MyAvt = React.createClass({
      propTypes: {
        name: React.PropTypes.string.isRequired,
        awidth: React.PropTypes.number.isRequired,
        height: React.PropTypes.number.isRequired
      },
      getInitialState() {
        return {
          src: this.props.src
        };
      },
      onClick() {
        this.setState({src: 'http://tapchianhdep.com/wp-content/uploads/2015/05/bo-suu-tap-hinh-anh-chibi-de-thuong-11.jpg'});
      },
      render() {
        return (
          <div>
            <img  src={this.state.src} awidth={this.props.awidth} height={this.props.height} alt="alt" />
            <span>{this.props.name}</span>
            <button onClick={this.onClick}>Change Avarta</button>
          </div>
        );
      }
    });

• onClick={this.onClick} : bind event click với event handler là onClick. Bên trong onClick, Reactjs bind this với Component instance.

7: 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. Các bạn có thể tìm hiểu rất nhiều tài liệu về Redux... trên các trang diễn đàn về học js.