Skip to content

Commit a254c3c

Browse files
webcoderphwebcoderph
committed
first commit
1 parent b6b9141 commit a254c3c

File tree

13 files changed

+149
-1
lines changed

13 files changed

+149
-1
lines changed

‎Gemfile

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,5 @@ end
5555

5656
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
5757
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
58+
59+
gem 'mini_racer', platforms: :ruby

‎Gemfile.lock

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ GEM
7373
jbuilder (2.7.0)
7474
activesupport (>= 4.2.0)
7575
multi_json (>= 1.2)
76+
libv8 (6.3.292.48.1)
7677
listen (3.1.5)
7778
rb-fsevent (~> 0.9, >= 0.9.4)
7879
rb-inotify (~> 0.9, >= 0.9.7)
@@ -85,6 +86,8 @@ GEM
8586
method_source (0.9.0)
8687
mini_mime (1.0.0)
8788
mini_portile2 (2.3.0)
89+
mini_racer (0.1.15)
90+
libv8 (~> 6.3)
8891
minitest (5.11.1)
8992
multi_json (1.13.1)
9093
nio4r (2.2.0)
@@ -195,6 +198,7 @@ DEPENDENCIES
195198
coffee-rails (~> 4.2)
196199
jbuilder (~> 2.5)
197200
listen (>= 3.0.5, < 3.2)
201+
mini_racer
198202
puma (~> 3.7)
199203
rails (~> 5.1.4)
200204
react_on_rails (~> 9.0.1)

‎Procfile.dev

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# You can run these commands in separate shells
2+
web: rails s -p 3000
3+
4+
# Next line runs a watch process with webpack to compile the changed files.
5+
# When making frequent changes to client side assets, you will prefer building webpack assets
6+
# upon saving rather than when you refresh your browser page.
7+
client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack -w'

‎Procfile.dev-server

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# You can run these commands in separate shells instead of using foreman
2+
web: rails s -p 3000
3+
4+
# Next line runs the webpack-dev-server
5+
# You can edit config/webpacker.yml to set HMR to true to see hot reloading.
6+
# Note, hot and live reloading don't work with the default generator setup on top of
7+
# the rails/webpacker Webpack config with server rendering.
8+
# If you have server rendering enabled, modify the call to bin/webpack-dev-server line
9+
# so you add `--inline=false` and then CSS is not inlined.
10+
# Otherwise, you will have an error. If you want HMR and Server Rendering, see
11+
# the example in the https://github.com/shakacode/react-webpack-rails-tutorial
12+
client: sh -c 'rm -rf public/packs/* || true && bundle exec rake react_on_rails:locale && bin/webpack-dev-server'

‎app/controllers/hello_world_controller.rb

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# frozen_string_literal: true
2+
3+
class HelloWorldController < ApplicationController
4+
layout "hello_world"
5+
6+
def index
7+
@hello_world_props = { name: "Stranger" }
8+
end
9+
end

‎app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
4+
export default class HelloWorld extends React.Component {
5+
static propTypes = {
6+
name: PropTypes.string.isRequired, // this is passed from the Rails view
7+
};
8+
9+
/**
10+
* @param props - Comes from your rails view.
11+
*/
12+
constructor(props) {
13+
super(props);
14+
15+
// How to set initial state in ES6 class syntax
16+
// https://facebook.github.io/react/docs/reusable-components.html#es6-classes
17+
this.state = { name: this.props.name };
18+
}
19+
20+
updateName = (name) => {
21+
this.setState({ name });
22+
};
23+
24+
render() {
25+
return (
26+
<div>
27+
<h3>
28+
Hello, {this.state.name}!
29+
</h3>
30+
<hr />
31+
<form >
32+
<label htmlFor="name">
33+
Say hello to:
34+
</label>
35+
<input
36+
id="name"
37+
type="text"
38+
value={this.state.name}
39+
onChange={(e) => this.updateName(e.target.value)}
40+
/>
41+
</form>
42+
</div>
43+
);
44+
}
45+
}

‎app/javascript/packs/hello-world-bundle.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import ReactOnRails from 'react-on-rails';
2+
3+
import HelloWorld from '../bundles/HelloWorld/components/HelloWorld';
4+
5+
// This is how react_on_rails can see the HelloWorld in the browser.
6+
ReactOnRails.register({
7+
HelloWorld,
8+
});

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<h1>Hello World</h1>
2+
<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>

‎app/views/layouts/hello_world.html.erb

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ReactOnRailsWithWebpacker</title>
5+
<%= csrf_meta_tags %>
6+
<%= javascript_pack_tag 'hello-world-bundle' %>
7+
</head>
8+
9+
<body>
10+
<%= yield %>
11+
</body>
12+
</html>

‎config/initializers/react_on_rails.rb

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# frozen_string_literal: true
2+
3+
# See docs/basics/configuration.md for many more options
4+
5+
ReactOnRails.configure do |config|
6+
# This configures the script to run to build the production assets by webpack. Set this to nil
7+
# if you don't want react_on_rails building this file for you.
8+
config.build_production_command = "RAILS_ENV=production bin/webpack"
9+
10+
################################################################################
11+
################################################################################
12+
# TEST CONFIGURATION OPTIONS
13+
# Below options are used with the use of this test helper:
14+
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
15+
################################################################################
16+
17+
# If you are using this in your spec_helper.rb (or rails_helper.rb):
18+
#
19+
# ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
20+
#
21+
# with rspec then this controls what yarn command is run
22+
# to automatically refresh your webpack assets on every test run.
23+
#
24+
config.build_test_command = "RAILS_ENV=test bin/webpack"
25+
26+
################################################################################
27+
################################################################################
28+
# SERVER RENDERING OPTIONS
29+
################################################################################
30+
# This is the file used for server rendering of React when using `(prerender: true)`
31+
# If you are never using server rendering, you should set this to "".
32+
# Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
33+
# of the JS sent to the client. For the server rendering, React on Rails creates a pool of
34+
# JavaScript execution instances which should handle any component requested.
35+
#
36+
# While you may configure this to be the same as your client bundle file, this file is typically
37+
# different. You should have ONE server bundle which can create all of your server rendered
38+
# React components.
39+
#
40+
config.server_bundle_js_file = "hello-world-bundle.js"
41+
end

‎config/routes.rb

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
Rails.application.routes.draw do
2+
get 'hello_world', to: 'hello_world#index'
23
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
34
end

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"coffeescript": "1.12.7",
88
"prop-types": "^15.6.0",
99
"react": "^16.2.0",
10-
"react-dom": "^16.2.0"
10+
"react-dom": "^16.2.0",
11+
"react-on-rails": "^10.0.2"
1112
},
1213
"devDependencies": {
1314
"webpack-dev-server": "^2.11.0"

‎yarn.lock

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4783,6 +4783,10 @@ react-dom@^16.2.0:
47834783
object-assign "^4.1.1"
47844784
prop-types "^15.6.0"
47854785

4786+
react-on-rails@^10.0.2:
4787+
version "10.0.2"
4788+
resolved "https://registry.yarnpkg.com/react-on-rails/-/react-on-rails-10.0.2.tgz#4d17b9e1df403ad3ff013f36654957051761c35a"
4789+
47864790
react@^16.2.0:
47874791
version "16.2.0"
47884792
resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"

0 commit comments

Comments
 (0)