Hướng dẫn setup môi trường chạy rails + react để chạy jsx và ES6

Ở bài viết này mình xin chia sẻ việc setup môi trường để chạy rails với react khi các bạn viết jsx và es6.

Khi mới làm quen với react, mình rất khó khăn và mất thời gian cho việc setup này. Hy vọng bài viết sẽ giúp các bạn mới tìm hiểu react có thể dễ dàng setup.

Các bạn có thể tham khảo src tại đây: Github

Trước hết các bạn cần 1 project rails

rails new sample_rails_react

trong Gemfile

gem 'browserify-rails'
gem 'react-rails'

Việc setup cho từng gem, các bạn đọc trên github của mỗi trang dùm mình, vì việc đó không có gì phức tạp.

trong application.rb thêm dòng

config.browserify_rails.commandline_options = "-t babelify --extension="es6.js""

tại root của prj, các bạn tạo file package.json với nội dung

{
  "dependencies": {
    "babelify": "^7.2.0",
    "browserify": "~10.2.4",
    "browserify-incremental": "^3.0.1",
    "jquery": "^2.2.3",
    "jquery-ujs": "^1.2.1",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-swal": "^1.0.0"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0"
  }
}

sau đó chạy

sudo npm install

Nói thêm 1 chút về npm. Theo trang chủ thì

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

và file package.json là nơi để chứa các javascrip packages, theo mình thì các bạn có thể hiểu nó giống như Gemfile trong rails vậy, và lệnh npm install cũng như bundle install.

Các bạn cũng có thể cài đặt npm step by step bắt đầu bằng

npm init

sau đó các bạn sẽ được hỏi để lựa chọn các configuration như name, version, author... Nhưng mình lười, nên thường tạo file package.json và thêm các packages cần thiết.

Và cuối cùng, các bạn tạo 1 file .babelrc ở thư mục root của prj

{
  "presets": [ "es2015", "react" ]
}

Theo mình hiểu, file này là để compile code từ es6 và react sang es5. Ah, mình nói thêm, es6 chính là es2015 và es5 là kiểu javascript mà lâu nay các bạn vẫn đang viết(mình cũng k biết giải thích thế nào