Học React/Redux qua ví dụ thực tế: Viết Component đầu tiên

Quay trở lại với bài học của chúng ta, cuối bài trước chúng ta đã tạo xong project với những thứ cơ bản cần thiết, bước tiếp theo chúng ta sẽ thêm module react-hot-loader để phục vụ việc develop dễ hơn. Hay nói một cách đơn giản, khi có bất cứ sự thay đổi nào trong source code của chúng ta, thì sự thay đó sẽ được áp dụng ngay trên app đang chạy trên browser mà không có bất cứ sự reload toàn bộ trang nào xảy ra.

Trong thư mục project, các bạn cài đặt như sau.

npm install --save-dev react-hot-loader

Sau đó chỉnh sửa file webpack.config.js như sau.

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  ...
  devServer: {
    ...
    hot: true
  }
};

Tiếp theo start lại app để xem kết quả.

npm start

Mở localhost:8080 trong browser, mở console nếu các bạn thấy log như sau thì việc setup react-hot-loader đã thành công.

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

Coi như bạn đã hoàn thành hầu hết các thứ để sẵn sàng bắt tay vào việc viết React Component đầu tiên của mình rồi, tuy nhiên vẫn còn một thứ cuối cùng nữa vẫn cần phải làm đó là set up Babel.

Sử dụng Babel cho phép chúng ta có thể code ES6 (ES2015) trong project của mình. Nó sẽ làm nhiệm vụ dịch code ES6 ra ES5 thứ mà được hầu hết các browser hỗ trợ. Nhiều hơn nữa, chúng ta có thể sử dụng những tính năng mà chỉ có ở ES6 bằng việc kích hoạt các stages.

Trong thư mục project, các bạn cài đặt như sau.

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-1 babel-preset-stage-2

Sau đó tạo file .babelrc như sau. File này sẽ chứa config của babel.

{
  "presets": [
    "es2015",
    "react",
    "stage-1",
    "stage-2"
  ]
}

Tiếp theo sửa file webpack.config.js như sau.

module.exports = {
  ...
  module: {
    loaders: [{
      test: /.js?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel'
    }]
  },
  ...
};

Sau khi đã làm xong mọi thứ, lúc này npm start script sẽ bị lỗi. Đừng lo, lỗi này chỉ vì application chưa hiểu React là gì. Cách đơn giản để fix chính là cùng bắt tay vào viết React Component đầu tiên nào!

Đầu tiên là cài đặt các modules của React vào trong project.

npm install --save react react-dom

Sau đó ngó qua file src/index.js lúc này đang là một dòng console.log củ chuối, cùng thay thế nó nào!

import React from 'react';
import ReactDOM from 'react-dom';
import TrackList from './components/TrackList';

const tracks = [
  {
    id: 1,
    title: 'Em của ngày hôm qua'
  },
  {
    id: 2,
    title: 'Cơn mưa ngang qua'
  }
];

ReactDOM.render(
  <TrackList tracks={tracks} />,
  document.getElementById('app')
);

Chúng ta đang hook ReactDOM.render vào file index.html bằng cách tìm element có id là app. Component đầu tiên của chúng ta tên là TrackList sẽ được render tại đó. Ở thời điểm hiện tại, chúng ta sẽ hard code cái bài hát, sau này chũng ta sẽ get trực tiếp từ SoundCloud thông qua API. TrackList sẽ chưa danh sách các bài hát, nào bây giờ cùng implement component này nhé!

Đầu tiên là tạo file, từ thư mục gốc của project.

mkdir src/components
touch src/components/TrackList.js

Chúng ta đang dần định hình được cấu trúc của project, trong các bài tiếp theo chúng ta sẽ dần dần tìm hiểu về cách cấu trúc project, cũng như các best practice. Còn giờ thì code component của chúng ta vào file mới tạo thôi.

import React, {Component, PropTypes} from 'react';

export default class TrackList extends Component {
  static propTypes = {
    tracks: PropTypes.array
  }

  static defaultProps = {
    tracks: []
  }

  render() {
    return (
      <div>
      {
        this.props.tracks.map((track) => {
          return <div>Track: {track.title}</div>;
        })
      }
      </div>
    )
  }
}

Component chúng ta vừa tạo nhận vào property là tracks, có default value là empty array. Component này có nhiệm vụ hiển thị thông tin title của các bài hát.

Start app một lần nữa, bạn sẽ thấy các bài hát được hiện ra màn hình.

Tuy nhiên các bạn sẽ thấy warning trong console như sau.

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `TrackList`. See https://fb.me/react-warning-keys for more information.

Bởi vì React component cần thuộc tính key để xác định bản thân nó trong một list các components. Hãy sửa nó bằng cách thêm key vào div hiển thị tên bài hát. Sau khi sửa, chỉ cần đơn giản save file, lúc này react-hot-reload sẽ làm nhiệm vụ của nó, các bạn chỉ cần đơn giản là nhìn vào console và không thấy lỗi hiển thị nữa.

...
this.props.tracks.map((track, key) => {
  return <div key={key}>Track: {track.title}</div>;
})
...

Xong! Chúng ta đã viết xong những dòng code React đầu tiên.

Source code trong bài học các bạn có thể dễ dàng tìm thấy tại https://github.com/codeaholicguy/react-redux-tutorial/tree/master/first-react-component.

Trong bài tiếp theo tôi sẽ hướng dẫn các bạn về việc setup testing cho project sử dụng React. Cùng đón xem nhé! Đừng quên để lại những ý kiến đóng góp của các bạn cho tôi ở phía dưới bài viết nhé! Chào tạm biệt!

Bài gốc: Codeaholicguy