Skip to content

Commit 446c3a2

Browse files
justin808justin808
committed
Merge pull request #84 from shakacode/mapreal19-react-on-rails-gem-setup
react on rails gem setup
2 parents fc890cb + 6776f30 commit 446c3a2

File tree

8 files changed

+28
-25
lines changed

8 files changed

+28
-25
lines changed

‎Gemfile‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ gem "rails-html-sanitizer"
3737
# Use Unicorn as the app server
3838
gem "unicorn"
3939

40+
gem "react_on_rails", "~> 0.1.1"
41+
4042
gem "autoprefixer-rails"
4143

4244
# Use Capistrano for deployment

‎Gemfile.lock‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,9 @@ GEM
172172
raindrops (0.15.0)
173173
rake (10.4.2)
174174
rdoc (4.2.0)
175+
react_on_rails (0.1.1)
176+
execjs (~> 2.5)
177+
rails (~> 4.2)
175178
rspec-core (3.3.2)
176179
rspec-support (~> 3.3.0)
177180
rspec-expectations (3.3.1)
@@ -281,6 +284,7 @@ DEPENDENCIES
281284
rails-html-sanitizer
282285
rails_12factor
283286
rainbow
287+
react_on_rails (~> 0.1.1)
284288
rspec-rails
285289
rubocop
286290
ruby-lint

‎app/views/pages/index.html.erb‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,4 @@
1616
</li>
1717
</ul>
1818
<hr/>
19-
<div id="content"></div>
20-
21-
22-
19+
<%= react_component('App', {}, prerender: false) %>

‎client/assets/javascripts/App.jsx‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,19 @@
1-
import $ from 'jquery';
2-
31
import React from 'react';
42
import { Provider } from 'react-redux';
53

64
import CommentScreen from './components/CommentScreen';
75
import CommentStore from './stores/CommentStore';
86

9-
$(function onLoad() {
10-
function render() {
11-
if ($('#content').length > 0) {
12-
React.render((
13-
<Provider store={CommentStore}>
14-
{ () => <CommentScreen /> }
15-
</Provider>
16-
), document.getElementById('content'));
17-
}
18-
}
7+
const App = () => {
8+
const reactComponent = (
9+
<Provider store={CommentStore}>
10+
{() => <CommentScreen />}
11+
</Provider>
12+
);
13+
return reactComponent;
14+
};
1915

20-
render();
16+
window.App = App;
2117

22-
// Next part is to make this work with turbo-links
23-
$(document).on('page:change', () => {
24-
render();
25-
});
26-
});
18+
// Export is needed for the hot reload server
19+
export default App;

‎client/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,8 @@
66
</head>
77
<body>
88
<div id="content"></div>
9+
<script>
10+
React.render(App(), document.getElementById('content'));
11+
</script>
912
</body>
1013
</html>

‎client/webpack.common.config.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ module.exports = {
2020
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.scss', '.css', 'config.js'],
2121
},
2222
module: {
23-
loaders: [],
23+
loaders: [
24+
25+
// React is necessary for the client rendering:
26+
{test: require.resolve('react'), loader: 'expose?React'},
27+
],
2428
},
2529
};

‎client/webpack.hot.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ config.resolve.root.push(path.join(__dirname, 'assets/stylesheets'));
2727

2828
// All the styling loaders only apply to hot-reload, not rails
2929
config.module.loaders.push(
30-
{test: /\.jsx?$/, loaders: ['react-hot', 'babel?stage=0'], exclude: /node_modules/},
30+
{test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/},
3131
{test: /\.css$/, loader: 'style-loader!css-loader'},
3232
{
3333
test: /\.scss$/,

‎client/webpack.rails.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ config.entry.push('./scripts/rails_only');
2020
// See webpack.common.config for adding modules common to both the webpack dev server and rails
2121

2222
config.module.loaders.push(
23-
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?stage=0'},
23+
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
2424

2525
// Next 2 lines expose jQuery and $ to any JavaScript files loaded after client-bundle.js
2626
// in the Rails Asset Pipeline. Thus, load this one prior.

0 commit comments

Comments
 (0)