-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
rails generate react_on_rails:install
- Loading branch information
Showing
14 changed files
with
219 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| # You can run these commands in separate shells | ||
| web: rails s -p 3000 | ||
|
|
||
| # Next line runs a watch process with webpack to compile the changed files. | ||
| # When making frequent changes to client side assets, you will prefer building webpack assets | ||
| # upon saving rather than when you refresh your browser page. | ||
| # Note, if using React on Rails localization you will need to run | ||
| # `bundle exec rake react_on_rails:locale` before you run bin/webpack | ||
| client: sh -c 'rm -rf public/packs/* || true && bin/webpack -w' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| # Procfile for development using HMR | ||
|
|
||
| web: rails s -p 3000 | ||
|
|
||
| # Note, hot and live reloading don't work with the default generator setup on | ||
| # top of the rails/webpacker Webpack config with server rendering. | ||
| # If you have server rendering enabled (prerender is true), you either need to | ||
| # a. Ensure that you have dev_server.hmr and dev_server.inline BOTH set to false, | ||
| # and you have this option in your config/initializers/react_on_rails.rb: | ||
| # config.same_bundle_for_client_and_server = true | ||
| # If you have either config/webpacker.yml option set to true, you'll see errors like | ||
| # "ReferenceError: window is not defined" (if hmr is true) | ||
| # "TypeError: Cannot read property 'prototype' of undefined" (if inline is true) | ||
| # b. Skip using the webpack-dev-server. bin/webpack --watch is typically | ||
| fast enough. | ||
| # c. See the React on Rails README for a link to documentation for how to setup | ||
| # SSR with HMR and React hot loading using the webpack-dev-server only for the | ||
| # client bundles and a static file for the server bundle. | ||
|
|
||
| # Run the webpack-dev-server for client and maybe server files | ||
| webpack-dev-server: bin/webpack-dev-server | ||
|
|
||
| # Keep the JS fresh for server rendering. Remove if not server rendering. | ||
| # Especially if you have not configured generation of a server bundle without a hash. | ||
| # as that will conflict with the manifest created by the bin/webpack-dev-server | ||
| # rails-server-assets: SERVER_BUNDLE_ONLY=yes bin/webpack --watch |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| # frozen_string_literal: true | ||
|
|
||
| class HelloWorldController < ApplicationController | ||
| layout "hello_world" | ||
|
|
||
| def index | ||
| @hello_world_props = { name: "Stranger" } | ||
| end | ||
| end |
25 changes: 25 additions & 0 deletions
25
app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import React, { useState } from 'react'; | ||
|
|
||
| const HelloWorld = (props) => { | ||
| const [name, setName] = useState(props.name); | ||
|
|
||
| return ( | ||
| <div> | ||
| <h3>Hello, {name}!</h3> | ||
| <hr /> | ||
| <form> | ||
| <label htmlFor="name"> | ||
| Say hello to: | ||
| <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} /> | ||
| </label> | ||
| </form> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| HelloWorld.propTypes = { | ||
| name: PropTypes.string.isRequired, // this is passed from the Rails view | ||
| }; | ||
|
|
||
| export default HelloWorld; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import ReactOnRails from 'react-on-rails'; | ||
|
|
||
| import HelloWorld from '../bundles/HelloWorld/components/HelloWorld'; | ||
|
|
||
| // This is how react_on_rails can see the HelloWorld in the browser. | ||
| ReactOnRails.register({ | ||
| HelloWorld, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| <h1>Hello World</h1> | ||
| <%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>ReactOnRailsWithWebpacker</title> | ||
| <%= csrf_meta_tags %> | ||
| <%= javascript_pack_tag 'hello-world-bundle' %> | ||
| </head> | ||
|
|
||
| <body> | ||
| <%= yield %> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| # frozen_string_literal: true | ||
|
|
||
| # See https://github.com/shakacode/react_on_rails/blob/master/docs/basics/configuration.md | ||
| # for many more options. | ||
|
|
||
| ReactOnRails.configure do |config| | ||
| # This configures the script to run to build the production assets by webpack. Set this to nil | ||
| # if you don't want react_on_rails building this file for you. | ||
| # If nil, then the standard rails/webpacker assets:precompile will run | ||
| # config.build_production_command = nil | ||
|
|
||
| ################################################################################ | ||
| ################################################################################ | ||
| # TEST CONFIGURATION OPTIONS | ||
| # Below options are used with the use of this test helper: | ||
| # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config) | ||
| ################################################################################ | ||
|
|
||
| # If you are using this in your spec_helper.rb (or rails_helper.rb): | ||
| # | ||
| # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config) | ||
| # | ||
| # with rspec then this controls what yarn command is run | ||
| # to automatically refresh your webpack assets on every test run. | ||
| # | ||
| # Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets` | ||
| # and set the config/webpacker.yml option for test to true. | ||
| config.build_test_command = "RAILS_ENV=test bin/webpack" | ||
|
|
||
| ################################################################################ | ||
| ################################################################################ | ||
| # SERVER RENDERING OPTIONS | ||
| ################################################################################ | ||
| # This is the file used for server rendering of React when using `(prerender: true)` | ||
| # If you are never using server rendering, you should set this to "". | ||
| # Note, there is only one server bundle, unlike JavaScript where you want to minimize the size | ||
| # of the JS sent to the client. For the server rendering, React on Rails creates a pool of | ||
| # JavaScript execution instances which should handle any component requested. | ||
| # | ||
| # While you may configure this to be the same as your client bundle file, this file is typically | ||
| # different. You should have ONE server bundle which can create all of your server rendered | ||
| # React components. | ||
| # | ||
| config.server_bundle_js_file = "hello-world-bundle.js" | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| Rails.application.routes.draw do | ||
| get 'hello_world', to: 'hello_world#index' | ||
| # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters