React Redux Starter Kit

Github

Chào các bạn, bài viết này mình xin giới thiệu về một source code liên quan tới React-Redux. Đó là một công cụ theo mình nghĩ là tuyệt vời để bắt đầu làm quen với Redux cũng như React.

Theo tiêu đề trên github của tác giả có khẳng định rằng bộ thiết kế này giúp cho người học, đọc React-Redux bắt kịp xu hướng của thời đại, cập nhật những công nghệ tiên tiến liên quan. Bộ source code này không phải là một cấu trúc cơ bản của một dự án, nhưng nó lại là một công cụ tuyệt vời để mình hiểu hơn về Redux.

1. Cài đặt

Theo như yêu cầu từ tác giả, và cũng là yêu cầu từ khi bạn bắt đầu vào thế giới React thì bạn cần cài đặt node ^5.0.0 vs yarn ^0.23.0 or npm ^3.0.0.

Các bước cài đặt rất đơn giản. Bạn chỉ cần clone source code về và chạy cài đặt các packet yêu cầu của dự án.

$ git clone https://github.com/davezuko/react-redux-starter-kit.git <my-project-name>
$ cd <my-project-name>

Sau khi clone source code về bạn chạy lệnh

npm install

hoặc nếu bạn dùng yarn.

yarn 

2. Run

Sau khi install để khởi động dự án bạn chạy 1 trong 2 lệnh yarn start hoặc npm start.

Theo định nghĩa và config trong file package.json thì chúng ta có thể hiểu như sau:

3. Cấu trúc dự án

├── build                    # Tất cả code của của dự án sau khi build
├── public                   # 
├── server                   # 
│   └── main.js              # Khai báo server trong ứng dụng, phần này kết hợp giữa Express  vs webpack 
├── src                      # Application source code
│   ├── index.html           # Main HTML 
│   ├── main.js              # Định nghĩa bát đàu sử dụng ứng dụng
│   ├── normalize.js         #
│   ├── components           # Khai báo các components trong ứng dụng
│   ├── containers           #
│   ├── layouts              # Khởi tạo layout dùng cho các router
│   │   └── PageLayout       # khai báo các PageLayout 
│   ├── routes               # Nơi định nghĩa router của ứng dụng
│   │   ├── index.js         # Router chính của ứng dụng, tất cả các router đều sẽ được khai báo tại đây
│   │   ├── Home             # Home router một router của ứng dụng.
│   │   │   ├── index.js     # Định nghĩa router home
│   │   │   ├── assets       # 
│   │   │   ├── components   # Các thành phần nhỏ trong router home.
│   │   │   └── routes **    
│   │   └── Counter          # 
│   │       ├── index.js     # Định nghĩa router  counter 
│   │       ├── container    #
│   │       ├── modules      #
│   │       └── routes **    # 
│   ├── store                # Redux-specific
│   │   ├── createStore.js   # Khởi tạo và sử dụng redux store
│   │   └── reducers.js      # Nơi khai báo Reducer và Injection
│   └── styles               # Thư mục chưa CSS của dự án
└── tests                    # Unit tests

4. Kết quả sau khi chạy

5. Tọc mạch của bản thân

src/routes/index.js

Vâng sau khi đọc qua một chút về base của ứng dụng này thì mình cũng nghịch 1 chút liên quan đến router của ứng dụng. và mình thấy rằng hiện tại ứng dụng đang dùng react children có dạng

export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  indexRoute  : Home,
  childRoutes : [
    CounterRoute(store)
  ]
})

Tuy nhiên do mình mới học và tìm hiểu thì mình lại thấy kiểu như trong link lại dễ hiểu hơn và rồi mình xóa hết đi và xây dựng lại như sau:

import React from "react";
import { Route, IndexRoute } from "react-router"; 
import Home from "components/Home";
import About from "components/About";
import App from "../layouts/App";
import LoginLayout from "../layouts/Login";

export const createRoutes = (store) => (
	<div>
	  <Route path="/" component={App}>
	    <IndexRoute component={Home} />
	    <Route path="/about" component={About} />
	  </Route>
	</div>
);
export default createRoutes;

src/components/App.js

...
<Router history={browserHistory} routes={this.props.routes} />
...

Nhìn nó dê hiểu hơn rất nhiều vơi đứa bắt đầu học đến react-router như mình.

5. Kết luận

Vâng React Redux Starter Kit mình mới chỉ khám phá tơi đây, vì vậy nếu bạn hứng thú có thể khám phá những bươc tiếp theo, nó sẽ rất thú vị nếu bạn theo dõi sự phát triển của tác giả cũng như những người đóng góp tại link phía trên đầu bài viết.

*** Rất cám ơn bạn đã theo dõi - Xlavender ***