react_on_rails 11.0.3 → 12.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/.circleci/config.yml +320 -0
- data/.eslintignore +2 -1
- data/.eslintrc +30 -2
- data/.github/FUNDING.yml +1 -0
- data/.gitignore +3 -1
- data/.prettierignore +10 -0
- data/.prettierrc +23 -0
- data/.release-it.json +3 -0
- data/.rubocop.yml +39 -11
- data/.travis.yml +11 -22
- data/CHANGELOG.md +209 -4
- data/CONTRIBUTING.md +64 -84
- data/Gemfile +3 -5
- data/KUDOS.md +4 -1
- data/{docs/LICENSE.md → LICENSE.md} +1 -1
- data/PROJECTS.md +7 -1
- data/REACT-ON-RAILS-PRO-LICENSE +95 -0
- data/README.md +233 -634
- data/Rakefile +1 -5
- data/SUMMARY.md +42 -29
- data/book.json +5 -5
- data/docs/additional-reading/asset-pipeline.md +8 -16
- data/docs/additional-reading/convert-rails-5-api-only-app.md +19 -0
- data/docs/additional-reading/credits.md +10 -0
- data/docs/additional-reading/images.md +1 -1
- data/docs/additional-reading/rails-engine-integration.md +7 -0
- data/docs/additional-reading/rails_view_rendering_from_inline_javascript.md +2 -1
- data/docs/additional-reading/react-helmet.md +30 -10
- data/docs/additional-reading/react-router.md +52 -75
- data/docs/additional-reading/server-rendering-tips.md +14 -11
- data/docs/additional-reading/upgrade-webpacker-v3-to-v4.md +10 -0
- data/docs/additional-reading/webpack.md +2 -2
- data/docs/api/javascript-api.md +24 -4
- data/docs/api/redux-store-api.md +102 -0
- data/docs/api/view-helpers-api.md +133 -0
- data/docs/articles.md +20 -0
- data/docs/basics/client-vs-server-rendering.md +23 -0
- data/docs/basics/configuration.md +145 -61
- data/docs/basics/deployment.md +4 -0
- data/docs/basics/{generator.md → generator-details.md} +5 -8
- data/docs/basics/heroku-deployment.md +24 -0
- data/docs/basics/hmr-and-hot-reloading-with-the-webpack-dev-server.md +49 -0
- data/docs/basics/i18n.md +45 -23
- data/docs/basics/installation-into-an-existing-rails-app.md +59 -0
- data/docs/basics/minitest-configuration.md +31 -0
- data/docs/basics/react-server-rendering.md +29 -0
- data/docs/{additional-reading → basics}/recommended-project-structure.md +38 -10
- data/docs/basics/render-functions-and-railscontext.md +205 -0
- data/docs/basics/rspec-configuration.md +73 -0
- data/docs/basics/upgrading-react-on-rails.md +74 -3
- data/docs/basics/webpack-configuration.md +50 -0
- data/docs/contributor-info/errors-with-hooks.md +45 -0
- data/docs/contributor-info/pull-requests.md +44 -0
- data/docs/misc/doctrine.md +2 -2
- data/docs/{additional-reading → outdated}/code-splitting.md +19 -9
- data/docs/outdated/how-react-on-rails-works.md +44 -0
- data/docs/{basics/installation-overview.md → outdated/manual-installation-overview.md} +8 -13
- data/docs/{additional-reading → outdated}/rails-assets-relative-paths.md +3 -3
- data/docs/{additional-reading → outdated}/rails-assets.md +5 -13
- data/docs/testimonials/hvmn.md +25 -0
- data/docs/testimonials/resortpass.md +13 -0
- data/docs/testimonials/testimonials.md +28 -0
- data/docs/tutorial.md +182 -44
- data/jest.config.js +4 -0
- data/lib/generators/USAGE +1 -1
- data/lib/generators/react_on_rails/base_generator.rb +2 -2
- data/lib/generators/react_on_rails/dev_tests_generator.rb +3 -2
- data/lib/generators/react_on_rails/generator_helper.rb +4 -6
- data/lib/generators/react_on_rails/install_generator.rb +2 -0
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev +3 -1
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr +26 -0
- data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx +20 -40
- data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb +4 -1
- data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx +4 -8
- data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/store/helloWorldStore.js +1 -3
- data/lib/react_on_rails/configuration.rb +171 -100
- data/lib/react_on_rails/error.rb +2 -0
- data/lib/react_on_rails/git_utils.rb +2 -0
- data/lib/react_on_rails/{react_on_rails_helper.rb → helper.rb} +133 -161
- data/lib/react_on_rails/json_output.rb +1 -1
- data/lib/react_on_rails/json_parse_error.rb +28 -0
- data/lib/react_on_rails/locales/base.rb +150 -0
- data/lib/react_on_rails/locales/to_js.rb +37 -0
- data/lib/react_on_rails/locales/to_json.rb +27 -0
- data/lib/react_on_rails/prerender_error.rb +56 -18
- data/lib/react_on_rails/react_component/render_options.rb +31 -3
- data/lib/react_on_rails/server_rendering_js_code.rb +42 -0
- data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb +93 -63
- data/lib/react_on_rails/server_rendering_pool.rb +1 -16
- data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb +7 -8
- data/lib/react_on_rails/test_helper/webpack_assets_compiler.rb +17 -0
- data/lib/react_on_rails/test_helper/webpack_assets_status_checker.rb +10 -6
- data/lib/react_on_rails/test_helper.rb +18 -7
- data/lib/react_on_rails/utils.rb +65 -25
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails/version_checker.rb +5 -1
- data/lib/react_on_rails/version_syntax_converter.rb +14 -12
- data/lib/react_on_rails/webpacker_utils.rb +44 -10
- data/lib/react_on_rails.rb +7 -2
- data/lib/tasks/assets.rake +33 -46
- data/lib/tasks/locale.rake +4 -2
- data/package-scripts.yml +49 -0
- data/package.json +49 -40
- data/rakelib/dummy_apps.rake +1 -9
- data/rakelib/example_type.rb +3 -1
- data/rakelib/examples.rake +3 -0
- data/rakelib/lint.rake +2 -7
- data/rakelib/node_package.rake +2 -2
- data/rakelib/release.rake +4 -8
- data/rakelib/run_rspec.rake +5 -18
- data/react_on_rails.gemspec +5 -6
- data/tsconfig.json +14 -0
- data/webpackConfigLoader.js +5 -4
- data/yarn.lock +7645 -1821
- metadata +70 -60
- data/Gemfile.rails32 +0 -74
- data/docs/additional-reading/babel.md +0 -5
- data/docs/additional-reading/caching-and-performance.md +0 -4
- data/docs/additional-reading/heroku-deployment.md +0 -92
- data/docs/additional-reading/hot-reloading-rails-development.md +0 -57
- data/docs/additional-reading/node-server-rendering.md +0 -5
- data/docs/additional-reading/rspec-configuration.md +0 -56
- data/docs/api/ruby-api-hot-reload-view-helpers.md +0 -44
- data/docs/api/ruby-api.md +0 -8
- data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-server +0 -12
- data/lib/react_on_rails/assets_precompile.rb +0 -150
- data/lib/react_on_rails/locales_to_js.rb +0 -134
- /data/docs/{misc → outdated}/rails3.md +0 -0
data/README.md
CHANGED
|
@@ -1,262 +1,164 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
* Better performance client and server side.
|
|
10
|
-
* Migrating from Angular to React.
|
|
11
|
-
* Best practices based on 4 years of React on Rails experience.
|
|
12
|
-
* Early access to the React on Rails Pro Gem and Node code, including:
|
|
13
|
-
* ShakaCode's Node.js rendering server for better performance for server rendering (used now at [egghead.io](https://egghead.io/)).
|
|
14
|
-
* Performance helpers, especially for server rendering
|
|
15
|
-
* Webpack configuration examples
|
|
16
|
-
|
|
17
|
-
Please [email me](mailto:justin@shakacode.com) for a free half-hour project consultation, on anything from React on Rails to any aspect of web development.
|
|
18
|
-
|
|
19
|
-
----
|
|
20
|
-
|
|
21
|
-
## React on Rails is based on Webpacker!
|
|
22
|
-
|
|
23
|
-
Given that Webpacker already provides React integration, why would you use "React on Rails"? Additional features of React on Rails include:
|
|
24
|
-
|
|
25
|
-
1. Server rendering, often for SEO optimization.
|
|
26
|
-
2. Easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API.
|
|
27
|
-
3. Redux and React-Router integration
|
|
28
|
-
4. Localization support
|
|
29
|
-
5. Rspec test helpers to ensure your Webpack bundles are ready for tests
|
|
30
|
-
6. A supportive community
|
|
31
|
-
|
|
32
|
-
----
|
|
33
|
-
|
|
34
|
-
## Steps to a New App with rails/webpacker v3 plus latest React on Rails:
|
|
35
|
-
First be sure to run `rails -v` and check that you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install webpacker with React per the instructions [here](https://github.com/rails/webpacker).
|
|
36
|
-
|
|
37
|
-
### Basic installation for a new Rails App
|
|
38
|
-
*See below for steps on an existing Rails app*
|
|
39
|
-
|
|
40
|
-
1. New Rails app: `rails new my-app --webpack=react`. `cd` into the directory.
|
|
41
|
-
2. Add gem version: `gem 'react_on_rails', '11.0.0' # Use the exact gem version to match npm version`
|
|
42
|
-
3. `bundle install`
|
|
43
|
-
4. Commit this to git (or else you cannot run the generator unless you pass the option --ignore-warnings).
|
|
44
|
-
5. Run the generator: `rails generate react_on_rails:install`
|
|
45
|
-
6. Start the app: `rails s`
|
|
46
|
-
7. Visit http://localhost:3000/hello_world
|
|
47
|
-
|
|
48
|
-
### Turn on server rendering
|
|
49
|
-
|
|
50
|
-
1. Edit `app/views/hello_world/index.html.erb` and set `prerender` to `true`.
|
|
51
|
-
2. Refresh the page.
|
|
52
|
-
|
|
53
|
-
This is the line where you turn server rendering on by setting prerender to true:
|
|
54
|
-
|
|
55
|
-
```
|
|
56
|
-
<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
-----
|
|
60
|
-
|
|
61
|
-
# Community Resources
|
|
62
|
-
Please [**click to subscribe**](https://app.mailerlite.com/webforms/landing/l1d9x5) to keep in touch with Justin Gordon and [ShakaCode](http://www.shakacode.com/). I intend to send announcements of new releases of React on Rails and of our latest [blog articles](https://blog.shakacode.com) and tutorials. Subscribers will also have access to **exclusive content**, including tips and examples.
|
|
63
|
-
|
|
64
|
-
[](https://app.mailerlite.com/webforms/landing/l1d9x5)
|
|
65
|
-
|
|
66
|
-
* **Slack Room**: [Contact us](mailto:contact@shakacode.com) for an invite to the ShakaCode Slack room! Let us know if you want to contribute.
|
|
67
|
-
* **[forum.shakacode.com](https://forum.shakacode.com)**: Post your questions
|
|
68
|
-
* **[@railsonmaui on Twitter](https://twitter.com/railsonmaui)**
|
|
69
|
-
* For a live, [open source](https://github.com/shakacode/react-webpack-rails-tutorial), example of this gem, see [www.reactrails.com](http://www.reactrails.com).
|
|
70
|
-
* See [Projects](PROJECTS.md) using and [KUDOS](./KUDOS.md) for React on Rails. Please submit yours! Please edit either page or [email us](mailto:contact@shakacode.com) and we'll add your info. We also **love stars** as it helps us attract new users and contributors.
|
|
71
|
-
* *See [NEWS.md](NEWS.md) for more notes over time.*
|
|
72
|
-
|
|
73
|
-
------
|
|
74
|
-
|
|
75
|
-
# Testimonials
|
|
76
|
-
From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
|
81
|
-
|
|
82
|
-
-------
|
|
83
|
-
|
|
84
|
-
# Articles, Videos, and Podcasts
|
|
85
|
-
|
|
86
|
-
### Articles
|
|
87
|
-
* [Introducing React on Rails v9 with Webpacker Support](https://blog.shakacode.com/introducing-react-on-rails-v9-with-webpacker-support-f2584c6c8fa4) for an overview of the integration of React on Rails with Webpacker.
|
|
88
|
-
* [Webpacker Lite: Why Fork Webpacker?](https://blog.shakacode.com/webpacker-lite-why-fork-webpacker-f0a7707fac92)
|
|
89
|
-
* [React on Rails, 2000+ 🌟 Stars](https://medium.com/shakacode/react-on-rails-2000-stars-32ff5cfacfbf#.6gmfb2gpy)
|
|
90
|
-
* [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
|
|
91
|
-
* [Simple Tutorial](https://github.com/shakacode/react_on_rails/blob/master/docs/tutorial.md).
|
|
92
|
-
|
|
93
|
-
### Videos
|
|
94
|
-
* [Video of running the v9 installer with Webpacker v3](https://youtu.be/M0WUM_XPaII). History, motivations, philosophy, and overview.
|
|
95
|
-
1. [GORUCO 2017: Front-End Sadness to Happiness: The React on Rails Story by Justin Gordon](https://www.youtube.com/watch?v=SGkTvKRPYrk)
|
|
96
|
-
1. [egghead.io: Creating a component with React on Rails](https://egghead.io/lessons/react-creating-a-component-with-react-on-rails)
|
|
97
|
-
1. [egghead.io: Creating a redux component with React on Rails](https://egghead.io/lessons/react-add-redux-state-management-to-a-react-on-rails-project)
|
|
98
|
-
1. [React On Rails Tutorial Series](https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU)
|
|
99
|
-
1. [History and Motivation](https://youtu.be/F4oymbUHvoY)
|
|
100
|
-
1. [Basic Tutorial Walkthrough](https://youtu.be/_bjScw60FBk)
|
|
101
|
-
1. [Code Walkthrough](https://youtu.be/McQ9UM-_ocQ)
|
|
102
|
-
|
|
103
|
-
------
|
|
104
|
-
|
|
105
|
-
# React on Rails
|
|
106
|
-
|
|
107
|
-
**Project Objective**: To provide an opinionated and optimal framework for integrating Ruby on Rails with React via the [**Webpacker**](https://github.com/rails/webpacker) gem.
|
|
108
|
-
|
|
109
|
-
React on Rails integrates Facebook's [React](https://github.com/facebook/react) front-end framework with Rails. React v0.14.x and greater is supported, with server rendering. [Redux](https://github.com/reactjs/redux) and [React-Router](https://github.com/reactjs/react-router) are supported as well, also with server rendering, using **execJS**.
|
|
110
|
-
|
|
111
|
-
The ability to use a standalone Node Rendering server for better performance and tooling is supported for React on Rails Pro. Contact [justin@shakacode.com](mailto:justin@shakacode.com) for more information.
|
|
112
|
-
|
|
113
|
-
## Table of Contents
|
|
114
|
-
|
|
115
|
-
+ [Features](#features)
|
|
116
|
-
+ [Why Webpack?](#why-webpack)
|
|
117
|
-
+ [rails/webpacker or custom setup for Webpack?](#webpack-configuration-custom-setup-for-webpack-or-railswebpacker)
|
|
118
|
-
+ [Getting Started with an existing Rails app](#getting-started-with-an-existing-rails-app)
|
|
119
|
-
- [Installation Overview](#installation-overview)
|
|
120
|
-
- [Initializer Configuration: config/initializers/react_on_rails.rb](#initializer-configuration)
|
|
121
|
-
- [Including your React Component in your Rails Views](#including-your-react-component-in-your-rails-views)
|
|
122
|
-
- [I18n](#i18n)
|
|
123
|
-
- [Convert rails-5 API only app to rails app](#convert-rails-5-api-only-app-to-rails-app)
|
|
124
|
-
- [NPM](#npm)
|
|
125
|
-
- [Webpacker Configuration](#webpacker-configuration)
|
|
126
|
-
+ [How it Works](#how-it-works)
|
|
127
|
-
- [Client-Side Rendering vs. Server-Side Rendering](#client-side-rendering-vs-server-side-rendering)
|
|
128
|
-
- [Building the Bundles](#building-the-bundles)
|
|
129
|
-
- [Rails Context and Generator Functions](#rails-context-and-generator-functions)
|
|
130
|
-
- [Globally Exposing Your React Components](#globally-exposing-your-react-components)
|
|
131
|
-
- [ReactOnRails View Helpers API](#reactonrails-view-helpers-api)
|
|
132
|
-
- [ReactOnRails JavaScript API](#reactonrails-javascript-api)
|
|
133
|
-
- [React-Router](#react-router)
|
|
134
|
-
- [Deployment](#deployment)
|
|
135
|
-
+ [Integration with Node.js for Server Rendering](#integration-with-nodejs-for-server-rendering)
|
|
136
|
-
+ [Additional Documentation](#additional-documentation)
|
|
137
|
-
+ [Contributing](#contributing)
|
|
138
|
-
+ [License](#license)
|
|
139
|
-
+ [Authors](#authors)
|
|
140
|
-
+ [About ShakaCode](#about-shakacode)
|
|
3
|
+
<p align="center">
|
|
4
|
+
<a href="https://shakacode.com/"><img src="https://user-images.githubusercontent.com/10421828/79436256-517d0500-7fd9-11ea-9300-dfbc7c293f26.png"></a>
|
|
5
|
+
<a href="https://forum.shakacode.com/"><img src="https://user-images.githubusercontent.com/10421828/79436266-53df5f00-7fd9-11ea-94b3-b985e1b05bdc.png"></a>
|
|
6
|
+
<a href="https://forum.shakacode.com/t/react-on-rails-pro-2020-shave-the-yak/1842"><img src="https://user-images.githubusercontent.com/10421828/79436265-53df5f00-7fd9-11ea-8220-fc474f6a856c.png"></a>
|
|
7
|
+
<a href="https://github.com/sponsors/shakacode"><img src="https://user-images.githubusercontent.com/10421828/79466109-cdd90d80-8004-11ea-88e5-25f9a9ddcf44.png"></a>
|
|
8
|
+
</p>
|
|
141
9
|
|
|
142
10
|
---
|
|
143
11
|
|
|
144
|
-
|
|
145
|
-
|
|
12
|
+
[](./LICENSE.md) [](https://travis-ci.org/shakacode/react_on_rails) [](https://badge.fury.io/rb/react_on_rails) [](https://badge.fury.io/js/react-on-rails) [](https://codeclimate.com/github/shakacode/react_on_rails) [](https://coveralls.io/github/shakacode/react_on_rails?branch=master) [](https://rubygems.org/gems/react_on_rails)
|
|
13
|
+
|
|
14
|
+
*These are the docs for React on Rails 12, coming soon. To see the version 11 docs, [click here](https://github.com/shakacode/react_on_rails/tree/11.3.0).*
|
|
15
|
+
|
|
16
|
+
#### News
|
|
17
|
+
**June 24, 2020**:
|
|
18
|
+
1. Gem version: 12.0.0.pre.beta.3 and npm version 12.0.0-beta.3 released! Please try this out!
|
|
19
|
+
Major enhancements:
|
|
20
|
+
1. Proper support for React Hooks
|
|
21
|
+
2. Typescript bindings
|
|
22
|
+
3. i18n support for generating a JSON file rather than a JS file.
|
|
23
|
+
4. Tighter rails/webpacker integration
|
|
24
|
+
|
|
25
|
+
Be sure to see the [CHANGELOG.md](./CHANGELOG.md) and read the upgrade instructions:
|
|
26
|
+
[docs/basics/upgrading-react-on-rails](./docs/basics/upgrading-react-on-rails.md#upgrading-to-v12).
|
|
27
|
+
|
|
28
|
+
2. See Justin's RailsConf talk: [Webpacker, It-Just-Works, But How?](http://railsconf.com/2020/video/justin-gordon-webpacker-it-just-works-but-how).
|
|
29
|
+
|
|
30
|
+
**April 2, 2020**:
|
|
31
|
+
* Are you interested in support for React on Rails? If so check out [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro).
|
|
32
|
+
* HMR is working with [Loadable Components](https://loadable-components.com) for a both amazing hot-reloading developer experience and great runtime performance. Please [email me](mailto:justin@shakacode.com) if you'd like to use [Loadable Components Code Splitting](https://loadable-components.com/docs/code-splitting/) to speed up your app by reducing your bundle sizes and lazily loading the code that's needed.
|
|
33
|
+
* `react_on_rails` fully supports `rails/webpacker`. The example test app in `spec/dummy` was recently converted over to use rails/webpacker v4. It's a good example of how to leverage rails/webpacker's webpack configuration.
|
|
146
34
|
|
|
147
|
-
|
|
148
|
-
+ [Webpack optimization functionality](https://github.com/webpack/docs/wiki/optimization)
|
|
149
|
-
+ [React Router](https://github.com/reactjs/react-router)
|
|
35
|
+
---
|
|
150
36
|
|
|
151
|
-
|
|
37
|
+
#### About
|
|
38
|
+
React on Rails integrates Rails with (server rendering of) Facebook's [React](https://github.com/facebook/react) front-end framework.
|
|
152
39
|
|
|
153
|
-
|
|
40
|
+
This project is sponsored by the software consulting firm [ShakaCode](https://www.shakacode.com). We focus on React front-ends, often with Ruby on Rails or Gatsby. The best way to see what we do is to see the details of [our recent work](https://www.shakacode.com/recent-work).
|
|
154
41
|
|
|
155
|
-
|
|
42
|
+
Interested in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable with server side rendering? We just did this for Popmenu, [lowering Heroku costs 20-25% while getting a 73% decrease in average response times](https://www.shakacode.com/recent-work/popmenu/).
|
|
156
43
|
|
|
157
|
-
|
|
44
|
+
Feel free to contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakacode.com), maintainer of React on Rails, for more information.
|
|
158
45
|
|
|
159
|
-
|
|
160
|
-
Universal React with Rails: Part I](https://medium.com/@alexfedoseev/isomorphic-react-with-rails-part-i-440754e82a59).
|
|
46
|
+
[Click to join **React + Rails Slack**](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE).
|
|
161
47
|
|
|
162
|
-
|
|
48
|
+
# Intro
|
|
163
49
|
|
|
164
|
-
|
|
50
|
+
## Project Objective
|
|
165
51
|
|
|
166
|
-
|
|
52
|
+
To provide a high performance framework for integrating Ruby on Rails with React via the [**Webpacker**](https://github.com/rails/webpacker) gem especially in regards to React Server Rendering.
|
|
167
53
|
|
|
168
|
-
|
|
54
|
+
## Features and Why React on Rails?
|
|
169
55
|
|
|
170
|
-
|
|
56
|
+
Given that rails/webpacker gem already provides basic React integration, why would you use "React on Rails"?
|
|
171
57
|
|
|
172
|
-
|
|
58
|
+
1. The easy passing of props directly from your Rails view to your React components rather than having your Rails view load and then make a separate request to your API.
|
|
59
|
+
1. Tight integration with [rails/webpacker](https://github.com/rails/webpacker).
|
|
60
|
+
1. Server rendering, often used for SEO crawler indexing and UX performance, is not offered by rails/webpacker.
|
|
61
|
+
1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/reactjs/react-router) integration with server-side-rendering.
|
|
62
|
+
1. [Internationalization (I18n) and (localization)](https://github.com/shakacode/react_on_rails/blob/master/docs/basics/i18n.md)
|
|
63
|
+
1. A supportive community. This [web search shows how live public sites are using React on Rails](https://publicwww.com/websites/%22react-on-rails%22++-undeveloped.com/).
|
|
64
|
+
1. [Reason ML Support](https://github.com/shakacode/reason-react-on-rails-example).
|
|
173
65
|
|
|
174
|
-
|
|
66
|
+
See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
|
|
175
67
|
|
|
176
|
-
|
|
68
|
+
## ShakaCode Forum Premium Content
|
|
69
|
+
_Requires creating a free account._
|
|
70
|
+
|
|
71
|
+
* [How to use different versions of a file for client and server rendering](https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352)
|
|
177
72
|
|
|
73
|
+
----
|
|
178
74
|
|
|
179
|
-
|
|
75
|
+
# Docs
|
|
180
76
|
|
|
181
|
-
|
|
77
|
+
**Consider browsing this on our [documentation Gitbook](https://shakacode.gitbooks.io/react-on-rails/content/).**
|
|
182
78
|
|
|
183
|
-
|
|
79
|
+
## Prerequisites
|
|
184
80
|
|
|
185
|
-
|
|
186
|
-
2. `rails/webpacker` might be viewed as a convention in the Rails community.
|
|
81
|
+
Ruby on Rails >=5 and rails/webpacker 4.2+.
|
|
187
82
|
|
|
188
|
-
|
|
83
|
+
## Getting Started
|
|
189
84
|
|
|
190
|
-
|
|
85
|
+
Note, the best way to understand how to use ReactOnRails is to study a few simple examples. You can do a quick demo setup, either on your existing app or on a new Rails app.
|
|
191
86
|
|
|
192
|
-
|
|
87
|
+
1. Do the quick [tutorial](docs/tutorial.md).
|
|
88
|
+
2. Add React on Rails to an existing Rails app per [the instructions](docs/basics/installation-into-an-existing-rails-app.md).
|
|
89
|
+
3. Look at [spec/dummy](spec/dummy), a simple, no DB example.
|
|
90
|
+
3. Look at [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial); it's a full-featured example live at [www.reactrails.com](http://www.reactrails.com).
|
|
193
91
|
|
|
92
|
+
## Basic Installation
|
|
194
93
|
|
|
195
|
-
|
|
94
|
+
*See also [the instructions for installing into an existing Rails app](docs/basics/installation-into-an-existing-rails-app.md).*
|
|
196
95
|
|
|
197
|
-
|
|
96
|
+
2. Add the `react_on_rails` gem to Gemfile:
|
|
198
97
|
|
|
199
|
-
|
|
200
|
-
|
|
98
|
+
```bash
|
|
99
|
+
bundle add react_on_rails --strict
|
|
100
|
+
```
|
|
201
101
|
|
|
202
|
-
|
|
203
|
-
gem "react_on_rails", "11.0.0"
|
|
204
|
-
gem "webpacker", "~> 3.0"
|
|
205
|
-
```
|
|
102
|
+
4. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
|
|
206
103
|
|
|
207
|
-
|
|
208
|
-
```
|
|
209
|
-
bundle exec rails webpacker:install
|
|
210
|
-
bundle exec rails webpacker:install:react
|
|
104
|
+
5. Run the generator:
|
|
211
105
|
|
|
106
|
+
```bash
|
|
107
|
+
rails generate react_on_rails:install
|
|
212
108
|
```
|
|
213
109
|
|
|
214
|
-
|
|
110
|
+
6. Start the app:
|
|
215
111
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
rails generate react_on_rails:install --help
|
|
220
|
-
```
|
|
112
|
+
```bash
|
|
113
|
+
rails s
|
|
114
|
+
```
|
|
221
115
|
|
|
222
|
-
|
|
116
|
+
7. Visit http://localhost:3000/hello_world.
|
|
223
117
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
```
|
|
118
|
+
|
|
119
|
+
### Turning on server rendering
|
|
227
120
|
|
|
228
|
-
|
|
121
|
+
With the code from running the React on Rails generator above:
|
|
229
122
|
|
|
230
|
-
|
|
123
|
+
1. Edit `app/views/hello_world/index.html.erb` and set `prerender` to `true`.
|
|
124
|
+
2. Refresh the page.
|
|
231
125
|
|
|
232
|
-
|
|
233
|
-
foreman start -f Procfile.dev
|
|
234
|
-
```
|
|
126
|
+
Below is the line where you turn server rendering on by setting `prerender` to true:
|
|
235
127
|
|
|
236
|
-
|
|
128
|
+
```erb
|
|
129
|
+
<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>
|
|
130
|
+
```
|
|
237
131
|
|
|
238
|
-
|
|
132
|
+
Note, if you got an error in your console regarding "ReferenceError: window is not defined",
|
|
133
|
+
then you need to edit `config/webpacker.yml` and set `hmr: false` and `inline: false`.
|
|
134
|
+
See [rails/webpacker PR 2644](https://github.com/rails/webpacker/pull/2644) for a fix for this
|
|
135
|
+
issue.
|
|
239
136
|
|
|
240
|
-
|
|
137
|
+
## Basic Usage
|
|
241
138
|
|
|
242
|
-
###
|
|
139
|
+
### Configuration
|
|
243
140
|
|
|
244
|
-
Configure
|
|
141
|
+
* Configure `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [docs/basics/configuration.md](docs/basics/configuration.md) for documentation of all configuration options.
|
|
142
|
+
* Configure `config/webpacker.yml`. If you used the generator and the default webpacker setup, you don't need to touch this file. If you are customizing your setup, then consult the [spec/dummy/config/webpacker.yml](./spec/dummy/config/webpacker.yml) example or the official default [webpacker.yml](https://github.com/rails/webpacker/blob/master/lib/install/config/webpacker.yml).
|
|
143
|
+
* Tip: set `compile: false` for development if you know that you'll always be compiling with a watch process. Otherwise, every request will check if compilation is needed.
|
|
144
|
+
* Your `public_output_path` must match your Webpack configuration for `output` of your bundles.
|
|
145
|
+
* Only set `cache_manifest` to `true` in your production env.
|
|
245
146
|
|
|
246
|
-
|
|
147
|
+
## Including your React Component on your Rails Views
|
|
247
148
|
|
|
248
|
-
|
|
149
|
+
- React component are rendered via your Rails Views. Here's an ERB sample:
|
|
249
150
|
|
|
250
151
|
```erb
|
|
251
152
|
<%= react_component("HelloWorld", props: @some_props) %>
|
|
252
153
|
```
|
|
253
|
-
|
|
154
|
+
|
|
155
|
+
- **Server-Side Rendering**: Your react component is first rendered into HTML on the server. Use the **prerender** option:
|
|
254
156
|
|
|
255
157
|
```erb
|
|
256
158
|
<%= react_component("HelloWorld", props: @some_props, prerender: true) %>
|
|
257
159
|
```
|
|
258
160
|
|
|
259
|
-
|
|
161
|
+
- The `component_name` parameter is a string matching the name you used to expose your React component globally. So, in the above examples, if you had a React component named "HelloWorld", you would register it with the following lines:
|
|
260
162
|
|
|
261
163
|
```js
|
|
262
164
|
import ReactOnRails from 'react-on-rails';
|
|
@@ -266,520 +168,217 @@ Configure the file `config/initializers/react_on_rails.rb`. You can adjust some
|
|
|
266
168
|
|
|
267
169
|
Exposing your component in this way is how React on Rails is able to reference your component from a Rails view. You can expose as many components as you like, as long as their names do not collide. See below for the details of how you expose your components via the react_on_rails webpack configuration.
|
|
268
170
|
|
|
269
|
-
|
|
171
|
+
- `@some_props` can be either a hash or JSON string. This is an optional argument assuming you do not need to pass any options (if you want to pass options, such as `prerender: true`, but you do not want to pass any properties, simply pass an empty hash `{}`). This will make the data available in your component:
|
|
270
172
|
|
|
271
173
|
```ruby
|
|
272
174
|
# Rails View
|
|
273
175
|
<%= react_component("HelloWorld", props: { name: "Stranger" }) %>
|
|
274
176
|
```
|
|
177
|
+
|
|
178
|
+
- This is what your HelloWorld.js file might contain. The railsContext is always available for any parameters that you _always_ want available for your React components. It has _nothing_ to do with the concept of the [React Context](https://reactjs.org/docs/context.html). See [render functions and the RailsContext](docs/basics/render-functions-and-railscontext.md) for more details on this topic.
|
|
179
|
+
|
|
180
|
+
```js
|
|
181
|
+
import React from 'react';
|
|
275
182
|
|
|
276
|
-
|
|
277
|
-
//
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
See the [
|
|
288
|
-
|
|
289
|
-
### Convert rails-5 API only app to rails app
|
|
290
|
-
|
|
291
|
-
1. Go to the directory where you created your app
|
|
292
|
-
|
|
293
|
-
```
|
|
294
|
-
rails new your-current-app-name
|
|
295
|
-
```
|
|
296
|
-
|
|
297
|
-
Rails will start creating the app and will skip the files you have already created. If there is some conflict then it will stop and you need to resolve it manually. be careful at this step as it might replace you current code in conflicted files.
|
|
298
|
-
|
|
299
|
-
2. Resolve conflicts
|
|
300
|
-
|
|
301
|
-
```
|
|
302
|
-
1. Press "d" to see the difference
|
|
303
|
-
2. If it is only adding lines then press "y" to continue
|
|
304
|
-
3. If it is removeing some of your code then press "n" and add all additions manually
|
|
305
|
-
```
|
|
306
|
-
|
|
307
|
-
3. Run `bundle install` and follow [Getting started](#getting-started-with-an-existing-rails-app)
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
### NPM
|
|
311
|
-
All JavaScript in React On Rails is loaded from npm: [react-on-rails](https://www.npmjs.com/package/react-on-rails). To manually install this (you did not use the generator), assuming you have a standard configuration, run this command (assuming you are in the directory where you have your `node_modules`):
|
|
312
|
-
|
|
313
|
-
```bash
|
|
314
|
-
yarn add react-on-rails --exact
|
|
315
|
-
```
|
|
316
|
-
|
|
317
|
-
That will install the latest version and update your package.json. **NOTE:** the `--exact` flag will ensure that you do not have a "~" or "^" for your react-on-rails version in your package.json.
|
|
318
|
-
|
|
319
|
-
### Webpacker Configuration
|
|
320
|
-
|
|
321
|
-
React on Rails users should set configuration value `compile` to false, as React on Rails handles compilation for test and production environments.
|
|
322
|
-
|
|
323
|
-
## How it Works
|
|
324
|
-
The generator installs your webpack files in the `client` folder. Foreman uses webpack to compile your code and output the bundled results to `app/assets/webpack`, which are then loaded by sprockets. These generated bundle files have been added to your `.gitignore` for your convenience.
|
|
325
|
-
|
|
326
|
-
Inside your Rails views, you can now use the `react_component` helper method provided by React on Rails. You can pass props directly to the react component helper. You can also initialize a Redux store with view or controller helper `redux_store` so that the store can be shared amongst multiple React components. See the docs for `redux_store` below and scan the code inside of the [/spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) sample app.
|
|
327
|
-
|
|
328
|
-
### Client-Side Rendering vs. Server-Side Rendering
|
|
329
|
-
In most cases, you should use the `prerender: false` (default behavior) with the provided helper method to render the React component from your Rails views. In some cases, such as when SEO is vital, or many users will not have JavaScript enabled, you can enable server-rendering by passing `prerender: true` to your helper, or you can simply change the default in `config/initializers/react_on_rails`.
|
|
330
|
-
|
|
331
|
-
Now the server will interpret your JavaScript using [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. We recommend using [mini_racer](https://github.com/discourse/mini_racer) as ExecJS's runtime. The generator will automatically add it to your Gemfile for you (once we complete [#501](https://github.com/shakacode/react_on_rails/issues/501)).
|
|
332
|
-
|
|
333
|
-
If you open the HTML source of any web page using React on Rails, you'll see the 3 parts of React on Rails rendering:
|
|
334
|
-
|
|
335
|
-
1. A script tag containing the properties of the React component, such as the registered name and any props. A JavaScript function runs after the page loads, using this data to build and initialize your React components.
|
|
336
|
-
2. The wrapper div `<div id="HelloWorld-react-component-0">` specifies the div where to place the React rendering. It encloses the server-rendered HTML for the React component.
|
|
337
|
-
3. Additional JavaScript is placed to console-log any messages, such as server rendering errors. Note: these server side logs can be configured only to be sent to the server logs.
|
|
338
|
-
|
|
339
|
-
**Note**:
|
|
340
|
-
|
|
341
|
-
* If server rendering is not used (prerender: false), then the major difference is that the HTML rendered for the React component only contains the outer div: `<div id="HelloWorld-react-component-0"/>`. The first specification of the React component is just the same.
|
|
342
|
-
|
|
343
|
-
### Building the Bundles
|
|
344
|
-
Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included Foreman `Procfile.dev` will take care of this for you by starting a webpack process with the watch flag. This will watch your JavaScript code files for changes. Simply run `foreman start -f Procfile.dev`.
|
|
345
|
-
|
|
346
|
-
On production deployments that use asset precompilation, such as Heroku deployments, React on Rails, by default, will automatically run webpack to build your JavaScript bundles. You can see the source code for what gets added to your precompilation [here](https://github.com/shakacode/react_on_rails/tree/master/lib/tasks/assets.rake). For more information on this topic, see [the doc on Heroku deployment](./docs/additional-reading/heroku-deployment.md#more-details-on-precompilation-using-webpack-to-create-javascript-assets).
|
|
347
|
-
|
|
348
|
-
If you have used the provided generator, these bundles will automatically be added to your `.gitignore` to prevent extraneous noise from re-generated code in your pull requests. You will want to do this manually if you do not use the provided generator.
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
### Generator Functions
|
|
352
|
-
You have 2 ways to specify your React components. You can either register the React component directly, or you can create a function that returns a React component. Creating a function has the following benefits:
|
|
353
|
-
|
|
354
|
-
1. You have access to the `railsContext`. See documentation for the railsContext in terms of why you might need it. You **need** a generator function to access the `railsContext`.
|
|
355
|
-
1. You can use the passed-in props to initialize a redux store or set up react-router.
|
|
356
|
-
1. You can return different components depending on what's in the props.
|
|
357
|
-
|
|
358
|
-
ReactOnRails will automatically detect a registered generator function. Thus, there is no difference between registering a React Component versus a "generator function."
|
|
359
|
-
|
|
360
|
-
Another reason to use a generator function is that sometimes in server rendering, specifically with React Router, you need to return the result of calling ReactDOMServer.renderToString(element). You can do this by returning an object with the following shape: { renderedHtml, redirectLocation, error }. Make sure you use this function with `react_component_hash`.
|
|
361
|
-
|
|
362
|
-
For server rendering, if you wish to return multiple HTML strings from a generator function, you may return an Object from your generator function with a single top level property of `renderedHtml`. Inside this Object, place a key called `componentHtml`, along with any other needed keys. An example scenario of this is when you are using side effects libraries like [React Helmet](https://github.com/nfl/react-helmet). Your Ruby code will get this Object as a Hash containing keys componentHtml and any other custom keys that you added:
|
|
363
|
-
{ renderedHtml: { componentHtml, customKey1, customKey2} }
|
|
364
|
-
|
|
365
|
-
### Rails Context and Generator Functions
|
|
366
|
-
When you use a "generator function" to create react components (or renderedHtml on the server), or you used shared redux stores, you get two params passed to your function that creates a React component:
|
|
367
|
-
|
|
368
|
-
1. `props`: Props that you pass in the view helper of either `react_component` or `redux_store`
|
|
369
|
-
2. `railsContext`: Rails contextual information, such as the current pathname. You can customize this in your config file. **Note**: The `railsContext` is not related to the concept of a ["context" for React components](https://facebook.github.io/react/docs/context.html#how-to-use-context).
|
|
370
|
-
|
|
371
|
-
This parameters (`props` and `railsContext`) will be the same regardless of either client or server side rendering, except for the key `serverSide` based on whether or not you are server rendering.
|
|
372
|
-
|
|
373
|
-
While you could manually configure your Rails code to pass the "`railsContext` information" with the rest of your "props", the `railsContext` is a convenience because it's passed consistently to all invocations of generator functions.
|
|
374
|
-
|
|
375
|
-
For example, suppose you create a "generator function" called MyAppComponent.
|
|
376
|
-
|
|
377
|
-
```js
|
|
378
|
-
import React from 'react';
|
|
379
|
-
const MyAppComponent = (props, railsContext) => (
|
|
380
|
-
<div>
|
|
381
|
-
<p>props are: {JSON.stringify(props)}</p>
|
|
382
|
-
<p>railsContext is: {JSON.stringify(railsContext)}
|
|
383
|
-
</p>
|
|
384
|
-
</div>
|
|
385
|
-
);
|
|
386
|
-
export default MyAppComponent;
|
|
387
|
-
```
|
|
388
|
-
|
|
389
|
-
*Note: you will get a React browser console warning if you try to serverRender this since the value of `serverSide` will be different for server rendering.*
|
|
390
|
-
|
|
391
|
-
So if you register your generator function `MyAppComponent`, it will get called like:
|
|
392
|
-
|
|
393
|
-
```js
|
|
394
|
-
reactComponent = MyAppComponent(props, railsContext);
|
|
395
|
-
```
|
|
396
|
-
|
|
397
|
-
and, similarly, any redux store always initialized with 2 parameters:
|
|
183
|
+
export default (props, railsContext) => {
|
|
184
|
+
// Note wrap in a function to make this a React function component
|
|
185
|
+
return () => (
|
|
186
|
+
<div>
|
|
187
|
+
Your locale is {railsContext.i18nLocale}.<br/>
|
|
188
|
+
Hello, {props.name}!
|
|
189
|
+
</div>
|
|
190
|
+
);
|
|
191
|
+
};
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
See the [View Helpers API](./docs/api/view-helpers-api.md) for more details on `react_component` and its sibling function `react_component_hash`.
|
|
398
195
|
|
|
399
|
-
|
|
400
|
-
reduxStore = MyReduxStore(props, railsContext);
|
|
401
|
-
```
|
|
196
|
+
## Fragment Caching
|
|
402
197
|
|
|
403
|
-
|
|
198
|
+
Fragment caching is a [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro) feature. Fragment caching is a **HUGE** performance booster for your apps. Use the `cached_react_component` and `cached_react_component_hash`. The API is the same as `react_component` and `react_component_hash`, but for 2 differences:
|
|
404
199
|
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
The `railsContext` has: (see implementation in file [react_on_rails_helper.rb](https://github.com/shakacode/react_on_rails/tree/master/app/helpers/react_on_rails_helper.rb), method `rails_context` for the definitive list).
|
|
200
|
+
1. The `cache_key` takes the same parameters as any Rails `cache` view helper.
|
|
201
|
+
1. The **props** are passed via a block so that evaluation of the props is not done unless the cache is broken. Suppose you put your props calculation into some method called `some_slow_method_that_returns_props`:
|
|
408
202
|
|
|
409
203
|
```ruby
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
href: request.original_url,
|
|
414
|
-
location: "#{uri.path}#{uri.query.present? ? "?#{uri.query}": ""}",
|
|
415
|
-
scheme: uri.scheme, # http
|
|
416
|
-
host: uri.host, # foo.com
|
|
417
|
-
port: uri.port,
|
|
418
|
-
pathname: uri.path, # /posts
|
|
419
|
-
search: uri.query, # id=30&limit=5
|
|
420
|
-
|
|
421
|
-
# Other
|
|
422
|
-
serverSide: boolean # Are we being called on the server or client? Note: if you conditionally
|
|
423
|
-
# render something different on the server than the client, then React will only show the
|
|
424
|
-
# server version!
|
|
425
|
-
}
|
|
426
|
-
```
|
|
427
|
-
|
|
428
|
-
#### Why the railsContext is only passed to generator functions
|
|
429
|
-
There's no reason that the railsContext would ever get passed to your React component unless the value is explicitly put into the props used for rendering. If you create a react component, rather than a generator function, for use by React on Rails, then you get whatever props are passed in from the view helper, which **does not include the Rails Context**. It's trivial to wrap your component in a "generator function" to return a new component that takes both:
|
|
430
|
-
|
|
431
|
-
```js
|
|
432
|
-
import React from 'react';
|
|
433
|
-
import AppComponent from './AppComponent';
|
|
434
|
-
const AppComponentWithRailsContext = (props, railsContext) => (
|
|
435
|
-
<AppComponent {...{...props, railsContext}}/>
|
|
436
|
-
)
|
|
437
|
-
export default AppComponentWithRailsContext;
|
|
204
|
+
<%= cached_react_component("App", cache_key: [@user, @post], prerender: true) do
|
|
205
|
+
some_slow_method_that_returns_props
|
|
206
|
+
end %>
|
|
438
207
|
```
|
|
439
208
|
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
```js
|
|
443
|
-
<AppComponent {...{ ...props, railsContext }}/>
|
|
444
|
-
```
|
|
445
|
-
|
|
446
|
-
The outer `{...` is for the [JSX spread operator for attributes](https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes) and the innner `{...` is for the [Spread in object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Spread_in_object_literals).
|
|
447
|
-
|
|
448
|
-
#### Use Cases
|
|
449
|
-
##### Heroku Preboot Considerations
|
|
450
|
-
[Heroku Preboot](https://devcenter.heroku.com/articles/preboot) is a feature on Heroku that allows for faster deploy times. When you promote your staging app to production, Preboot simply switches the production server to point at the staging app's container. This means it can deploy much faster since it doesn't have to rebuild anything. However, this means that if you use the [Define Plugin](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) to provide the rails environment to your client code as a variable, that variable will erroneously still have a value of `Staging` instead of `Production`. The `Rails.env` provided at runtime in the railsContext is, however, accurate.
|
|
209
|
+
Such fragment caching saves a ton of CPU work for your web server and greatly reduces the request time. It completely skips the evaluation costs of:
|
|
451
210
|
|
|
452
|
-
|
|
453
|
-
|
|
211
|
+
1. Database calls to compute the props.
|
|
212
|
+
2. Serialization the props values hash into a JSON string for evaluating JavaScript to server render.
|
|
213
|
+
3. Costs associated with evaluating JavaScript from your Ruby code.
|
|
214
|
+
4. Creating the HTML string containing the props and the server-rendered JavaScript code.
|
|
454
215
|
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
#### Customization of the rails_context
|
|
459
|
-
You can customize the values passed in the `railsContext` in your `config/initializers/react_on_rails.rb`. Here's how.
|
|
460
|
-
|
|
461
|
-
Set the config value for the `rendering_extension`:
|
|
462
|
-
|
|
463
|
-
```ruby
|
|
464
|
-
config.rendering_extension = RenderingExtension
|
|
465
|
-
```
|
|
466
|
-
|
|
467
|
-
Implement it like this above in the same file. Create a class method on the module called `custom_context` that takes the `view_context` for a param.
|
|
216
|
+
Note, even without server rendering (without step 3 above), fragment caching is still effective.
|
|
217
|
+
|
|
218
|
+
## Integration with Node.js for Server Rendering
|
|
468
219
|
|
|
469
|
-
|
|
220
|
+
Default server rendering is done by ExecJS. If you want to use a Node.js server for better performing server rendering, [email justin@shakacode.com](mailto:justin@shakacode.com). ShakaCode has built a premium Node rendering server that is part of [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro).
|
|
470
221
|
|
|
471
|
-
|
|
472
|
-
module RenderingExtension
|
|
473
|
-
|
|
474
|
-
# Return a Hash that contains custom values from the view context that will get merged with
|
|
475
|
-
# the standard rails_context values and passed to all calls to generator functions used by the
|
|
476
|
-
# react_component and redux_store view helpers
|
|
477
|
-
def self.custom_context(view_context)
|
|
478
|
-
{
|
|
479
|
-
somethingUseful: view_context.session[:something_useful]
|
|
480
|
-
}
|
|
481
|
-
end
|
|
482
|
-
end
|
|
483
|
-
```
|
|
222
|
+
## Globally Exposing Your React Components
|
|
484
223
|
|
|
485
|
-
|
|
224
|
+
For the React on Rails view helper `react_component` to use your React components, you will have to **register** them in your JavaScript code.
|
|
486
225
|
|
|
487
|
-
|
|
488
|
-
Place your JavaScript code inside of the default `app/javascript` folder. Use modules just as you would when using webpack alone. The difference here is that instead of mounting React components directly to an element using `React.render`, you **register your components to ReactOnRails and then mount them with helpers inside of your Rails views**.
|
|
226
|
+
Use modules just as you would when using Webpack and React without Rails. The difference is that instead of mounting React components directly to an element using `React.render`, you **register your components to ReactOnRails and then mount them with helpers inside of your Rails views**.
|
|
489
227
|
|
|
490
228
|
This is how to expose a component to the `react_component` view helper.
|
|
491
229
|
|
|
492
|
-
|
|
230
|
+
```javascript
|
|
493
231
|
// app/javascript/packs/hello-world-bundle.js
|
|
494
232
|
import HelloWorld from '../components/HelloWorld';
|
|
495
233
|
import ReactOnRails from 'react-on-rails';
|
|
496
234
|
ReactOnRails.register({ HelloWorld });
|
|
497
|
-
```
|
|
498
|
-
|
|
499
|
-
#### Different Server-Side Rendering Code (and a Server Specific Bundle)
|
|
500
|
-
|
|
501
|
-
You may want different initialization for your server-rendered components. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. However, the `railsContext` will tell you if your JavaScript code is running client side or server side. So code that required a different server bundle previously may no longer require this. Note, check if `window` is defined has a similar effect.
|
|
502
|
-
|
|
503
|
-
If you want different code to run, you'd set up a separate webpack compilation file and you'd specify a different, server side entry file. ex. 'serverHelloWorld.jsx'. Note: you might be initializing HelloWorld with version specialized for server rendering.
|
|
504
|
-
|
|
505
|
-
#### Renderer Functions
|
|
506
|
-
A renderer function is a generator function that accepts three arguments: `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for calling `ReactDOM.render` to render a React component into the dom. Why would you want to call `ReactDOM.render` yourself? One possible use case is [code splitting](./docs/additional-reading/code-splitting.md).
|
|
507
|
-
|
|
508
|
-
Renderer functions are not meant to be used on the server since there's no DOM on the server. Instead, use a generator function. Attempting to server render with a renderer function will cause an error.
|
|
509
|
-
|
|
510
|
-
## ReactOnRails View Helpers API
|
|
511
|
-
Once the bundled files have been generated in your `app/assets/webpack` folder and you have registered your components, you will want to render these components on your Rails views using the included helper method, `react_component`.
|
|
512
|
-
|
|
513
|
-
### react_component
|
|
514
|
-
```ruby
|
|
515
|
-
react_component(component_name,
|
|
516
|
-
props: {},
|
|
517
|
-
prerender: nil,
|
|
518
|
-
trace: nil,
|
|
519
|
-
replay_console: nil,
|
|
520
|
-
raise_on_prerender_error: nil,
|
|
521
|
-
id: nil,
|
|
522
|
-
html_options: {})
|
|
523
235
|
```
|
|
524
236
|
|
|
525
|
-
|
|
526
|
-
All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](./docs/basics/configuration.md).
|
|
527
|
-
|
|
528
|
-
+ **general options:**
|
|
529
|
-
+ **props:** Ruby Hash which contains the properties to pass to the react object, or a JSON string. If you pass a string, we'll escape it for you.
|
|
530
|
-
+ **prerender:** enable server-side rendering of a component. Set to false when debugging!
|
|
531
|
-
+ **id:** Id for the div, will be used to attach the React component. This will get assigned automatically if you do not provide an id. Must be unique.
|
|
532
|
-
+ **html_options:** Any other HTML options get placed on the added div for the component. For example, you can set a class (or inline style) on the outer div so that it behaves like a span, with the styling of `display:inline-block`.
|
|
533
|
-
+ **trace:** set to true to print additional debugging information in the browser. Defaults to true for development, off otherwise. Only on the **client side** will you will see the `railsContext` and your props.
|
|
534
|
-
+ **options if prerender (server rendering) is true:**
|
|
535
|
-
+ **replay_console:** Default is true. False will disable echoing server-rendering logs to the browser. While this can make troubleshooting server rendering difficult, so long as you have the configuration of `logging_on_server` set to true, you'll still see the errors on the server.
|
|
536
|
-
+ **logging_on_server:** Default is true. True will log JS console messages and errors to the server.
|
|
537
|
-
+ **raise_on_prerender_error:** Default is false. True will throw an error on the server side rendering. Your controller will have to handle the error.
|
|
538
|
-
|
|
539
|
-
### redux_store
|
|
540
|
-
#### Controller Extension
|
|
541
|
-
Include the module `ReactOnRails::Controller` in your controller, probably in ApplicationController. This will provide the following controller method, which you can call in your controller actions:
|
|
237
|
+
#### Different Server-Side Rendering Code (and a Server-Specific Bundle)
|
|
542
238
|
|
|
543
|
-
`
|
|
239
|
+
You may want different code for your server-rendered components running server side versus client side. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. One way to handle this is conditional code like `if (window) { doClientOnlyCode() }`.
|
|
544
240
|
|
|
545
|
-
|
|
546
|
-
1. You'll call `ReactOnRails.registerStore({storeName})` in the same place that you register your components.
|
|
547
|
-
2. In your component definition, you'll call `ReactOnRails.getStore('storeName')` to get the hydrated Redux store to attach to your components.
|
|
548
|
-
+ **props:** Named parameter `props`. ReactOnRails takes care of setting up the hydration of your store with props from the view.
|
|
241
|
+
Another way is to use a separate webpack configuration file that can use a different server side entry file, like 'serverRegistration.js' as opposed to 'clientRegistration.js.' That would set up different code for server rendering.
|
|
549
242
|
|
|
550
|
-
For
|
|
243
|
+
For details on techniques to use different code for client and server rendering, see: [How to use different versions of a file for client and server rendering](https://forum.shakacode.com/t/how-to-use-different-versions-of-a-file-for-client-and-server-rendering/1352). (_Requires creating a free account._)
|
|
551
244
|
|
|
552
|
-
|
|
553
|
-
`redux_store(store_name, props: {})`
|
|
245
|
+
## Specifying Your React Components: Register directly or use render-functions
|
|
554
246
|
|
|
555
|
-
|
|
247
|
+
You have two ways to specify your React components. You can either register the React component (either function or class component) directly, or you can create a function that returns a React component, which we using the name of a "render-function". Creating a render-function allows:
|
|
556
248
|
|
|
557
|
-
`
|
|
249
|
+
1. You have access to the `railsContext`. See documentation for the railsContext in terms of why you might need it. You **need** a render function to access the `railsContext`.
|
|
250
|
+
2. You can use the passed-in props to initialize a redux store or set up react-router.
|
|
251
|
+
3. You can return different components depending on what's in the props.
|
|
558
252
|
|
|
559
|
-
|
|
253
|
+
Note, the return value of a **render function** should be either a React Function or Class Component, or an object representing server rendering results.
|
|
560
254
|
|
|
561
|
-
|
|
562
|
-
Note: you don't need to initialize your redux store. You can pass the props to your React component in a "generator function." However, consider using the `redux_store` helper for the two following use cases:
|
|
255
|
+
Do not return a React Element (JSX).
|
|
563
256
|
|
|
564
|
-
|
|
565
|
-
|
|
257
|
+
ReactOnRails will automatically detect a registered render function by the fact that the function takes
|
|
258
|
+
more than 1 parameter. In other words, if you want the ability to provide a function that returns the
|
|
259
|
+
React component, then you need to specify at least a second parameter. This is the `railsContext`.
|
|
260
|
+
If you're not using this parameter, declare your function with the unused param:
|
|
566
261
|
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
262
|
+
```js
|
|
263
|
+
const MyComponentGenerator = (props, _railsContext) => {
|
|
264
|
+
if (props.print) {
|
|
265
|
+
// This is a React FunctionComponent because it is wrapped in a function.
|
|
266
|
+
return () => <H1>{JSON.stringify(props)}</H1>;
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
```
|
|
572
270
|
|
|
573
|
-
|
|
271
|
+
Thus, there is no difference between registering a React function or class Component versus a "render function."
|
|
574
272
|
|
|
575
|
-
##
|
|
576
|
-
You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. Also, you may want this to work with Turbolinks to minimize reloading the JavaScript. A good example of this would be something like a notifications counter in a header. As each notification is read in the body of the page, you would like to update the header. If both the header and body share the same Redux store, then this is trivial. Otherwise, we have to rely on other solutions, such as the header polling the server to see how many unread notifications exist.
|
|
273
|
+
## react_component_hash for render functions
|
|
577
274
|
|
|
578
|
-
|
|
275
|
+
Another reason to use a render function is that sometimes in server rendering, specifically with React Router, you need to return the result of calling ReactDOMServer.renderToString(element). You can do this by returning an object with the following shape: { renderedHtml, redirectLocation, error }. Make sure you use this function with `react_component_hash`.
|
|
579
276
|
|
|
580
|
-
|
|
277
|
+
For server rendering, if you wish to return multiple HTML strings from a render function, you may return an Object from your render function with a single top-level property of `renderedHtml`. Inside this Object, place a key called `componentHtml`, along with any other needed keys. An example scenario of this is when you are using side effects libraries like [React Helmet](https://github.com/nfl/react-helmet). Your Ruby code will get this Object as a Hash containing keys componentHtml and any other custom keys that you added:
|
|
581
278
|
|
|
582
279
|
```js
|
|
583
|
-
|
|
584
|
-
// Create a hydrated redux store, using props and the railsContext (object with
|
|
585
|
-
// Rails contextual information).
|
|
586
|
-
return myAppStore;
|
|
587
|
-
}
|
|
588
|
-
|
|
589
|
-
ReactOnRails.registerStore({
|
|
590
|
-
appStore
|
|
591
|
-
});
|
|
280
|
+
{ renderedHtml: { componentHtml, customKey1, customKey2} }
|
|
592
281
|
```
|
|
593
282
|
|
|
594
|
-
|
|
283
|
+
For details on using react_component_hash with react-helmet, see the docs below for the helper API and [docs/additional-reading/react-helmet.md](docs/additional-reading/react-helmet.md).
|
|
595
284
|
|
|
596
|
-
|
|
597
|
-
// getStore will initialize the store if not already initialized, so creates or retrieves store
|
|
598
|
-
const appStore = ReactOnRails.getStore("appStore");
|
|
599
|
-
return (
|
|
600
|
-
<Provider store={appStore}>
|
|
601
|
-
<CommentsApp />
|
|
602
|
-
</Provider>
|
|
603
|
-
);
|
|
604
|
-
```
|
|
605
|
-
|
|
606
|
-
From your Rails view, you can use the provided helper `redux_store(store_name, props)` to create a fresh version of the store (because it may already exist if you came from visiting a previous page). Note: for this example, since we're initializing this from the main layout, we're using a generic name of `@react_props`. In other words, the Rails controller would set `@react_props` to the properties to hydrate the Redux store.
|
|
285
|
+
## Error Handling
|
|
607
286
|
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
...
|
|
611
|
-
<%= redux_store("appStore", props: @react_props) %>;
|
|
612
|
-
<%= react_component("NavbarApp") %>
|
|
613
|
-
yield
|
|
614
|
-
...
|
|
615
|
-
```
|
|
287
|
+
* All errors from ReactOnRails will be of type ReactOnRails::Error.
|
|
288
|
+
* Prerendering (server rendering) errors get context information for HoneyBadger and Sentry for easier debugging.
|
|
616
289
|
|
|
617
|
-
|
|
290
|
+
## I18n
|
|
618
291
|
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
<%= react_component("CommentsApp") %>
|
|
622
|
-
```
|
|
292
|
+
React on Rails provides an option for automatic conversions of Rails `*.yml` locale files into `*.json` or `*.js*.
|
|
293
|
+
See the [How to add I18n](docs/basics/i18n.md) for a summary of adding I18n.
|
|
623
294
|
|
|
624
|
-
|
|
625
|
-
```erb
|
|
626
|
-
<%= react_component("BlogsApp") %>
|
|
627
|
-
```
|
|
295
|
+
## More Details
|
|
628
296
|
|
|
629
|
-
|
|
297
|
+
Browse the links in the [Summary Table of Contents](./SUMMARY.md)
|
|
630
298
|
|
|
631
|
-
|
|
632
|
-
See [ReactOnRails JavaScript API](docs/api/javascript-api.md).
|
|
299
|
+
Here are some highly recommended next articles to read:
|
|
633
300
|
|
|
634
|
-
|
|
301
|
+
1. [How React on Rails Works](docs/outdated/how-react-on-rails-works.md)
|
|
302
|
+
1. [Recommended Project Structure](./docs/basics/recommended-project-structure.md)
|
|
303
|
+
1. [Webpack Configuration](./docs/basics/webpack-configuration.md)
|
|
304
|
+
1. [View Helpers API](./docs/api/view-helpers-api.md)
|
|
305
|
+
1. [Caching and Performance: React on Rails Pro](https://www.shakacode.com/react-on-rails-pro).
|
|
306
|
+
1. [Deployment](docs/basics/deployment.md).
|
|
635
307
|
|
|
636
|
-
|
|
308
|
+
# Support
|
|
637
309
|
|
|
638
|
-
|
|
639
|
-
import ReactOnRails from 'react-on-rails';
|
|
310
|
+
[Click to join **React + Rails Slack**](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE).
|
|
640
311
|
|
|
641
|
-
|
|
642
|
-
csrfToken = ReactOnRails.authenticityToken();
|
|
312
|
+
## Community Resources
|
|
643
313
|
|
|
644
|
-
|
|
645
|
-
header = ReactOnRails.authenticityHeaders(otherHeader);
|
|
646
|
-
```
|
|
314
|
+
Please [**click to subscribe**](https://app.mailerlite.com/webforms/landing/l1d9x5) to keep in touch with Justin Gordon and [ShakaCode](http://www.shakacode.com/). I intend to send announcements of new releases of React on Rails and of our latest [blog articles](https://blog.shakacode.com) and tutorials.
|
|
647
315
|
|
|
648
|
-
|
|
316
|
+
[](https://app.mailerlite.com/webforms/landing/l1d9x5)
|
|
649
317
|
|
|
650
|
-
|
|
651
|
-
[
|
|
318
|
+
- **Slack Room**: [Contact us](mailto:contact@shakacode.com) for an invite to the ShakaCode Slack room! Let us know if you want to contribute.
|
|
319
|
+
- **[forum.shakacode.com](https://forum.shakacode.com)**: Post your questions
|
|
320
|
+
- **[@railsonmaui on Twitter](https://twitter.com/railsonmaui)**
|
|
321
|
+
- For a live, [open source](https://github.com/shakacode/react-webpack-rails-tutorial), example of this gem, see [www.reactrails.com](http://www.reactrails.com).
|
|
322
|
+
- See [Projects](PROJECTS.md) using and [KUDOS](./KUDOS.md) for React on Rails. Please submit yours! Please edit either page or [email us](mailto:contact@shakacode.com) and we'll add your info. We also **love stars** as it helps us attract new users and contributors.
|
|
323
|
+
- *See [NEWS.md](NEWS.md) for more notes over time.*
|
|
652
324
|
|
|
653
|
-
|
|
654
|
-
1. Examples in [spec/dummy/app/views/react_router](./spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](spec/dummy/client/app/startup/ServerRouterApp.jsx).
|
|
655
|
-
1. [Code Splitting docs](./docs/additional-reading/code-splitting.md) for information about how to set up code splitting for server rendered routes.
|
|
325
|
+
## Contributing
|
|
656
326
|
|
|
657
|
-
|
|
658
|
-
Consider fragment and http caching of pages that contain React on Rails components. See [Caching and Performance](./docs/additional-reading/caching-and-performance.md) for more details.
|
|
327
|
+
Bug reports and pull requests are welcome. See [Contributing](CONTRIBUTING.md) to get started, and the [list of help wanted issues](https://github.com/shakacode/react_on_rails/labels/contributions%3A%20up%20for%20grabs%21).
|
|
659
328
|
|
|
660
|
-
##
|
|
661
|
-
* React on Rails puts the necessary precompile steps automatically in the rake precompile step. You can, however, disable this by setting certain values to nil in the [config/initializers/react_on_rails.rb](./docs/additional-reading/rspec_configuration.md).
|
|
662
|
-
* `build_production_command`: Set to nil to turn off the precompilation of the js assets.
|
|
663
|
-
* `config.symlink_non_digested_assets_regex`: Default is nil, turning off the setup of non-js assets. This should be nil except when when using Sprockets rather than Webpacker.
|
|
664
|
-
* See the [Heroku Deployment](./docs/additional-reading/heroku-deployment.md) doc for specifics regarding Heroku. The information here should apply to other deployments.
|
|
329
|
+
## React on Rails Pro
|
|
665
330
|
|
|
666
|
-
|
|
331
|
+
React on Rails Pro provides Node server rendering, fragment caching, code-splitting, and other performance enhancements for React on Rails. For a case study, see the article [HVMN’s 90% Reduction in Server Response Time from React on Rails Pro](https://blog.shakacode.com/hvmns-90-reduction-in-server-response-time-from-react-on-rails-pro-eb08226687db). The [Wiki](https://github.com/shakacode/react_on_rails/wiki) contains more details.
|
|
667
332
|
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
## Additional Documentation
|
|
671
|
-
**Try out our [Documentation Gitbook](https://shakacode.gitbooks.io/react-on-rails/content/) for improved readability & reference.**
|
|
672
|
-
|
|
673
|
-
+ **Rails**
|
|
674
|
-
+ [Rails Assets](./docs/additional-reading/rails-assets.md)
|
|
675
|
-
+ [Rails Engine Integration](./docs/additional-reading/rails-engine-integration.md)
|
|
676
|
-
+ [Rails View Rendering from Inline JavaScript](./docs/additional-reading/rails_view_rendering_from_inline_javascript.md)
|
|
677
|
-
+ [RSpec Configuration](./docs/additional-reading/rspec-configuration.md)
|
|
678
|
-
+ [Turbolinks](./docs/additional-reading/turbolinks.md)
|
|
679
|
-
|
|
680
|
-
+ **Javascript**
|
|
681
|
-
+ [Node Dependencies, NPM, and Yarn](./docs/additional-reading/node-dependencies-and-npm.md)
|
|
682
|
-
+ [Babel](./docs/additional-reading/babel.md)
|
|
683
|
-
+ [React Router](./docs/additional-reading/react-router.md)
|
|
684
|
-
+ [React & Redux](./docs/additional-reading/react-and-redux.md)
|
|
685
|
-
+ [Webpack](./docs/additional-reading/webpack.md)
|
|
686
|
-
+ [Webpack Configuration](./docs/additional-reading/webpack.md)
|
|
687
|
-
+ [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html)
|
|
688
|
-
+ [Developing with the Webpack Dev Server](docs/additional-reading/webpack-dev-server.md)
|
|
689
|
-
+ [Node Server Rendering](./docs/additional-reading/node-server-rendering.md)
|
|
690
|
-
+ [Server Rendering Tips](./docs/additional-reading/server-rendering-tips.md)
|
|
691
|
-
+ [Code Splitting](./docs/additional-reading/code-splitting.md)
|
|
692
|
-
+ [AngularJS Integration and Migration to React on Rails](./docs/additional-reading/angular-js-integration-migration.md)
|
|
693
|
-
+ [Webpack, the Asset Pipeline, and Using Assets w/ React](./docs/additional-reading/rails-assets-relative-paths.md)
|
|
694
|
-
|
|
695
|
-
+ **Development**
|
|
696
|
-
+ [React on Rails Basic Installation Tutorial](./docs/tutorial.md) ([live demo](https://hello-react-on-rails.herokuapp.com))
|
|
697
|
-
+ [Installation Overview](./docs/basics/installation-overview.md)
|
|
698
|
-
+ [Configuration](./docs/basics/configuration.md)
|
|
699
|
-
+ [Migration from react-rails](./docs/basics/migrating-from-react-rails.md)
|
|
700
|
-
+ [Recommended Project Structure](./docs/additional-reading/recommended-project-structure.md)
|
|
701
|
-
+ [Generator Tips](./docs/basics/generator.md)
|
|
702
|
-
+ [Hot Reloading of Assets For Rails Development](./docs/additional-reading/hot-reloading-rails-development.md)
|
|
703
|
-
+ [Heroku Deployment](./docs/additional-reading/heroku-deployment.md)
|
|
704
|
-
+ [Updating Dependencies](./docs/additional-reading/updating-dependencies.md)
|
|
705
|
-
+ [Caching and Performance](./docs/additional-reading/caching-and-performance.md)
|
|
706
|
-
|
|
707
|
-
+ **API**
|
|
708
|
-
+ [JavaScript API](./docs/api/javascript-api.md)
|
|
709
|
-
+ [Ruby API](./docs/api/ruby-api.md)
|
|
710
|
-
+ [Setting up Hot Reloading during Rails Development, API docs](./docs/api/ruby-api-hot-reload-view-helpers.md)
|
|
711
|
-
|
|
712
|
-
+ **Misc**
|
|
713
|
-
+ [Upgrading](./docs/basics/upgrading-react-on-rails.md)
|
|
714
|
-
+ [Tips](./docs/additional-reading/tips.md)
|
|
715
|
-
+ [Changelog](./CHANGELOG.md)
|
|
716
|
-
+ [Projects](./PROJECTS.md)
|
|
717
|
-
+ [Shaka Code Style](./docs/coding-style/style.md)
|
|
718
|
-
+ [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v61)
|
|
719
|
-
+ [Code of Conduct](./docs/misc/code_of_conduct.md)
|
|
720
|
-
+ [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
|
|
721
|
-
+ [React on Rails, 2000+ 🌟 Stars](https://medium.com/shakacode/react-on-rails-2000-stars-32ff5cfacfbf#.6gmfb2gpy)
|
|
722
|
-
+ [Generator Testing](./docs/contributor-info/generator-testing.md)
|
|
723
|
-
+ [Linting](./docs/contributor-info/linters.md)
|
|
724
|
-
+ [Releasing](./docs/contributor-info/releasing.md)
|
|
725
|
-
+ **[CONTRIBUTING](CONTRIBUTING.md)**
|
|
726
|
-
|
|
727
|
-
## Demos
|
|
728
|
-
+ [www.reactrails.com](http://www.reactrails.com) with the source at [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/).
|
|
729
|
-
+ [spec app](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy): Great simple examples used for our tests.
|
|
730
|
-
```
|
|
731
|
-
cd spec/dummy
|
|
732
|
-
bundle && yarn
|
|
733
|
-
foreman start
|
|
734
|
-
```
|
|
333
|
+
[](https://blog.shakacode.com/hvmns-90-reduction-in-server-response-time-from-react-on-rails-pro-eb08226687db)
|
|
735
334
|
|
|
736
|
-
##
|
|
737
|
-
+ Ruby 2.1 or greater
|
|
738
|
-
+ Rails 3.2 or greater
|
|
739
|
-
+ Node 5.5 or greater
|
|
335
|
+
## React on Rails Pro Support
|
|
740
336
|
|
|
741
|
-
|
|
742
|
-
Bug reports and pull requests are welcome. This project is intended to be a welcoming space for collaboration, and contributors are expected to adhere to our version of the [Contributor Covenant Code of Conduct](docs/misc/code_of_conduct.md)).
|
|
337
|
+
The [React on Rails Pro Support Plan](https://www.shakacode.com/react-on-rails-pro) can help!
|
|
743
338
|
|
|
744
|
-
|
|
339
|
+
* Optimizing your webpack setup to Webpack v4 for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable.
|
|
340
|
+
* Upgrading your app to use the current Webpack setup that skips the Sprockets asset pipeline.
|
|
341
|
+
* Better performance client and server side.
|
|
342
|
+
* Best practices based on over four years of React on Rails experience.
|
|
343
|
+
* Using [Reason](https://reasonml.github.io/) with (or without) React on Rails.
|
|
745
344
|
|
|
746
|
-
|
|
747
|
-
The gem is available as open source under the terms of the [MIT License](./docs/LICENSE.md).
|
|
345
|
+
ShakaCode can also help you with your custom software development needs. We specialize in marketplace and e-commerce applications that utilize both Rails and React. Because we own [HawaiiChee.com](https://www.hawaiichee.com), we can leverage that code for your app!
|
|
748
346
|
|
|
749
|
-
|
|
750
|
-
[The Shaka Code team!](http://www.shakacode.com/about/)
|
|
347
|
+
Please email Justin Gordon [justin@shakacode.com](mailto:justin@shakacode.com), the maintainer of React on Rails, for more information.
|
|
751
348
|
|
|
752
|
-
|
|
349
|
+
## Testimonials for ShakaCode
|
|
350
|
+
[HVMN Testimonial, by Paul Benigeri, October 12, 2018](./docs/testimonials/hvmn.md)
|
|
351
|
+
> The price we paid for the consultation + the React on Rails pro license has already been made back a couple of times from hosting fees alone. The entire process was super hands off, and our core team was able to focus on shipping new feature during that sprint.
|
|
753
352
|
|
|
754
|
-
|
|
353
|
+
[ResortPass Testimonial, by Leora Juster, December 10, 2018](./docs/testimonials/resortpass.md)
|
|
755
354
|
|
|
756
|
-
|
|
355
|
+
> Justin and his team were instrumental in assisting us in setting design foundations and standards for our transition to a react on rails application. Just three months of work with the team at Shaka code and we have a main page of our application server-side rendering at exponentially improved speeds.
|
|
757
356
|
|
|
758
|
-
|
|
759
|
-
The following companies support open source, and ShakaCode uses their products!
|
|
357
|
+
From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:
|
|
760
358
|
|
|
761
|
-
|
|
762
|
-
* [](https://www.browserstack.com)
|
|
359
|
+
|
|
763
360
|
|
|
764
|
-
|
|
361
|
+
For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
|
765
362
|
|
|
766
|
-
|
|
363
|
+
# Supporters
|
|
767
364
|
|
|
768
|
-
|
|
365
|
+
The following companies support this open source project, and ShakaCode uses their products! Justin writes React on Rails on [RubyMine](https://www.jetbrains.com/ruby/). We use [Scout](https://scoutapp.com/) to monitor the live performance of [HawaiiChee.com](https://www.hawaiichee.com), [BrowserStack](https://www.browserstack.com) to solve problems with oddball browsers, and [CodersRank](https://codersrank.io/) to find candidates for our team.
|
|
769
366
|
|
|
770
|
-
|
|
367
|
+
[](https://www.jetbrains.com/ruby/)
|
|
368
|
+
[](https://scoutapp.com/)
|
|
369
|
+
[](https://www.browserstack.com)
|
|
370
|
+
[](https://codersrank.io/?utm_source=github&utm_medium=banner&utm_campaign=shakacode)
|
|
771
371
|
|
|
772
|
-
|
|
372
|
+
## Clubhouse
|
|
373
|
+
I've just moved ShakaCode's development to [ClubHouse](https://clubhouse.io/) from Trello. We're going to be doing this with all our projects. If you want to **try ClubHouse and get 2 months free beyond the 14-day trial period**, click [here to use ShakaCode's referral code](http://r.clbh.se/mvfoNeH). We're participating in their awesome triple-sided referral program, which you can read about [here](https://clubhouse.io/blog/clubhouse-referral-program-5f614bb437c3). By using our [referral code](http://r.clbh.se/mvfoNeH) you'll be supporting ShakaCode and, thus, React on Rails!
|
|
773
374
|
|
|
774
|
-
*
|
|
775
|
-
* Building custom web and mobile (React Native) applications. We typically work with a technical founder or CTO and instantly provide a full development team including designers.
|
|
776
|
-
* Migrating **Angular** + Rails to React + Rails. You can see an example of React on Rails and our work converting Angular to React on Rails at [egghead.io](https://egghead.io/browse/frameworks).
|
|
777
|
-
* Augmenting your team to get your product completed more efficiently and quickly.
|
|
375
|
+
*If you'd like to support React on Rails and have your company listed here, [get in touch](mailto:justin@shakacode.com).*
|
|
778
376
|
|
|
779
|
-
|
|
377
|
+
Aloha and best wishes from Justin and the ShakaCode team!
|
|
780
378
|
|
|
781
|
-
|
|
379
|
+
# Work with Us
|
|
380
|
+
ShakaCode is **[currently looking to hire](http://www.shakacode.com/about/#work-with-us)** like-minded, remote-first, developers that wish to work on our projects, including [Hawaii Chee](https://www.hawaiichee.com). Your main coding interview will be pairing with us on our open source! We're also using [ReasonML](https://reasonml.github.io/) extensively!
|
|
782
381
|
|
|
783
|
-
|
|
382
|
+
# License
|
|
784
383
|
|
|
785
|
-
|
|
384
|
+
The gem is available as open source under the terms of the [MIT License](LICENSE.md).
|