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.

Hot reloading

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.

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!

Viết React Component đầu tiên trong cuộc đời, wala!

Đầ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ó idapp. 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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hoàng Nguyễn

35 bài viết.
363 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
76 34
Nhu cầu về Javascript developer hiện nay trong thị trường IT là rất lớn. Nếu bạn có kiến thức ở mảng này thì cơ hội nghề nghiệp cũng như thu nhập c...
Hoàng Nguyễn viết hơn 1 năm trước
76 34
White
49 19
Microservices hiện đang nhận được rất nhiều sự chú ý: các bài viết, các blog, các cuộc thảo luận trên phương tiện truyền thông, trên mạng xã hội, v...
Hoàng Nguyễn viết hơn 2 năm trước
49 19
White
29 2
Chuyện tối ưu code, (Link) là công việc hàng ngày của mỗi lập trình viên, điều đó ai cũng biết. Nhưng liệu code tối ưu có phải là code đẹp, và ngượ...
Hoàng Nguyễn viết 3 tháng trước
29 2
Bài viết liên quan
White
39 7
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
39 7
White
21 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết hơn 2 năm trước
21 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
35 bài viết.
363 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!