React for Ruby On Rails developers

mmontoya
mmontoya
Sep 28, 2016 · 5 min read
$rails new react_rails && cd react_rails
RAILS_HOME/app/assets/javascripts/application.js
$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) {
super(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
}

handleClick(){
this.setState({salute: 'Hey!!, a new salute!'});
}
render() {
return (
<div>
<h2>{this.state.salute}</h2>
{ this.state.countries.map((object, i) => {
return <div key={i}> Country: <b>{object.name}</b> and capital: <b>{object.capital}</b> </div>
})}
<p id="onclick"><button onClick={this.handleClick}>Change title</button></p>
</div>
)
}
}
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: path.app
},
{ 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

mmontoya

Written by

mmontoya

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