react_on_rails 11.0.9 → 11.0.10
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.rubocop.yml +1 -1
- data/CHANGELOG.md +8 -2
- data/{docs/LICENSE.md → LICENSE.md} +1 -1
- data/README.md +177 -693
- data/SUMMARY.md +39 -26
- 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/rails-assets-relative-paths.md +2 -2
- data/docs/additional-reading/server-rendering-tips.md +2 -4
- data/docs/additional-reading/webpack.md +2 -2
- data/docs/api/javascript-api.md +21 -1
- data/docs/api/redux-store-api.md +100 -0
- data/docs/api/view-helpers-api.md +115 -0
- data/docs/articles.md +20 -0
- data/docs/basics/client-vs-server-rendering.md +17 -0
- data/docs/basics/deployment.md +6 -0
- data/docs/basics/{generator.md → generator-details.md} +4 -7
- data/docs/basics/generator-functions-and-railscontext.md +157 -0
- data/docs/basics/how-react-on-rails-works.md +40 -0
- data/docs/basics/installation-into-an-existing-rails-app.md +64 -0
- data/docs/basics/react-server-rendering.md +27 -0
- data/docs/{additional-reading → basics}/recommended-project-structure.md +26 -4
- data/docs/{additional-reading → basics}/rspec-configuration.md +0 -0
- data/docs/basics/webpack-configuration.md +29 -0
- data/docs/misc/doctrine.md +1 -1
- data/docs/{additional-reading → misc-pending}/code-splitting.md +8 -2
- data/docs/{basics/installation-overview.md → misc-pending/manual-installation-overview.md} +3 -8
- data/docs/{additional-reading → misc-pending}/rails-assets.md +3 -1
- data/docs/testimonials.md +11 -0
- data/docs/tutorial.md +4 -4
- data/lib/generators/USAGE +1 -1
- data/lib/react_on_rails/{react_on_rails_helper.rb → helper.rb} +4 -4
- data/lib/react_on_rails/prerender_error.rb +7 -3
- data/lib/react_on_rails/server_rendering_pool.rb +0 -1
- data/lib/react_on_rails/utils.rb +17 -0
- data/lib/react_on_rails/version.rb +1 -1
- data/lib/react_on_rails.rb +1 -1
- data/package.json +1 -1
- data/react_on_rails.gemspec +1 -1
- metadata +27 -17
- data/docs/additional-reading/caching-and-performance.md +0 -4
- data/docs/additional-reading/node-server-rendering.md +0 -5
- data/docs/api/ruby-api.md +0 -8
data/README.md
CHANGED
|
@@ -1,262 +1,161 @@
|
|
|
1
|
-
|
|
1
|
+
# ReactOnRails
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](./LICENSE.md) [](https://travis-ci.org/shakacode/react_on_rails) [](https://app.codeship.com/projects/187011) [](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)
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
React on Rails Pro provides Node server rendering and other performance enhancements for React on Rails. It's live at [egghead.io](https://egghead.io). See the [React on Rails Pro Docs](https://github.com/shakacode/react_on_rails/wiki).
|
|
7
|
-
|
|
8
|
-
Aloha, I'm Justin Gordon the creator and maintainer of React on Rails. I offer a [React on Rails Pro Support Plan](http://www.shakacode.com/work/shakacode-pro-support.pdf), and I can help you with:
|
|
9
|
-
* Optimizing your webpack setup to Webpack v4 for React on Rails.
|
|
10
|
-
* Upgrading from older React on Rails to newer versions (are using using the new Webpacker setup that avoids the asset pipeline?)
|
|
11
|
-
* Better performance client and server side.
|
|
12
|
-
* Efficiently migrating from Angular to React.
|
|
13
|
-
* Best practices based on 4 years of React on Rails experience.
|
|
14
|
-
|
|
15
|
-
From Kyle Maune of Cooper Aerial, May 4, 2018
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
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.
|
|
24
|
-
|
|
25
|
-
For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
|
5
|
+
React on Rails integrates Rails with (server rendering of) Facebook's [React](https://github.com/facebook/react) front-end framework.
|
|
26
6
|
|
|
7
|
+
Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? [Contact me](mailto:justin@shakacode.com).
|
|
27
8
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
## React on Rails is based on Webpacker!
|
|
31
|
-
|
|
32
|
-
Given that Webpacker already provides React integration, why would you use "React on Rails"? Additional features of React on Rails include:
|
|
33
|
-
|
|
34
|
-
1. Server rendering, often for SEO optimization.
|
|
35
|
-
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.
|
|
36
|
-
3. Redux and React-Router integration
|
|
37
|
-
4. Localization support
|
|
38
|
-
5. Rspec test helpers to ensure your Webpack bundles are ready for tests
|
|
39
|
-
6. A supportive community
|
|
40
|
-
|
|
41
|
-
----
|
|
42
|
-
|
|
43
|
-
## Steps to a New App with rails/webpacker v3 plus latest React on Rails:
|
|
44
|
-
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).
|
|
9
|
+
ShakaCode is **[currently looking to hire](http://www.shakacode.com/about/#work-with-us)** like-minded 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 getting into [Reason](https://reasonml.github.io/)!
|
|
45
10
|
|
|
46
|
-
|
|
47
|
-
*See below for steps on an existing Rails app*
|
|
11
|
+
# Intro
|
|
48
12
|
|
|
49
|
-
|
|
50
|
-
2. Add gem version: `gem 'react_on_rails', '11.0.0' # Use the exact gem version to match npm version`
|
|
51
|
-
3. `bundle install`
|
|
52
|
-
4. Commit this to git (or else you cannot run the generator unless you pass the option --ignore-warnings).
|
|
53
|
-
5. Run the generator: `rails generate react_on_rails:install`
|
|
54
|
-
6. Start the app: `rails s`
|
|
55
|
-
7. Visit http://localhost:3000/hello_world
|
|
13
|
+
## Project Objective
|
|
56
14
|
|
|
57
|
-
|
|
15
|
+
To provide an opinionated and optimal framework for integrating Ruby on Rails with React via the [**Webpacker**](https://github.com/rails/webpacker) gem.
|
|
58
16
|
|
|
59
|
-
|
|
60
|
-
2. Refresh the page.
|
|
17
|
+
## Features and Why React on Rails?
|
|
61
18
|
|
|
62
|
-
|
|
19
|
+
Given that rails/webpacker gem already provides basic React integration, why would you use "React on Rails"? Server rendering, often used for SEO and performance, is not offered by rails/webpacker.
|
|
63
20
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
21
|
+
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 1request to your API.
|
|
22
|
+
1. [Redux](https://github.com/reactjs/redux) and [React Router](https://github.com/reactjs/react-router) integration.
|
|
23
|
+
1. [Internationalization (I18n) and (localization)](https://github.com/shakacode/react_on_rails/blob/master/docs/basics/i18n.md)
|
|
24
|
+
1. [RSpec Test Helpers Configuration](docs/basics/rspec-configuration.md) to ensure your Webpack bundles are ready for tests.
|
|
25
|
+
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/).
|
|
26
|
+
1. [Reason ML Support](https://github.com/shakacode/reason-react-on-rails-example)
|
|
67
27
|
|
|
68
|
-
|
|
28
|
+
See the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) for an example of a live implementation and code.
|
|
69
29
|
|
|
70
|
-
# Community Resources
|
|
71
|
-
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.
|
|
72
30
|
|
|
73
|
-
|
|
31
|
+
## React on Rails Pro and ShakaCode Pro Support
|
|
74
32
|
|
|
75
|
-
|
|
76
|
-
* **[forum.shakacode.com](https://forum.shakacode.com)**: Post your questions
|
|
77
|
-
* **[@railsonmaui on Twitter](https://twitter.com/railsonmaui)**
|
|
78
|
-
* 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).
|
|
79
|
-
* 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.
|
|
80
|
-
* *See [NEWS.md](NEWS.md) for more notes over time.*
|
|
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)
|
|
141
|
-
|
|
142
|
-
---
|
|
143
|
-
|
|
144
|
-
## Features
|
|
145
|
-
Like the [react-rails](https://github.com/reactjs/react-rails) gem, React on Rails is capable of server-side rendering with fragment caching and is compatible with [turbolinks](https://github.com/turbolinks/turbolinks). While the initial setup is slightly more involved, it allows for advanced functionality such as:
|
|
146
|
-
|
|
147
|
-
+ [Redux](https://github.com/reactjs/redux)
|
|
148
|
-
+ [Webpack optimization functionality](https://github.com/webpack/docs/wiki/optimization)
|
|
149
|
-
+ [React Router](https://github.com/reactjs/react-router)
|
|
33
|
+
React on Rails Pro provides Node server rendering and other performance enhancements for React on Rails. It's live at [egghead.io](https://egghead.io). See the [React on Rails Pro Docs](https://github.com/shakacode/react_on_rails/wiki).
|
|
150
34
|
|
|
151
|
-
|
|
35
|
+
The [React on Rails Pro Support Plan](http://www.shakacode.com/work/shakacode-pro-support.pdf) can help you with:
|
|
152
36
|
|
|
153
|
-
|
|
37
|
+
* Optimizing your webpack setup to Webpack v4 for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable.
|
|
38
|
+
* Upgrading your app to use the current Webpack setup that skips the Sprockets asset pipeline.
|
|
39
|
+
* Better performance client and server side.
|
|
40
|
+
* Efficiently migrating from [Angular to React](https://www.shakacode.com/services/angular-to-react/).
|
|
41
|
+
* Best practices based on four years of React on Rails experience.
|
|
154
42
|
|
|
155
|
-
|
|
43
|
+
ShakaCode can also help you with your Rails, JavaScript, and React-Native development needs. We build custom web and mobile applications. Because we own [HawaiiChee.com](https://www.hawaiichee.com), we can leverage that code for your app!
|
|
156
44
|
|
|
157
|
-
|
|
45
|
+
The article [Why Hire ShakaCode?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9) provides additional details about our projects.
|
|
158
46
|
|
|
159
|
-
|
|
160
|
-
|
|
47
|
+
|
|
48
|
+
Please [email me (Justin Gordon), the creator of React on Rails](mailto:justin@shakacode.com), to see if I can help you or if you want an invite to our private Slack room for ShakaCode.
|
|
161
49
|
|
|
162
|
-
##
|
|
50
|
+
## Testimonials for Hiring ShakaCode and our "Pro Support"
|
|
163
51
|
|
|
164
|
-
|
|
52
|
+
From Kyle Maune of Cooper Aerial, May 4, 2018
|
|
165
53
|
|
|
166
|
-
|
|
54
|
+
|
|
167
55
|
|
|
168
|
-
|
|
56
|
+
From Joel Hooks, Co-Founder, Chief Nerd at [egghead.io](https://egghead.io/), January 30, 2017:
|
|
169
57
|
|
|
170
|
-
|
|
58
|
+
|
|
171
59
|
|
|
172
|
-
|
|
60
|
+
For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
|
|
173
61
|
|
|
174
|
-
|
|
62
|
+
----
|
|
175
63
|
|
|
176
|
-
|
|
64
|
+
# Docs
|
|
177
65
|
|
|
66
|
+
**Consider browsing this on our [documentation Gitbook](https://shakacode.gitbooks.io/react-on-rails/content/).**
|
|
178
67
|
|
|
179
|
-
|
|
68
|
+
## Prerequisites
|
|
180
69
|
|
|
181
|
-
|
|
70
|
+
React on Rails supports older versions of Rails back to 3.x. Rails/webpacker requires version 4.2+.
|
|
182
71
|
|
|
183
|
-
|
|
72
|
+
## Getting Started
|
|
184
73
|
|
|
185
|
-
|
|
186
|
-
2. `rails/webpacker` might be viewed as a convention in the Rails community.
|
|
74
|
+
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.
|
|
187
75
|
|
|
188
|
-
|
|
76
|
+
1. Do the quick [tutorial](docs/tutorial.md).
|
|
77
|
+
2. Add React on Rails to an existing Rails app per [the instructions](docs/basics/installation-into-an-existing-rails-app.md).
|
|
78
|
+
3. Look at [spec/dummy](spec/dummy), a simple, no DB example.
|
|
79
|
+
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).
|
|
189
80
|
|
|
190
|
-
|
|
81
|
+
## Basic Installation
|
|
191
82
|
|
|
192
|
-
See [
|
|
83
|
+
*See also [the instructions for installing into an existing Rails app](docs/basics/installation-into-an-existing-rails-app.md).*
|
|
193
84
|
|
|
85
|
+
1. Create a new Rails app:
|
|
194
86
|
|
|
195
|
-
|
|
87
|
+
``````bash
|
|
88
|
+
$ rails new my-app --webpack=react
|
|
89
|
+
$ cd my-app
|
|
90
|
+
``````
|
|
196
91
|
|
|
197
|
-
|
|
92
|
+
2. Add the `react_on_rails` gem to Gemfile:
|
|
198
93
|
|
|
199
|
-
|
|
200
|
-
|
|
94
|
+
```ruby
|
|
95
|
+
gem 'react_on_rails', '11.0.9' # Use the exact gem version to match npm version
|
|
96
|
+
```
|
|
201
97
|
|
|
202
|
-
|
|
203
|
-
gem "react_on_rails", "11.0.0"
|
|
204
|
-
gem "webpacker", "~> 3.0"
|
|
205
|
-
```
|
|
98
|
+
3. Install the `react_on_rails` gem:
|
|
206
99
|
|
|
207
|
-
|
|
100
|
+
```bash
|
|
101
|
+
$ bundle install
|
|
208
102
|
```
|
|
209
|
-
bundle exec rails webpacker:install
|
|
210
|
-
bundle exec rails webpacker:install:react
|
|
211
103
|
|
|
212
|
-
|
|
104
|
+
4. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
|
|
213
105
|
|
|
214
|
-
|
|
106
|
+
5. Run the generator:
|
|
215
107
|
|
|
216
|
-
|
|
108
|
+
```bash
|
|
109
|
+
$ rails generate react_on_rails:install
|
|
110
|
+
```
|
|
217
111
|
|
|
218
|
-
|
|
219
|
-
rails generate react_on_rails:install --help
|
|
220
|
-
```
|
|
112
|
+
6. Start the app:
|
|
221
113
|
|
|
222
|
-
|
|
114
|
+
```bash
|
|
115
|
+
$ rails s
|
|
116
|
+
```
|
|
223
117
|
|
|
224
|
-
|
|
225
|
-
rails generate react_on_rails:install
|
|
226
|
-
```
|
|
118
|
+
7. Visit http://localhost:3000/hello_world.
|
|
227
119
|
|
|
228
|
-
|
|
120
|
+
|
|
121
|
+
### Turning on server rendering
|
|
229
122
|
|
|
230
|
-
|
|
123
|
+
With the code from running the React on Rails generator above:
|
|
231
124
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
```
|
|
125
|
+
1. Edit `app/views/hello_world/index.html.erb` and set `prerender` to `true`.
|
|
126
|
+
2. Refresh the page.
|
|
235
127
|
|
|
236
|
-
|
|
128
|
+
Below is the line where you turn server rendering on by setting `prerender` to true:
|
|
237
129
|
|
|
238
|
-
|
|
130
|
+
```erb
|
|
131
|
+
<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>
|
|
132
|
+
```
|
|
239
133
|
|
|
240
|
-
|
|
134
|
+
## Basic Usage
|
|
241
135
|
|
|
242
|
-
###
|
|
136
|
+
### Configuration
|
|
243
137
|
|
|
244
|
-
Configure
|
|
138
|
+
* 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.
|
|
139
|
+
* 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
|
|
140
|
+
* Set `compile: false` for all envs
|
|
141
|
+
* Your `public_output_path` must match your Webpack configuration for `output` of your bundles.
|
|
142
|
+
* Only set `cache_manifest` to `true` in your production env.
|
|
245
143
|
|
|
246
|
-
|
|
144
|
+
## Including your React Component on your Rails Views
|
|
247
145
|
|
|
248
|
-
|
|
146
|
+
- React component are rendered via your Rails Views. Here's an ERB sample:
|
|
249
147
|
|
|
250
148
|
```erb
|
|
251
149
|
<%= react_component("HelloWorld", props: @some_props) %>
|
|
252
150
|
```
|
|
253
|
-
|
|
151
|
+
|
|
152
|
+
- **Server-Side Rendering**: Your react component is first rendered into HTML on the server. Use the **prerender** option:
|
|
254
153
|
|
|
255
154
|
```erb
|
|
256
155
|
<%= react_component("HelloWorld", props: @some_props, prerender: true) %>
|
|
257
156
|
```
|
|
258
157
|
|
|
259
|
-
|
|
158
|
+
- 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
159
|
|
|
261
160
|
```js
|
|
262
161
|
import ReactOnRails from 'react-on-rails';
|
|
@@ -266,570 +165,155 @@ Configure the file `config/initializers/react_on_rails.rb`. You can adjust some
|
|
|
266
165
|
|
|
267
166
|
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
167
|
|
|
269
|
-
|
|
168
|
+
- `@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
169
|
|
|
271
170
|
```ruby
|
|
272
171
|
# Rails View
|
|
273
172
|
<%= react_component("HelloWorld", props: { name: "Stranger" }) %>
|
|
274
173
|
```
|
|
174
|
+
|
|
175
|
+
- 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 [Generator Functions and the RailsContext](docs/basics/generator-functions-and-railscontext.md) for more details on this topic.
|
|
176
|
+
|
|
177
|
+
```js
|
|
178
|
+
import React from 'react';
|
|
179
|
+
|
|
180
|
+
export default (props, railsContext) => {
|
|
181
|
+
return (
|
|
182
|
+
<div>
|
|
183
|
+
Your locale is {railsContext.i18nLocale}.<br/>
|
|
184
|
+
Hello, {props.name}!
|
|
185
|
+
</div>
|
|
186
|
+
);
|
|
187
|
+
};
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
See the [View Helpers API](./docs/api/view-helpers-api.md) for more details on `react_component` and its sibling function `react_component_hash`.
|
|
275
191
|
|
|
276
|
-
|
|
277
|
-
// inside your React component
|
|
278
|
-
this.props.name // "Stranger"
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
### I18n
|
|
282
|
-
|
|
283
|
-
You can enable the i18n functionality with [react-intl](https://github.com/yahoo/react-intl).
|
|
284
|
-
|
|
285
|
-
React on Rails provides an option for automatic conversions of Rails `*.yml` locale files into `*.js` files for `react-intl`.
|
|
286
|
-
|
|
287
|
-
See the [How to add I18n](docs/basics/i18n.md) for a summary of adding I18n.
|
|
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
|
-
#### react_component_hash for Generator Functions
|
|
361
|
-
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`.
|
|
362
|
-
|
|
363
|
-
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:
|
|
364
|
-
|
|
365
|
-
```js
|
|
366
|
-
{ renderedHtml: { componentHtml, customKey1, customKey2} }
|
|
367
|
-
```
|
|
368
|
-
|
|
369
|
-
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).
|
|
370
|
-
|
|
371
|
-
### Rails Context and Generator Functions
|
|
372
|
-
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:
|
|
373
|
-
|
|
374
|
-
1. `props`: Props that you pass in the view helper of either `react_component` or `redux_store`
|
|
375
|
-
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).
|
|
376
|
-
|
|
377
|
-
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.
|
|
378
|
-
|
|
379
|
-
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.
|
|
380
|
-
|
|
381
|
-
For example, suppose you create a "generator function" called MyAppComponent.
|
|
382
|
-
|
|
383
|
-
```js
|
|
384
|
-
import React from 'react';
|
|
385
|
-
const MyAppComponent = (props, railsContext) => (
|
|
386
|
-
<div>
|
|
387
|
-
<p>props are: {JSON.stringify(props)}</p>
|
|
388
|
-
<p>railsContext is: {JSON.stringify(railsContext)}
|
|
389
|
-
</p>
|
|
390
|
-
</div>
|
|
391
|
-
);
|
|
392
|
-
export default MyAppComponent;
|
|
393
|
-
```
|
|
394
|
-
|
|
395
|
-
*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.*
|
|
396
|
-
|
|
397
|
-
So if you register your generator function `MyAppComponent`, it will get called like:
|
|
398
|
-
|
|
399
|
-
```js
|
|
400
|
-
reactComponent = MyAppComponent(props, railsContext);
|
|
401
|
-
```
|
|
402
|
-
|
|
403
|
-
and, similarly, any redux store always initialized with 2 parameters:
|
|
404
|
-
|
|
405
|
-
```js
|
|
406
|
-
reduxStore = MyReduxStore(props, railsContext);
|
|
407
|
-
```
|
|
408
|
-
|
|
409
|
-
Note: you never make these calls. React on Rails makes these calls when it does either client or server rendering. You will define functions that take these 2 params and return a React component or a Redux Store. Naturally, you do not have to use second parameter of the railsContext if you do not need it.
|
|
192
|
+
## Fragment Caching
|
|
410
193
|
|
|
411
|
-
|
|
194
|
+
Fragment caching is a [React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki) 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:
|
|
412
195
|
|
|
413
|
-
The `
|
|
196
|
+
1. The `cache_key` takes the same parameters as any Rails `cache` view helper.
|
|
197
|
+
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`:
|
|
414
198
|
|
|
415
199
|
```ruby
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
href: request.original_url,
|
|
420
|
-
location: "#{uri.path}#{uri.query.present? ? "?#{uri.query}": ""}",
|
|
421
|
-
scheme: uri.scheme, # http
|
|
422
|
-
host: uri.host, # foo.com
|
|
423
|
-
port: uri.port,
|
|
424
|
-
pathname: uri.path, # /posts
|
|
425
|
-
search: uri.query, # id=30&limit=5
|
|
426
|
-
|
|
427
|
-
# Other
|
|
428
|
-
serverSide: boolean # Are we being called on the server or client? Note: if you conditionally
|
|
429
|
-
# render something different on the server than the client, then React will only show the
|
|
430
|
-
# server version!
|
|
431
|
-
}
|
|
432
|
-
```
|
|
433
|
-
|
|
434
|
-
#### Why the railsContext is only passed to generator functions
|
|
435
|
-
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:
|
|
436
|
-
|
|
437
|
-
```js
|
|
438
|
-
import React from 'react';
|
|
439
|
-
import AppComponent from './AppComponent';
|
|
440
|
-
const AppComponentWithRailsContext = (props, railsContext) => (
|
|
441
|
-
<AppComponent {...{...props, railsContext}}/>
|
|
442
|
-
)
|
|
443
|
-
export default AppComponentWithRailsContext;
|
|
444
|
-
```
|
|
445
|
-
|
|
446
|
-
Consider this line in depth:
|
|
447
|
-
|
|
448
|
-
```js
|
|
449
|
-
<AppComponent {...{ ...props, railsContext }}/>
|
|
200
|
+
<%= cached_react_component("App", cache_key: [@user, @post], prerender: true) do
|
|
201
|
+
some_slow_method_that_returns_props
|
|
202
|
+
end %>
|
|
450
203
|
```
|
|
451
204
|
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
#### Use Cases
|
|
455
|
-
##### Heroku Preboot Considerations
|
|
456
|
-
[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.
|
|
457
|
-
|
|
458
|
-
##### Needing the current URL path for server rendering
|
|
459
|
-
Suppose you want to display a nav bar with the current navigation link highlighted by the URL. When you server-render the code, your code will need to know the current URL/path. The new `railsContext` has this information. Your application will apply something like an "active" class on the server rendering.
|
|
460
|
-
|
|
461
|
-
##### Configuring different code for server side rendering
|
|
462
|
-
Suppose you want to turn off animation when doing server side rendering. The `serverSide` value is just what you need.
|
|
463
|
-
|
|
464
|
-
#### Customization of the rails_context
|
|
465
|
-
You can customize the values passed in the `railsContext` in your `config/initializers/react_on_rails.rb`. Here's how.
|
|
205
|
+
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:
|
|
466
206
|
|
|
467
|
-
|
|
207
|
+
1. Database calls to compute the props.
|
|
208
|
+
2. Serialization the props values hash into a JSON string for evaluating JavaScript to server render.
|
|
209
|
+
3. Costs associated with evaluating JavaScript from your Ruby code.
|
|
210
|
+
4. Creating the HTML string containing the props and the server-rendered JavaScript code.
|
|
468
211
|
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
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.
|
|
212
|
+
Note, even without server rendering (without step 3 above), fragment caching is still effective.
|
|
213
|
+
|
|
214
|
+
## Integration with Node.js for Server Rendering
|
|
474
215
|
|
|
475
|
-
|
|
216
|
+
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://github.com/shakacode/react_on_rails/wiki).
|
|
476
217
|
|
|
477
|
-
|
|
478
|
-
module RenderingExtension
|
|
479
|
-
|
|
480
|
-
# Return a Hash that contains custom values from the view context that will get merged with
|
|
481
|
-
# the standard rails_context values and passed to all calls to generator functions used by the
|
|
482
|
-
# react_component and redux_store view helpers
|
|
483
|
-
def self.custom_context(view_context)
|
|
484
|
-
{
|
|
485
|
-
somethingUseful: view_context.session[:something_useful]
|
|
486
|
-
}
|
|
487
|
-
end
|
|
488
|
-
end
|
|
489
|
-
```
|
|
218
|
+
## Globally Exposing Your React Components
|
|
490
219
|
|
|
491
|
-
|
|
220
|
+
For the React on Rails view helper `react_component` to use your React components, you will have to **register** them in your JavaScript code.
|
|
492
221
|
|
|
493
|
-
|
|
494
|
-
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**.
|
|
222
|
+
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**.
|
|
495
223
|
|
|
496
224
|
This is how to expose a component to the `react_component` view helper.
|
|
497
225
|
|
|
498
|
-
|
|
226
|
+
```javascript
|
|
499
227
|
// app/javascript/packs/hello-world-bundle.js
|
|
500
228
|
import HelloWorld from '../components/HelloWorld';
|
|
501
229
|
import ReactOnRails from 'react-on-rails';
|
|
502
230
|
ReactOnRails.register({ HelloWorld });
|
|
503
|
-
```
|
|
504
|
-
|
|
505
|
-
#### Different Server-Side Rendering Code (and a Server Specific Bundle)
|
|
506
|
-
|
|
507
|
-
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.
|
|
508
|
-
|
|
509
|
-
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.
|
|
510
|
-
|
|
511
|
-
#### Renderer Functions
|
|
512
|
-
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).
|
|
513
|
-
|
|
514
|
-
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.
|
|
515
|
-
|
|
516
|
-
## ReactOnRails View Helpers API
|
|
517
|
-
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`.
|
|
518
|
-
|
|
519
|
-
### react_component
|
|
520
|
-
```ruby
|
|
521
|
-
react_component(component_name,
|
|
522
|
-
props: {},
|
|
523
|
-
prerender: nil,
|
|
524
|
-
trace: nil,
|
|
525
|
-
replay_console: nil,
|
|
526
|
-
raise_on_prerender_error: nil,
|
|
527
|
-
id: nil,
|
|
528
|
-
html_options: {})
|
|
529
|
-
```
|
|
530
|
-
|
|
531
|
-
+ **component_name:** Can be a React component, created using an ES6 class or a generator function that returns a React component (or, only on the server side, an object with shape { redirectLocation, error, renderedHtml }), or a "renderer function" that manually renders a React component to the dom (client side only).
|
|
532
|
-
All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](./docs/basics/configuration.md).
|
|
533
|
-
|
|
534
|
-
+ **general options:**
|
|
535
|
-
+ **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.
|
|
536
|
-
+ **prerender:** enable server-side rendering of a component. Set to false when debugging!
|
|
537
|
-
+ **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.
|
|
538
|
-
+ **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`.
|
|
539
|
-
+ **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.
|
|
540
|
-
+ **options if prerender (server rendering) is true:**
|
|
541
|
-
+ **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.
|
|
542
|
-
+ **logging_on_server:** Default is true. True will log JS console messages and errors to the server.
|
|
543
|
-
+ **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.
|
|
544
|
-
|
|
545
|
-
Note: client hydration will not trigger for components rendered through XHR. You will have to handle it with javascript.
|
|
546
|
-
For an example, see [spec/dummy/app/views/pages/xhr_refresh.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/pages/xhr_refresh.rb).
|
|
547
|
-
|
|
548
|
-
### react_component_hash
|
|
549
|
-
`react_component_hash` is used to return multiple HTML strings for server rendering, such as for
|
|
550
|
-
adding meta-tags to a page. It is exactly like react_component except for the following:
|
|
551
|
-
|
|
552
|
-
1. `prerender: true` is automatically added to options, as this method doesn't make sense for
|
|
553
|
-
client only rendering.
|
|
554
|
-
2. Your JavaScript for server rendering must return an Object for the key `server_rendered_html`.
|
|
555
|
-
3. Your view code must expect an object and not a string.
|
|
556
|
-
|
|
557
|
-
Here is an example of ERB view code:
|
|
558
|
-
|
|
559
|
-
```erb
|
|
560
|
-
<% react_helmet_app = react_component_hash("ReactHelmetApp", prerender: true,
|
|
561
|
-
props: { helloWorldData: { name: "Mr. Server Side Rendering"}},
|
|
562
|
-
id: "react-helmet-0", trace: true) %>
|
|
563
|
-
<% content_for :title do %>
|
|
564
|
-
<%= react_helmet_app['title'] %>
|
|
565
|
-
<% end %>
|
|
566
|
-
<%= react_helmet_app["componentHtml"] %>
|
|
567
|
-
```
|
|
568
|
-
|
|
569
|
-
And here is the JavaScript code:
|
|
570
|
-
|
|
571
|
-
```js
|
|
572
|
-
export default (props, _railsContext) => {
|
|
573
|
-
const componentHtml = renderToString(<ReactHelmet {...props} />);
|
|
574
|
-
const helmet = Helmet.renderStatic();
|
|
575
|
-
|
|
576
|
-
const renderedHtml = {
|
|
577
|
-
componentHtml,
|
|
578
|
-
title: helmet.title.toString(),
|
|
579
|
-
};
|
|
580
|
-
return { renderedHtml };
|
|
581
|
-
};
|
|
582
|
-
|
|
583
|
-
```
|
|
584
|
-
|
|
585
|
-
### redux_store
|
|
586
|
-
#### Controller Extension
|
|
587
|
-
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:
|
|
588
|
-
|
|
589
|
-
`redux_store(store_name, props: {})`
|
|
590
|
-
|
|
591
|
-
+ **store_name:** A name for the store. You'll refer to this name in 2 places in your JavaScript:
|
|
592
|
-
1. You'll call `ReactOnRails.registerStore({storeName})` in the same place that you register your components.
|
|
593
|
-
2. In your component definition, you'll call `ReactOnRails.getStore('storeName')` to get the hydrated Redux store to attach to your components.
|
|
594
|
-
+ **props:** Named parameter `props`. ReactOnRails takes care of setting up the hydration of your store with props from the view.
|
|
595
|
-
|
|
596
|
-
For an example, see [spec/dummy/app/controllers/pages_controller.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/controllers/pages_controller.rb). Note: this is preferable to using the equivalent view_helper `redux_store` in that you can be assured that the store is initialized before your components.
|
|
597
|
-
|
|
598
|
-
#### View Helper
|
|
599
|
-
`redux_store(store_name, props: {})`
|
|
600
|
-
|
|
601
|
-
This method has the same API as the controller extension. **HOWEVER**, we recommend the controller extension instead because the Rails executes the template code in the controller action's view file (`erb`, `haml`, `slim`, etc.) before the layout. So long as you call `redux_store` at the beginning of your action's view file, this will work. However, it's an easy mistake to put this call in the wrong place. Calling `redux_store` in the controller action ensures proper load order, regardless of where you call this in the controller action. Note: you won't know of this subtle ordering issue until you server render and you find that your store is not hydrated properly.
|
|
602
|
-
|
|
603
|
-
`redux_store_hydration_data`
|
|
604
|
-
|
|
605
|
-
Place this view helper (no parameters) at the end of your shared layout so ReactOnRails will render the redux store hydration data. Since we're going to be setting up the stores in the controllers, we need to know where on the view to put the client-side rendering of this hydration data, which is a hidden div with a matching class that contains a data props. For an example, see [spec/dummy/app/views/layouts/application.html.erb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb).
|
|
606
|
-
|
|
607
|
-
#### Redux Store Notes
|
|
608
|
-
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:
|
|
609
|
-
|
|
610
|
-
1. You want to have multiple React components accessing the same store at once.
|
|
611
|
-
2. You want to place the props to hydrate the client side stores at the very end of your HTML so that the browser can render all earlier HTML first. This is particularly useful if your props will be large.
|
|
612
|
-
|
|
613
|
-
### server_render_js
|
|
614
|
-
`server_render_js(js_expression, options = {})`
|
|
615
|
-
|
|
616
|
-
+ js_expression, like 2 + 3, and not a block of js code. If you have more than one line that needs to be executed, wrap it in an [IIFE](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression). JS exceptions will be caught, and console messages will be handled properly
|
|
617
|
-
+ Currently, the only option you may pass is `replay_console` (boolean)
|
|
618
|
-
|
|
619
|
-
This is a helper method that takes any JavaScript expression and returns the output from evaluating it. If you have more than one line that needs to be executed, wrap it in an IIFE. JS exceptions will be caught and console messages handled properly.
|
|
620
|
-
|
|
621
|
-
## Multiple React Components on a Page with One Store
|
|
622
|
-
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.
|
|
623
|
-
|
|
624
|
-
Suppose the Redux store is called `appStore`, and you have 3 React components that each needs to connect to a store: `NavbarApp`, `CommentsApp`, and `BlogsApp`. I named them with `App` to indicate that they are the registered components.
|
|
625
|
-
|
|
626
|
-
You will need to make a function that can create the store you will be using for all components and register it via the `registerStore` method. Note: this is a **storeCreator**, meaning that it is a function that takes (props, location) and returns a store:
|
|
627
|
-
|
|
628
|
-
```js
|
|
629
|
-
function appStore(props, railsContext) {
|
|
630
|
-
// Create a hydrated redux store, using props and the railsContext (object with
|
|
631
|
-
// Rails contextual information).
|
|
632
|
-
return myAppStore;
|
|
633
|
-
}
|
|
634
|
-
|
|
635
|
-
ReactOnRails.registerStore({
|
|
636
|
-
appStore
|
|
637
|
-
});
|
|
638
231
|
```
|
|
639
232
|
|
|
640
|
-
|
|
233
|
+
#### Different Server-Side Rendering Code (and a Server-Specific Bundle)
|
|
641
234
|
|
|
642
|
-
|
|
643
|
-
// getStore will initialize the store if not already initialized, so creates or retrieves store
|
|
644
|
-
const appStore = ReactOnRails.getStore("appStore");
|
|
645
|
-
return (
|
|
646
|
-
<Provider store={appStore}>
|
|
647
|
-
<CommentsApp />
|
|
648
|
-
</Provider>
|
|
649
|
-
);
|
|
650
|
-
```
|
|
235
|
+
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, checking if `window` is defined has a similar effect.
|
|
651
236
|
|
|
652
|
-
|
|
237
|
+
If you want different code to run, you will set up a separate webpack compilation file and you will specify a different, server side entry file. ex. 'serverHelloWorld.jsx'. Note: you might be initializing HelloWorld with version specialized for server rendering.
|
|
653
238
|
|
|
654
|
-
|
|
655
|
-
```erb
|
|
656
|
-
...
|
|
657
|
-
<%= redux_store("appStore", props: @react_props) %>;
|
|
658
|
-
<%= react_component("NavbarApp") %>
|
|
659
|
-
yield
|
|
660
|
-
...
|
|
661
|
-
```
|
|
239
|
+
## Specifying Your React Components: Direct or Generator Functions
|
|
662
240
|
|
|
663
|
-
|
|
241
|
+
You have two 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:
|
|
664
242
|
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
```
|
|
669
|
-
|
|
670
|
-
**_blogs.html.erb**
|
|
671
|
-
```erb
|
|
672
|
-
<%= react_component("BlogsApp") %>
|
|
673
|
-
```
|
|
243
|
+
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`.
|
|
244
|
+
2. You can use the passed-in props to initialize a redux store or set up react-router.
|
|
245
|
+
3. You can return different components depending on what's in the props.
|
|
674
246
|
|
|
675
|
-
|
|
247
|
+
ReactOnRails will automatically detect a registered generator function. Thus, there is no difference between registering a React Component versus a "generator function."
|
|
676
248
|
|
|
677
|
-
##
|
|
678
|
-
See [ReactOnRails JavaScript API](docs/api/javascript-api.md).
|
|
249
|
+
## react_component_hash for Generator Functions
|
|
679
250
|
|
|
680
|
-
|
|
251
|
+
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`.
|
|
681
252
|
|
|
682
|
-
|
|
253
|
+
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:
|
|
683
254
|
|
|
684
255
|
```js
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
// reads from DOM csrf token generated by Rails in <%= csrf_meta_tags %>
|
|
688
|
-
csrfToken = ReactOnRails.authenticityToken();
|
|
689
|
-
|
|
690
|
-
// compose Rails specific request header as following { X-CSRF-Token: csrfToken, X-Requested-With: XMLHttpRequest }
|
|
691
|
-
header = ReactOnRails.authenticityHeaders(otherHeader);
|
|
256
|
+
{ renderedHtml: { componentHtml, customKey1, customKey2} }
|
|
692
257
|
```
|
|
693
258
|
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
## React Router
|
|
697
|
-
[React Router](https://github.com/reactjs/react-router) is supported, including server-side rendering! See:
|
|
698
|
-
|
|
699
|
-
1. [React on Rails docs for react-router](./docs/additional-reading/react-router.md)
|
|
700
|
-
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).
|
|
701
|
-
1. [Code Splitting docs](./docs/additional-reading/code-splitting.md) for information about how to set up code splitting for server rendered routes.
|
|
259
|
+
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).
|
|
702
260
|
|
|
703
261
|
## Error Handling
|
|
262
|
+
|
|
704
263
|
* All errors from ReactOnRails will be of type ReactOnRails::Error.
|
|
705
264
|
* Prerendering (server rendering) errors get context information for HoneyBadger and Sentry for easier debugging.
|
|
706
265
|
|
|
707
|
-
##
|
|
708
|
-
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.
|
|
266
|
+
## I18n
|
|
709
267
|
|
|
710
|
-
|
|
711
|
-
* 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).
|
|
712
|
-
* `build_production_command`: Set to nil to turn off the precompilation of the js assets.
|
|
713
|
-
* `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.
|
|
714
|
-
* See the [Heroku Deployment](./docs/additional-reading/heroku-deployment.md) doc for specifics regarding Heroku. The information here should apply to other deployments.
|
|
268
|
+
You can enable the i18n functionality with [react-intl](https://github.com/yahoo/react-intl). React on Rails provides an option for automatic conversions of Rails `*.yml` locale files into `*.js` files for `react-intl`. See the [How to add I18n](docs/basics/i18n.md) for a summary of adding I18n.
|
|
715
269
|
|
|
716
|
-
##
|
|
270
|
+
## More Details
|
|
717
271
|
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
## Additional Documentation
|
|
721
|
-
**Try out our [Documentation Gitbook](https://shakacode.gitbooks.io/react-on-rails/content/) for improved readability & reference.**
|
|
722
|
-
|
|
723
|
-
+ **Rails**
|
|
724
|
-
+ [Rails Assets](./docs/additional-reading/rails-assets.md)
|
|
725
|
-
+ [Rails Engine Integration](./docs/additional-reading/rails-engine-integration.md)
|
|
726
|
-
+ [Rails View Rendering from Inline JavaScript](./docs/additional-reading/rails_view_rendering_from_inline_javascript.md)
|
|
727
|
-
+ [RSpec Configuration](./docs/additional-reading/rspec-configuration.md)
|
|
728
|
-
+ [Turbolinks](./docs/additional-reading/turbolinks.md)
|
|
729
|
-
|
|
730
|
-
+ **Javascript**
|
|
731
|
-
+ [Node Dependencies, NPM, and Yarn](./docs/additional-reading/node-dependencies-and-npm.md)
|
|
732
|
-
+ [Babel](./docs/additional-reading/babel.md)
|
|
733
|
-
+ [React Router](./docs/additional-reading/react-router.md)
|
|
734
|
-
+ [React & Redux](./docs/additional-reading/react-and-redux.md)
|
|
735
|
-
+ [Webpack](./docs/additional-reading/webpack.md)
|
|
736
|
-
+ [Webpack Configuration](./docs/additional-reading/webpack.md)
|
|
737
|
-
+ [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html)
|
|
738
|
-
+ [Developing with the Webpack Dev Server](docs/additional-reading/webpack-dev-server.md)
|
|
739
|
-
+ [Node Server Rendering](./docs/additional-reading/node-server-rendering.md)
|
|
740
|
-
+ [Server Rendering Tips](./docs/additional-reading/server-rendering-tips.md)
|
|
741
|
-
+ [Code Splitting](./docs/additional-reading/code-splitting.md)
|
|
742
|
-
+ [AngularJS Integration and Migration to React on Rails](./docs/additional-reading/angular-js-integration-migration.md)
|
|
743
|
-
+ [Webpack, the Asset Pipeline, and Using Assets w/ React](./docs/additional-reading/rails-assets-relative-paths.md)
|
|
744
|
-
|
|
745
|
-
+ **Development**
|
|
746
|
-
+ [React on Rails Basic Installation Tutorial](./docs/tutorial.md) ([live demo](https://hello-react-on-rails.herokuapp.com))
|
|
747
|
-
+ [Installation Overview](./docs/basics/installation-overview.md)
|
|
748
|
-
+ [Configuration](./docs/basics/configuration.md)
|
|
749
|
-
+ [Migration from react-rails](./docs/basics/migrating-from-react-rails.md)
|
|
750
|
-
+ [Recommended Project Structure](./docs/additional-reading/recommended-project-structure.md)
|
|
751
|
-
+ [Generator Tips](./docs/basics/generator.md)
|
|
752
|
-
+ [Hot Reloading of Assets For Rails Development](./docs/additional-reading/hot-reloading-rails-development.md)
|
|
753
|
-
+ [Heroku Deployment](./docs/additional-reading/heroku-deployment.md)
|
|
754
|
-
+ [Updating Dependencies](./docs/additional-reading/updating-dependencies.md)
|
|
755
|
-
+ [Caching and Performance](./docs/additional-reading/caching-and-performance.md)
|
|
756
|
-
|
|
757
|
-
+ **API**
|
|
758
|
-
+ [JavaScript API](./docs/api/javascript-api.md)
|
|
759
|
-
+ [Ruby API](./docs/api/ruby-api.md)
|
|
760
|
-
+ [Setting up Hot Reloading during Rails Development, API docs](./docs/api/ruby-api-hot-reload-view-helpers.md)
|
|
761
|
-
|
|
762
|
-
+ **Misc**
|
|
763
|
-
+ [Upgrading](./docs/basics/upgrading-react-on-rails.md)
|
|
764
|
-
+ [Tips](./docs/additional-reading/tips.md)
|
|
765
|
-
+ [Changelog](./CHANGELOG.md)
|
|
766
|
-
+ [Projects](./PROJECTS.md)
|
|
767
|
-
+ [Shaka Code Style](./docs/coding-style/style.md)
|
|
768
|
-
+ [React on Rails, Slides](http://www.slideshare.net/justingordon/react-on-rails-v61)
|
|
769
|
-
+ [Code of Conduct](./docs/misc/code_of_conduct.md)
|
|
770
|
-
+ [The React on Rails Doctrine](https://medium.com/@railsonmaui/the-react-on-rails-doctrine-3c59a778c724)
|
|
771
|
-
+ [React on Rails, 2000+ 🌟 Stars](https://medium.com/shakacode/react-on-rails-2000-stars-32ff5cfacfbf#.6gmfb2gpy)
|
|
772
|
-
+ [Generator Testing](./docs/contributor-info/generator-testing.md)
|
|
773
|
-
+ [Linting](./docs/contributor-info/linters.md)
|
|
774
|
-
+ [Releasing](./docs/contributor-info/releasing.md)
|
|
775
|
-
+ **[CONTRIBUTING](CONTRIBUTING.md)**
|
|
776
|
-
|
|
777
|
-
## Demos
|
|
778
|
-
+ [www.reactrails.com](http://www.reactrails.com) with the source at [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/).
|
|
779
|
-
+ [spec app](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy): Great simple examples used for our tests.
|
|
780
|
-
```
|
|
781
|
-
cd spec/dummy
|
|
782
|
-
bundle && yarn
|
|
783
|
-
foreman start
|
|
784
|
-
```
|
|
785
|
-
|
|
786
|
-
## Dependencies
|
|
787
|
-
+ Ruby 2.1 or greater
|
|
788
|
-
+ Rails 3.2 or greater
|
|
789
|
-
+ Node 5.5 or greater
|
|
790
|
-
|
|
791
|
-
## Contributing
|
|
792
|
-
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)).
|
|
272
|
+
Browse the links in the [Summary Table of Contents](./SUMMARY.md)
|
|
793
273
|
|
|
794
|
-
|
|
274
|
+
Here are some highly recommended next articles to read:
|
|
795
275
|
|
|
796
|
-
|
|
797
|
-
|
|
276
|
+
1. [How React on Rails Works](./docs/basics/how-react-on-rails-works.md)
|
|
277
|
+
1. [Recommended Project Structure](./docs/basics/recommended-project-structure.md)
|
|
278
|
+
1. [Webpack Configuration](./docs/basics/webpack-configuration.md)
|
|
279
|
+
1. [View Helpers API](./docs/view-helpers-api.md)
|
|
280
|
+
1. [Caching and Performance: React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
|
|
281
|
+
1. [Deployment](docs/basics/deployment.md).
|
|
798
282
|
|
|
799
|
-
|
|
800
|
-
[The Shaka Code team!](http://www.shakacode.com/about/)
|
|
283
|
+
# Support
|
|
801
284
|
|
|
802
|
-
|
|
285
|
+
## ShakaCode Support
|
|
803
286
|
|
|
804
|
-
|
|
287
|
+
Aloha, I'm Justin Gordon the creator and maintainer of React on Rails. I'm supporting my continued dedication to this project by project by offering a React on Rails **Pro Support Plan**. Please [email me](mailto:justin@shakacode.com) to see if I can help you.
|
|
805
288
|
|
|
806
|
-
|
|
289
|
+
## Community Resources
|
|
807
290
|
|
|
808
|
-
|
|
809
|
-
The following companies support open source, and ShakaCode uses their products!
|
|
291
|
+
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.
|
|
810
292
|
|
|
811
|
-
|
|
812
|
-
* [](https://www.browserstack.com)
|
|
293
|
+
[](https://app.mailerlite.com/webforms/landing/l1d9x5)
|
|
813
294
|
|
|
814
|
-
|
|
295
|
+
- **Slack Room**: [Contact us](mailto:contact@shakacode.com) for an invite to the ShakaCode Slack room! Let us know if you want to contribute.
|
|
296
|
+
- **[forum.shakacode.com](https://forum.shakacode.com)**: Post your questions
|
|
297
|
+
- **[@railsonmaui on Twitter](https://twitter.com/railsonmaui)**
|
|
298
|
+
- 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).
|
|
299
|
+
- 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.
|
|
300
|
+
- *See [NEWS.md](NEWS.md) for more notes over time.*
|
|
815
301
|
|
|
816
|
-
|
|
302
|
+
## Contributing
|
|
817
303
|
|
|
818
|
-
|
|
304
|
+
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).
|
|
819
305
|
|
|
820
|
-
|
|
306
|
+
# Supporters
|
|
821
307
|
|
|
822
|
-
|
|
308
|
+
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), and we use [BrowserStack](https://www.browserstack.com) to solve problems with oddball browsers.
|
|
823
309
|
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
* 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).
|
|
827
|
-
* Augmenting your team to get your product completed more efficiently and quickly.
|
|
310
|
+
[](https://scoutapp.com/)
|
|
311
|
+
[](https://www.browserstack.com)
|
|
828
312
|
|
|
829
|
-
|
|
313
|
+
*If you'd like to support React on Rails and have your company listed here, [get in touch](mailto:justin@shakacode.com).*
|
|
830
314
|
|
|
831
|
-
|
|
315
|
+
Aloha and best wishes from Justin and the ShakaCode team!
|
|
832
316
|
|
|
833
|
-
|
|
317
|
+
# License
|
|
834
318
|
|
|
835
|
-
|
|
319
|
+
The gem is available as open source under the terms of the [MIT License](LICENSE.md).
|