Integrate React, ES6, Webpack and Babel With Rails

Bài đăng này đã không được cập nhật trong 7 năm

Trong chúng ta, hầu hết mọi người chắc hẳn đều dùng facebook. Và đối với đa số lập trình viên thì chắc đều biết đến một thư viện mà facebook phát triển. Đó là reactjs.

React Js là gì?

Nó là một thư viện viết bằng javascript.Dùng để xây dựng giao diện người dùng(user interface - UI), Chúng ta đều biết UI rất quan trọng nhưng như thế là chưa đủ, Để hoàn thành 1 ứng dụng hoàn chỉnh thì chúng ta cần thêm:

Server side language: để xử lý logic và lưu trữ dữ liệu trên server.
HTML/CSS nếu bạn làm ứng dụng web.
Flux: là một kiến trúc giúp bạn tổ chức code rõ ràng và sạch sẽ.
Objective C: nếu bạn sử dụng React để xây dựng app cho iOS.

Trong bài viết này, tôi sẽ giới thiệu làm thế nào để kết hợp giữa reactjs và rails để tạo ra 1 web app. Nếu ai làm việc với rails thì đều biết có rất nhiều gem hỗ trợ. reactjs cũng không phải ngoại lệ. Gem react-rails, react_on_rails ...có thể giúp chúng ta dễ dàng build ra 1 web app với sự kết hợp giữa reactjs và rails. Nhưng tôi không muốn làm vậy. tôi muốn xây dựng 1 web app API. Server có nhiệm vụ xử lý và trả lại dữ liệu cần thiết cho client. Client lúc nay sẽ không sử dụng view của rails nữa mà sẽ viết hoàn toàn bằng reactjs. Tí quen là tôi còn sử dụng ES6, Webpack and Babel. Giờ bắt đầu nào.

tạo thư mục chứa webapp rails new react-app cd react-app npm init -y ta sẽ đi cấu hình một số bước cần thiết.

// package.json, đây là nơi mình cần cài các gói cần thiết vào webApp, có rất nhiều phiên bản và mình cần chọn cho phù hợp.
{
  "name": "react-app",
  "version": "0.0.1",
  "description": "React App",
  "private": true,
  "devDependencies": {
    "babel-core": "~6.18.2",
    "babel-loader": "~6.2.7",
    "babel-plugin-add-module-exports": "~0.2.1",
    "babel-plugin-transform-class-properties": "~6.19.0",
    "babel-preset-es2015": "~6.18.0",
    "babel-preset-react": "~6.16.0",
    "babel-preset-stage-0": "~6.16.0",
    "counterpart": "~0.17.4",
    "material-ui": "~0.16.0",
    "pluralize": "~3.0.0",
    "react": "~15.4.0",
    "react-addons-update": "~15.4.0",
    "react-dom": "~15.4.0",
    "react-motion": "~0.4.5",
    "react-router": "~3.0.0",
    "react-sortable-hoc": "~0.2.0",
    "react-swipeable-views": "~0.8.0",
    "react-tap-event-plugin": "~2.0.0",
    "react-toastr": "~2.8.0",
    "webpack": "~1.13.3"
  }
}

2.Cấu hình webpack

npm i webpack -S

webpack import các file nguồn vào thành 1 file bundel duy nhất, và nó sử dụng các loader để biên dịch. Ngoài webpack ở đây có thể dùng browserify. Và các loader đã được tạo ra sẵn chúng ta chỉ việc dùng thôi. Tôi tạo ra 1 file webpack.config.js

var webpack = require("webpack");

const paths = {
  js: __dirname + "/app/assets/javascripts",
  jsx: __dirname + "/app/jsx",
}

module.exports = {
  entry: paths.jsx + "/bootstrap",
  output: {
    path: paths.js,
    filename: "react-app.js",
  },
  resolve: {
    extensions: ["", ".js", ".jsx"]
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: [
        "babel?cacheDirectory",
      ],
    }]
  },
  plugins: [
     new webpack.ProvidePlugin({
        React: "react",
        update: "react-addons-update",
        mui: "material-ui",
        t: "counterpart",
        config: __dirname + "/config/react_app",
        cm: paths.jsx + "/Common",
        BaseComponent : paths.jsx + "/BaseComponent",
        PageComponent : paths.jsx + "/PageComponent",
        BaseMaster: paths.jsx + "/Master/BaseMaster",
     })
  ],
}

có rất nhiều các loader và plugin các bạn có thể tìm hiểu thêm trên trang chủ. trong phạm vi bài này minh chỉ giới thiệu những gì mình đã từng dùng. giờ đây cấu trúc project sẽ có dạng

react-app
└───dist
└───app
│   ├───jsx
│   │   └───routes.jsx
|   |   |___app.jsx
│   └───index.js
│   └───index.html
└───webpack.config.js
└───package.json

trong thư mục app ngoài những thư mục có sẵn của rails. sẽ có thêm thư mục jsx. đây là nơi mình chưa toàn bộ code reactjs chung ta sẽ không dùng view của rails nên trong file application.html.erb ta sẽ tạo 1 div để bọc tất cả phần code react của mình sẽ render ra trong body. nó sẽ tương tự thế này

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <%= javascript_include_tag "application", "data-turbolinks-track": true %>
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track": true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <div id="react-helper"></div>
    <div id="react-wrapper"></div>
  </body>
</html>

Trong thư mục jsx, ta tạo ra 1 app.jsx file để import tất cả các router của các phần react vào.

import React from 'react'
import ReactDOM from 'react-dom'
import router from "./routes";

ReactDOM.render(
  ReactDOM.render(router, document.getElementById('react-wrapper'));
);

Giờ thì ta có thể tạo ra các component và bắt đầu thử với tập tành thôi. Chúc các bạn thành công. Bài viết còn sơ sài, cảm ơn các bạn đã đọc bài viết của mình.

Bài viết tham khảo:

http://ploughthroughruby.co.uk/2015/11/30/integrate-react-es6-webpack-babel-with-rails.html/

https://gist.github.com/jarednorman/11a1cbb11b389fb0501e

http://webpack.github.io/docs/

https://docs.npmjs.com/getting-started/using-a-package.json