React for Ruby On Rails developers

Sep 28, 2016 · 5 min read
$rails new react_rails && cd react_rails
$mkdir -p lib/assets/frontend/javascript && cd lib/assets/frontend/javascript
$npm init
 $npm i react react-dom  --save
// file: App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
this.state = {
salute: 'Hello (Virtual DOM) World !!!',
countries: [{name:'Argentina:', capital:'Buenos Aires'},
{name:'Peru', capital:'Lima'},
{name:'Uruguay', capital:'Montevideo'}]
this.handleClick = this.handleClick.bind(this); // linking the method scope

this.setState({salute: 'Hey!!, a new salute!'});
render() {
return (
{, i) => {
return <div key={i}> Country: <b>{}</b> and capital: <b>{}</b> </div>
<p id="onclick"><button onClick={this.handleClick}>Change title</button></p>
export default App;
import App from './App.jsx'; // <-- App was exported as defaultimport {App} from './App.jsx';// <-- App wasn't exported as default
//file: index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('react_entry'));
$npm install webpack webpack-dev-server babel-loader babel-core babel-preset-react babel-preset-es2015 babel-preset-react-hmre babel-polyfill --save
// file: webpack.config.devel.jsvar path = require(‘path’);
var webpack = require(‘webpack’);
module.exports = {
entry: “./index.jsx”,
debug: true,
devtool: ‘cheap-module-eval-source-map’, // For production, use cheap-module-source-map.
output: {
path: path.resolve(__dirname, “build”),
publicPath: “http://localhost:8080/build/",
filename: “bundle.js”
resolve: {
extensions: [‘’, ‘.js’, ‘.jsx’]
module: {
loaders: [
{test: /\.jsx?$/, loader: ‘babel’, exclude: /node_modules/, query: {
cacheDirectory: true,
presets: [‘es2015’, ‘react-hmre’, ‘react’]
}, include:
{ test: /\.css$/, loader: ‘style-loader!css-loader’},
{ test: /\.js$/, loader: ‘babel’, exclude: /node_modules/, query: {
presets: [ ‘es2015’, ‘react’, ‘react-hmre’ ]
{ test: /\.less$/, loader: ‘style!css!less’ },
{ test: /\.scss$/, loader: ‘style!css!sass’ },
{ test: /\.json$/, loader: “json-loader” },
{ test: /\.woff(2)?(\?v=[0–9].[0–9].[0–9])?$/, loader: “url-loader?mimetype=application/font-woff” },
{ test: /\.(ttf|eot|svg)(\?v=[0–9].[0–9].[0–9])?$/, loader: “file-loader?name=[name].[ext]” },
{ test: /\.gif$/, loader: “url-loader?mimetype=image/png” }
devServer: {
hot: true,
inline: true,
historyApiFallback: true
node: {
fs: “empty”
plugins: [
new webpack.ProvidePlugin({
$: “jquery”,
jQuery: “jquery”
./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack.config.devel.js --hot --inline --progress --colors --watch --display-error-details --display-cached --content-base ./
$bin/rails generate controller Greetings hello
<h1>React Entry view</h1><div id=”react_entry”></div><%= javascript_include_tag ‘http://localhost:8080/build/bundle.js' %>
$ RAILS_ENV=development bin/rails s


Written by


Remote RoR/Clojure Developer at Mexico City

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