Tìm hiểu về ReactJs

1. Khái quát về reactjs

• React JS là một framework hiển thị view chú ý đến hiệu năng (performance-minded) được tạo ra bởi Facebook. Rất nhiều đối thủ nặng ký về framework MVVM (Model-View-ViewModel) mất một thời gian lớn để hiển thị những lượng data lớn, như trong trường hợp những danh sách (list) và tương tự. Nhưng React đó không còn là vấn đề, vì nó chỉ hiển thị những gì thay đổi.
• Ví dụ, nếu chúng ta đang xem một danh sách có 20 products được hiển thị bởi React, và chúng ta thay đổi product thứ 2, thì chỉ product đó được hiển thị lại, và 19 products còn lại vẫn giữ nguyên (không cần hiển thị lại). React cũng dùng cái gọi là “DOM ảo” (“virtual DOM”) để tăng hiệu năng bằng cách xuất ra một hiển thị ảo, sau đó kiểm tra sự khác biệt giữa hiển thị ảo và những gì có trên DOM và tạo một bản vá (a patch).
• React yêu cầu tạo một class để định nghĩa những HTML cần hiển thị. Đó là những gì chúng ta cần tạo ra trong phần JavaScript.
• Ví dụ:

 var FirstMethod = React.createClass({
    render: function() {
        return <div>First Method</div>;
    }
});
React.render(<FirstMethod />,document.body);

- Chúng ta gọi React.createClass để tạo class React. Class này sau đó sẽ được append vào một phần tử HTML để chúng ta tương tác.

- Hàm createClass nhận lấy một đối tượng mà chứa hàm render, đó là tất cả những gì có trong class đơn giản của chúng ta. Hàm render trả về một chuỗi JSX đơn giản để hiển thị trên view.

- Dòng cuối của mã JSX được dùng để hiển thị lớp method của chúng ta vào trong document.body.

- Phần HTML của React thì không có gì ngoài thẻ body

2. Nesting

• Một trong những điều khiến cho React trở nên dễ sử dụng là khái niệm các nesting view. Chúng ta khai báo nhiều classes, rồi tham chiếu class con trong hàm render của class cha.
• Ví dụ:

var FirstMethod = React.createClass({
    render: function() {
        return (<div>
        	<div>Name: {this.props.name}</div>
            <div>Address: {this.props.address}</div>
            <NestedView />
            </div>
        );
    }
});
var NestedView = React.createClass({
	render: function(){
    	return <div>Good Bye</div>;
    }
});
React.render(<FirstMethod name={"Test"} address={"test"} />,document.body);

• Trong function FirstMethod call function NestedView

3. Props & States

3.1 Props

3.1.1 Props là gì?

• props là một attribute của Component. Chúng ta có thể sử dụng props như là một Object hay là một Function

3.1.2 Props đóng vai trò gì?

• props chứa giá trị được chuyển từ bên ngoài vào trong Component.

3.1.3 Cách sử dụng

• this.props
• Ví dụ: this.props.name

3.1.4 PropTypes

• Khi bạn muốn validate props, hãy sử dụng PropTypes để làm việc đó.
• Ví dụ:

var Image = React.createClass({
      propTypes: {
        name:   React.PropTypes.string.isRequired,
        awidth:  React.PropTypes.number.isRequired,
        height: React.PropTypes.number.isRequired,
        alt:    React.PropTypes.string
      },
      render() {
        var src = 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg';
        return (
          <div>
          <img src={src} awidth={this.props.awidth} height={this.props.height} alt={this.props.alt} />
          <span>{this.props.name}</span>
          </div>
        );
      }
    });
React.render(<Image name="good Image" height={100} alt={"fdf"} />,document.body);

• Nhìn vào propTypes thì ta sẽ thấy các giá trị được validate như là name phải là require, awidth với height là number ...

3.1.5 Default Prop value

• React cung cấp cho bạn cách define default valuse cho props rất rõ ràng
• Ví dụ:

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

3.1.6 setProps và replaceProps

• setProps: Khi chúng ta gọi setProps(), nó sẽ thay đổi properties của Component và trigger một re-render. Ngoài ra, chúng ta cũng có thể đưa vào một callback function mà sẽ được thực thi một khi setProps được hoàn thành.
  • Ví dụ:

  var Image = React.createClass({
      render() {
      var src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg';
      return (
          <div>
            <img src={src} awidth={this.props.awidth} height={this.props.height} alt="alt" />
            <span>{this.props.name}</span>
          </div>
        );
      }
    });
    var Image1 = <Image name="image1" awidth={100} height={100} />;
    var AvatarChange = React.render(Image1, document.body);
    AvatarChange.setProps({name: "image2"}, function(){
                alert("Bạn đang dùng setProps");
});

• replaceProps:

AvatarChange.replaceProps({name: "image3"}, function(){
          alert("Bạn đang dùng replaceProps");
 });

• Vậy sự khác giữa setProps() và replaceProps() là gì?
• Với setProps() nó merge property nào mà nó set.
• Với replaceProps() nó delete các props tồn tại trước đó và thay bởi properties mới.

3.2 State

• State của một class React cho phép chúng ta theo dõi được nhưng sự thay đổi bên trong view. Cũng giống như props, mọi sự thay đổi của state kéo theo việc khởi động một lời gọi tới element tương ứng trên view, với một điều kiện: bạn phải gọi phương thức setState
• Ví dụ:

var Image = React.createClass({
     getInitialState() {
        return {
          src: 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'
        };
      },
      onClick() {
        this.setState({src: 'https://www.imotors.com/Images/Default/small_car.jpg'});
      },
      render() {
        return (
          <div>
            <img  src={this.state.src} />
            <button onClick={this.onClick}>Change Image!</button>
          </div>
        );
      }
    });
React.render(<Image />, document.body);

• Ta sẽ lấy ví dụ trước và thử đưa state vào trong Component Image. Bởi vì state dùng cho việc thay đổi nội bộ trong Component, cho nên ta hãy xem cái gì trong nội bộ Image Component có thể thay đổi được một cách nội bộ.
• Ta thử thay đổi image của nó. Ý tưởng như sau: khi click vào button, thì image của nó thay đổi.
• Hãy thử chạy file source trên, click vào button, bạn có thấy image đã thay đổi!
• Về cơ bản cấu trúc một Component có state như sau:
  • method render()
  • method getIntialState(): initial giá trị state cho Component. Trong ví dụ trên, chúng ta initial giá trị src của state là http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg
  • method handle Event: đây là method dùng để handle sự kiện trong Component. Hay cũng chính là callback function của event. Trong ví dụ trên, khi có sự kiện click thì nó thực thi method onClick() thay đổi image source của image.
  • this.setState: được gọi trong method onClick, sẽ thay đổi data trong Component -> trigger render -> rerender View của Component.

3.3 Sự giống và khác nhau props, state

• Giống nhau:
• props và state đều là plain JS objects
• props và state đều trigger render update khi thay đổi
• Khác nhau:

Source code

• http://jsfiddle.net/chimco_89/6o0utngz/10/
• http://jsfiddle.net/chimco_89/6o0utngz/9/
• http://jsfiddle.net/chimco_89/6o0utngz/8/
• http://jsfiddle.net/chimco_89/6o0utngz/5/
• http://jsfiddle.net/chimco_89/6o0utngz/3/
• http://jsfiddle.net/chimco_89/6o0utngz/2/