Ruby on Rails application with Reactjs

M Mahabubur Rhaman
Aug 24, 2017 · 2 min read

Let’s create a rails application along with ReactJS and other node modules.

I assume MAC already have Xcode and Homebrew installed.

In terminal:

brew install node

Yes, npm (node package manager) comes with node by default. Alternatively, we can use yarn (my preferance also rails prefer it :p).

Ah, it’s neecessary to use version manager for node. Yes, there is node version manager nvm. Follow these steps to install it.

Okay, on rails developent it’s so important to pre-process JavaScript and bundle all modules, so we definately need a pre-complier which will continuously run and process asset. And for that I prefer webpack. Good News is, rails officially included webpack inside rails (from 5.1) with name webpacker!

Now, create a rails application including webpack with react (only for rails 5.1+):

rails new reactapp --webpack=react

or just add gem 'webpacker' to Gemfile and bundle it. And then run ./bin/rails webpacker:install:react Yeah sit tight, it does a lot of work :smile:

That’s it. So, this rails application is ready with react. Yeah, inside app/javascript/packs, react files (.jsx) will remain. Now, in .jsx, this type of code will render react-dom in Rails fornt-end:

document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<Hello name="React" />,
document.getElementById("hello-world-div")),
)
})

So, in hello-world-div react-dom will be rendered. And finally, for continuous pre-compiling run webpack using this command (your prefered configuration):

./bin/webpack-dev-server --host example.com --inline true --hot false

And to add a node module use:

yarn add <node-module>

Pretty cool and easy, right? Cheers!


Originally published at www.rony36.com on August 24, 2017.

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade