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

Chuyện coding, Học React/Redux qua ví dụ thực tế, Javascript, ReactJS, Redux 5 Minutes

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
}
};
view raw webpack.config.js hosted with ❤ by GitHub

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"
]
}
view raw .babelrc hosted with ❤ by GitHub

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

module.exports = {
...
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
}]
},
...
};
view raw webpack.config.js hosted with ❤ by GitHub

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')
);
view raw index.js hosted with ❤ by GitHub

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>
)
}
}
view raw TrackList.js hosted with ❤ by GitHub

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.

Screen Shot 2016-07-18 at 11.43.09 PM.png

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>;
})
...
view raw TrackList.js hosted with ❤ by GitHub

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!

 

Series được tham khảo từ: https://www.robinwieruch.de/the-soundcloud-client-in-react-redux/

Đã đăng

Một suy nghĩ 18 thoughts on “Học React/Redux qua ví dụ thực tế: Viết Component đầu tiên”

  2. Không chạy được admin ơi. Bị lỗi này
    ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js
    Module not found: Error: Can’t resolve ‘react-hot’ in ‘D:\hungnv\workspace\code\Web\soundcloud-client’
    BREAKING CHANGE: It’s no longer allowed to omit the ‘-loader’ suffix when using loaders.

    Trả lời

  3. Anh ơi, lúc em code theo thì hiện lỗi này , em đã check lại code của anh mà không biết bị lỗi vì sao ? :(
    ERROR in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js
    Module not found: Error: Can’t resolve ‘banel-loader’ in ‘/home/huutinh/Desktop/kant’
    @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js
    Child html-webpack-plugin for

    Trả lời

  8. Hi ban, minh build len thi bi loi nay la sao nhi?
    ERROR in ./src/index.js
    Module build failed: Error: React Hot Loader: The Webpack loader is now exported separately. If you use Babel, we recommend that you remove “react-hot-loader” from the “loaders” section of your Webpack configuration altogether, and instead add “react-hot-loader/babel” to the “plugins” section of your .babelrc file. If you prefer not to use Babel, replace “react-hot-loader” or “react-hot” with “react-hot-loader/webpack” in the “loaders” section of your Webpack configuration.
    at Object.warnAboutIncorrectUsage (/home/vinhjs/DATA/node_project/redux/node_modules/react-hot-loader/lib/index.js:7:11)
    @ multi main

    Trả lời

    1. Có lẽ do version của react-hot-loader, bạn kiểm tra xem version của react-hot-loader hiện tại bạn đang dùng trong package.json nhé, recommend bạn sử dụng “react-hot-loader”: “^1.3.0” để tránh những lỗi trong bản beta.

  11. đang tập code theo sample, bị lỗi ngay tại loader: ‘react-hot!babel’ , đổi lại thành loaders: [“babel-loader”] thì ok.
    Thanks nhiều

    Trả lời

Bình luận