Xin chào bạn đến với Học React qua ví dụ #1. Bài viết này mình sẽ thực hành React thông qua cách tạo Slideshow để trình diễn ảnh. Trong ví dụ này, mình tạo ra hai Slideshow. Cái bên trên điều khiển thủ công thông qua việc click chuột. Còn cái bên dưới được điều khiển tự động, với mỗi ảnh cách nhau 3 giây (dĩ nhiên bạn vẫn có thể điều khiển thủ công được). Nếu không có vấn đề gì thì mình bắt đầu học React qua ví dụ #1 thôi nào!

1. Khởi tạo project.

Đầu tiên, bạn tạo ra các thư mục và file như sau (bạn chỉ cần quan tâm tới thư mục /src): learn-react-by-example/ --src/.

----components/.

------slideshow/.

--------slideshow.css.

--------slideshow.js.

----images/.

----App.css.

----App.js.

----index.css.

----index.js.

----serviceWorker.js.
Trong đó:

Thư mục components: để chứa code của các Component. Bài này mình thực hành về Slideshow nên mình tạo thêm thư mục slideshow bên trong với 2 file slideshow.js và slideshow.css để định nghĩa cho component Slideshow (bài viết sau thực hành về cái khác thì mình sẽ tạo thêm thư mục vào bên trong components như này).

• Thư mục images: để chứa tất cả những ảnh mình sử dụng cho Demo.
• Các file App.css và App.js dùng để demo chính. Bên trong App.js mình sẽ sử dụng component Slideshow ở trên.
• Các file index.css, index.js và serviceWorker.js thì KHÔNG THAY ĐỔI với mọi bài thực hành.

2. Xây dựng Slideshow Component.

Nội dung file slideshow.js.

import React from 'react';
import ReactDOM from 'react-dom';
import './slideshow.css';

export default class Slideshow extends React.Component {
  constructor(props) {
    super(props);

    /*
    * State slideIndex dùng để xác định xem slide nào đang được active.
    * Các ảnh sẽ được xếp chồng lên nhau, cái nào active thì hiển thị,
    * Cái nào không active thì ẩn đi.
    */
    this.state = {
      slideIndex: 0
    };

    /*
    * Khi sử dụng, mình sẽ truyền thuộc tính ratio, giả sử là "3:2"
    * Như vậy, tỉ lệ width/height là this.ratioWH = 3 / 2
    * Mình sẽ điều chỉnh các ảnh sao cho về cùng 1 kích thước.
    */
    const ratioWHArray = this.props.ratio.split(":");
    this.ratioWH = ratioWHArray[0] / ratioWHArray[1