react-redux

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.

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.

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

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!

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.

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.

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!

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

  1. 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

    Liked by 1 person

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s