react_on_rails 13.4.0 → 14.0.0

data/docs/guides/webpack-configuration.md

@@ -1,42 +0,0 @@
-# Webpack Configuration: custom setup for Webpack or Shakapacker?
-
-## Webpack vs. Shakapacker
-
-[Webpack](https://webpack.js.org) is the JavaScript npm package that prepares all your client-side assets. The Rails asset pipeline used to be the preferable way to prepare client-side assets.
-
-[Shakapacker](https://github.com/shakcode/shakapacker) (the official successor of [rails/webpacker](https://github.com/rails/webpacker)) is the Ruby gem that mainly gives us 2 things:
-
-1. View helpers for placing the webpack bundles on your Rails views. React on Rails depends on these view helpers.
-2. A layer of abstraction on top of Webpack customization. The base setup works great for the client side webpack configuration.
-
-To get a deeper understanding of Shakapacker, watch [RailsConf 2020 CE - Webpacker, It-Just-Works, But How? by Justin Gordon](https://youtu.be/sJLoOpc5LD8).
-
-Per the example repo [shakacode/react_on_rails_demo_ssr_hmr](https://github.com/shakacode/react_on_rails_demo_ssr_hmr),
-you should consider keeping your codebase mostly consistent with the defaults for [Shakapacker](https://github.com/shakacode/shakapacker).
-
-# React on Rails
-
-Version 9 of React on Rails added support for the Shakapacker (`rails/webpacker` of that time) view helpers so that Webpack produced assets would no longer pass through the Rails asset pipeline. As part of this change, React on Rails added a configuration option to support customization of the node_modules directory. This allowed React on Rails to support the Shakapacker configuration of the Webpack configuration.
-
-A key decision in your use React on Rails is whether you go with the Shakapacker default setup or the traditional React on Rails setup of putting all your client side files under the `/client` directory. While there are technically 2 independent choices involved, the directory structure and the mechanism of Webpack configuration, for simplicity sake we'll assume that these choices go together.
-
-## Option 1: Default Generator Setup: Shakapacker app/javascript
-
-Typical Shakapacker apps have a standard directory structure as documented [here](https://github.com/shakacode/shakapacker/blob/master/README.md#configuration-and-code). If you follow the steps in the the [basic tutorial](https://www.shakacode.com/react-on-rails/docs/guides/tutorial/), you will see this pattern in action. In order to customize the Webpack configuration, you need to consult with the [webpack configuration](https://www.shakacode.com/react-on-rails/docs/javascript/webpack/).
-
-The *advantage* of using Shakapacker to configure Webpack is that there is very little code needed to get started and you don't need to understand really anything about webpack customization.
-
-## Option 2: Traditional React on Rails using the /client directory
-
-Until version 9, all React on Rails apps used the `/client` directory for configuring React on Rails in terms of the configuration of Webpack and location of your JavaScript and webpack files, including the `node_modules` directory. Version 9 changed the default to `/` for the `node_modules` location using this value in `config/initializers/react_on_rails.rb`: `config.node_modules_location`.
-
-You can access values in the `config/shakapacker.yml`
-
-```js
-const { config, devServer } = require('shakapacker');
-```
-
-You will want consider using some of the same values set in these files:
-
-* https://github.com/shakacode/shakapacker/blob/master/package/environments/base.js
-* https://github.com/shakacode/shakapacker/blob/master/package/environments/development.js

data/docs/home.md

@@ -1,23 +0,0 @@
-# React on Rails
-
-## Details
-1. [Overview](https://www.shakacode.com/react-on-rails/docs/guides/react-on-rails-overview/)
-1. [Getting Started](https://www.shakacode.com/react-on-rails/docs/getting-started/)
-1. [How React on Rails Works](https://www.shakacode.com/react-on-rails/docs/guides/how-react-on-rails-works/)
-1. [Webpack Configuration](https://www.shakacode.com/react-on-rails/docs/guides/webpack-configuration/)
-1. [View Helpers API](https://www.shakacode.com/react-on-rails/docs/api/view-helpers-api/)
-1. [Caching and Performance: React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/).
-1. [Deployment](https://www.shakacode.com/react-on-rails/docs/guides/deployment/).
-
-## Changes and Upgrades
-1. [CHANGELOG.md](https://github.com/shakacode/react_on_rails/tree/master/CHANGELOG.md)
-2. [Upgrading React on Rails](https://www.shakacode.com/react-on-rails/docs/guides/upgrading-react-on-rails/#upgrading-to-v12).
-
-## Example Apps
-1. [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) example repo for a simple configuration of webpack via the `shakacode/shakapacker` gem
-that supports SSR.
-2. Example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr) for a new way to setup the creation of your SSR bundle with `shakacode/shakapacker`.
-3. Live, [open source](https://github.com/shakacode/react-webpack-rails-tutorial), example of this gem, see [reactrails.com](http://reactrails.com).
-
-# Other Resources
-1. RailsConf 2020 talk: [Webpacker, It-Just-Works, But How?](https://www.shakacode.com/blog/railsconf-2020-webpacker-it-just-works-but-how/)

data/docs/javascript/angular-js-integration-migration.md

@@ -1,28 +0,0 @@
-# AngularJS Integration and Migration to React on Rails
-
-[React on Rails](https://github.com/shakacode/react_on_rails) offers a smooth transition to migrating your existing [AngularJS](https://angularjs.org/) + Rails application to use React with Webpack on top of Rails. Here are a few highlights and tips.
-
-## Assets Handling
-Ideally, you should have your JavaScript libraries packaged by `webpack` and gathered by `yarn`. If you have not already done this, then you can setup the `ReactOnRails` default JS code directory of `/client` to load the JS libraries related to AngularJS, etc. You can configure Webpack to globally export these libraries, so inclusion this way will be no different than using the Rails asset pipeline. However, so long as you *understand* how your JavaScript will eventually make its way onto your main layout, you will be OK.
-
-## Styling and CSS Modules
-Once you move to Webpack, you can start using CSS modules. However, you'll need to carefully consider if your styling needs to apply to legacy AngularJS components in your app.
-
-## ngReact Package
-
-Check out the [ngReact](https://github.com/ngReact/ngReact) package. This package allows your AngularJS components to contain React components, including support for passing props from AngularJS to React. The [ShakaCode team](http://www.shakacode.com/about/) is using this library on a commercial project. However, we're doing this with some limitations:
-
-1. We're only having the data flow in one direction, from AngularJS to React and never back up to the Angular components.
-2. When we get to a case where the React components will affect the Angular layout, we try to convert the components up the tree to React.
-3. Thus, the React components within AngularJS components will tend to be React "dumb" components, or totally self-contained chunks of React that have no side effects on the Angular code.
-
-## StoryBook
-
-We love using [StoryBook](https://getstorybook.io/) to create a simple testing and inspection area of new React components as we migrate them over from AngularJS Components.
-
-## Overall Approach?
-
-The big question when doing the migration from AngularJS to React is whether you should replace leaf level components first, to minimize the changes before you can deploy your hybrid AngularJS and React app. The alternative is to try to replace larger chunks at once. Both approaches have pros and cons. 
-
-1. Frequent deploys with incremental parts of AngularJS replaced by React allows smaller incremental deploys and easier regression analysis should something break. On the negative side, any ping-pong of data between AngularJS and React can result in a complicated and convoluted architecture.
-2. Larger deploys of a full screen can yield efficiencies such as converting the whole screen to use one Redux store. However, this can be a large chunk of code to test and deploy.

data/docs/javascript/asset-pipeline.md

@@ -1,12 +0,0 @@
-# Asset Pipeline with React on Rails
-
-In general, you should not be mixing the asset pipeline with Shakapacker and React on Rails.
-
-If you're using React, then all of your CSS and images should be under either `/app/javascript` or
-`/client` or wherever you want your client-side application.
-
-If you are incrementally migrating a large application, your main concern will be how to minimize
-duplication of styles and images between your old application and the new one.
-
-Please email [justin@shakacode.com](mailto:justin@shakacode.com) if you would be interested in helping
-to migrate a larger application.

data/docs/javascript/capistrano-deployment.md

@@ -1,18 +0,0 @@
-# Capistrano Deployment
-Make sure ReactOnRails is working in development environment.
-
-Add the following to development your Gemfile and bundle install.
-``` ruby
-group :development do
-  gem 'capistrano-yarn'
-end
-```
-Then run Bundler to ensure Capistrano is downloaded and installed.
-``` sh
-$ bundle install
-```
-Add the following in your Capfile.
-``` ruby
-require 'capistrano/yarn'
-```
-If the deployment is taking too long or getting stuck at assets:precompile stage, it probably is because of memory. Webpack consumes a lot of memory so if possible, try increasing the RAM of your server.

data/docs/javascript/code-splitting.md

@@ -1,165 +0,0 @@
-# Code Splitting (Outdated)
-
-_Note: This document is outdated._ Please email [justin@shakacode.com](mailto:justin@shakacode.com)
-if you would be interested in help with code splitting using
-[loadable-components.com](https://loadable-components.com/docs) with React on Rails.
-
------
-
-What is code splitting? From the webpack documentation:
-
-> For big web apps it’s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into “chunks” which are loaded on demand. Some other bundlers call them “layers”, “rollups”, or “fragments”. This feature is called “code splitting”.
-
-## Server Rendering and Code Splitting
-
-Let's say you're requesting a page that needs to fetch a code chunk from the server before it's able to render. If you do all your rendering on the client side, you don't have to do anything special. However, if the page is rendered on the server, you'll find that React will spit out the following error:
-
-> Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
-
-> (client) <!-- react-empty: 1 -
-
-> (server) <div data-reactroot="
-<!--This comment is here because the comment beginning on line 13 messes up Sublime's markdown parsing-->
-
-Different markup is generated on the client than on the server. Why does this happen? When you register a component or Render-Function with `ReactOnRails.register`, react on rails will render the component as soon as the page loads. However, react-router renders a comment while waiting for the code chunk to be fetched from the server. This means that react will tear all of the server rendered code out of the DOM, and then rerender it a moment later once the code chunk arrives from the server, defeating most of the purpose of server rendering.
-
-### The solution
-
-To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a Render-Function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` or `ReactDOM.hydrate` to render the component to the DOM. React on rails will automatically detect when a Render-Function takes three arguments, and will **not** call `ReactDOM.render` or `ReactDOM.hydrate`, instead allowing you to control the initial render yourself. Note, you have to be careful to call `ReactDOM.hydrate` rather than `ReactDOM.render` if you are are server rendering.
-
-Here's an example of how you might use this in practice:
-
-#### page.html.erb
-```erb
-<%= react_component("NavigationApp", prerender: true) %>
-<%= react_component("RouterApp", prerender: true) %>
-<%= redux_store_hydration_data %>
-```
-
-#### clientRegistration.js
-```js
-import ReactOnRails from 'node_package/lib/ReactOnRails';
-import NavigationApp from './NavigationApp';
-
-// Note that we're importing a different RouterApp than in serverRegistration.js
-// Renderer functions should not be used on the server, because there is no DOM.
-import RouterApp from './RouterAppRenderer';
-import applicationStore from '../store/applicationStore';
-
-ReactOnRails.registerStore({applicationStore});
-ReactOnRails.register({
-  NavigationApp,
-  RouterApp,
-});
-```
-
-#### serverRegistration.js
-```js
-import ReactOnRails from 'react-on-rails';
-import NavigationApp from './NavigationApp';
-
-// Note that we're importing a different RouterApp than in clientRegistration.js
-import RouterApp from './RouterAppServer';
-import applicationStore from '../store/applicationStore';
-
-ReactOnRails.registerStore({applicationStore});
-ReactOnRails.register({
-  NavigationApp,
-  RouterApp,
-});
-```
-Note that you should not register a renderer on the server, since there won't be a domNodeId when we're server rendering. Note that the `RouterApp` imported by `serverRegistration.js` is from a different file. For an example of how to set up an app for server rendering, see the [react router docs](https://www.shakacode.com/react-on-rails/docs/javascript/react-router/).
-
-#### RouterAppRenderer.jsx
-```jsx
-import ReactOnRails from 'react-on-rails';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Router from 'react-router/lib/Router';
-import match from 'react-router/lib/match';
-import browserHistory from 'react-router/lib/browserHistory';
-import { Provider } from 'react-redux';
-
-import routes from '../routes/routes';
-
-// NOTE how this function takes 3 params, and is thus responsible for calling ReactDOM.render
-const RouterAppRenderer = (props, railsContext, domNodeId) => {
-  const store = ReactOnRails.getStore('applicationStore');
-  const history = browserHistory;
-
-  match({ history, routes }, (error, redirectionLocation, renderProps) => {
-    if (error) {
-      throw error;
-    }
-
-    const reactElement = (
-      <Provider store={store}>
-        <Router {...renderProps} />
-      </Provider>
-    );
-
-    ReactDOM.render(reactElement, document.getElementById(domNodeId));
-  });
-};
-
-export default RouterAppRenderer;
-```
-
-What's going on in this example is that we're putting the rendering code in the callback passed to `match`. The effect is that the client render doesn't happen until the code chunk gets fetched from the server, preventing the client/server checksum mismatch.
-
-The idea is that match from react-router is async; it fetches the component using the getComponent method that you provide with the route definition, and then passes the props to the callback that are needed to do the complete render. Then we do the first render inside of the callback, so that the first render is the same as the server render.
-
-The server render matches the deferred render because the server bundle is a single file, and so it doesn't need to wait for anything to be fetched.
-
-### Working Example
-
-There's an implemented example of code splitting in the `spec/dummy` folder of this repository.
-
-See:
-
-- [spec/dummy/client/app/startup/client-bundle.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/client-bundle.js)
-- [spec/dummy/client/app/packs/server-bundle.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/packs/server-bundle.js)
-- [spec/dummy/client/app/startup/DeferredRenderAppClient](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppClient.jsx)<-- Code splitting implemented here
-- [spec/dummy/client/app/startup/DeferredRenderAppServer.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppServer.jsx)
-- [spec/dummy/client/app/components/DeferredRender.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRender.jsx)
-- [spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx)
-
-### Comparison of Server vs. Client Code
-
-![image](https://user-images.githubusercontent.com/1118459/42479546-2296f794-8375-11e8-85ff-52629fcaf657.png)
-
-### Caveats
-
-If you're going to try to do code splitting with server rendered routes, you'll probably need to use seperate route definitions for client and server to prevent code splitting from happening for the server bundle. The server bundle should be one file containing all the JavaScript code. This will require you to have seperate webpack configurations for client and server.
-
-The reason is we do server rendering with ExecJS, which is not capable of doing anything asynchronous. It would be impossible to asyncronously fetch a code chunk while server rendering. See [this issue](https://github.com/shakacode/react_on_rails/issues/477) for a discussion.
-
-Also, do not attempt to register a renderer function on the server. Instead, register either a Render-Function or a component. If you register a renderer in the server bundle, you'll get an error when react on rails tries to server render the component.
-
-## How does Webpack know where to find my code chunks?
-
-Add the following to the output key of your webpack config:
-
-```js
-config = {
-  output: {
-    publicPath: '/assets/',
-  }
-};
-```
-
-This causes Webpack to prepend the code chunk filename with `/assets/` in the request url. The react on rails sets up the webpack config to put webpack bundles in `app/assets/javascripts/webpack`, and modifies `config/initializers/assets.rb` so that rails detects the bundles. This means that when we prepend the request url with `/assets/`, rails will know what webpack is asking for.
-
-See [our rails assets documentation](https://www.shakacode.com/react-on-rails/docs/outdated/rails-assets/) to learn more about static assets.
-
-If you forget to set the public path, webpack will request the code chunk at `/{filename}`. This will cause the request to be handled by the Rails router, which will send back a 404 response, assuming that you don't have a catch-all route. In your javascript console, you'll get the following error:
-
-> GET http://localhost:3000/1.1-bundle.js
-
-You'll also see the following in your Rails development log:
-
-> Started GET "/1.1-bundle.js" for 127.0.0.1 at 2016-11-29 15:21:55 -0800
->
-> ActionController::RoutingError (No route matches [GET] "/1.1-bundle.js")
-
-It's worth mentioning that in Webpack v2, it's possible to register an error handler by calling `catch` on the promise returned by `System.import`, so if you want to do error handling, you should use v2. The [example](#working-example) in `spec/dummy` is currently using Webpack v1.

data/docs/javascript/converting-from-custom-webpack-config-to-rails-webpacker-config.md

@@ -1,10 +0,0 @@
-# Converting from Custom Webpack Config to Rails Shakapacker Config
-
-1. Compare your package.json and the dependencies in https://github.com/shakacode/shakapacker/blob/master/package.json
-  and avoid any duplicates. We don't want different versions of the same packages.
-  We want the versions from `shakacode/shakapacker` unless we specifically want to override them.
-2. Search the `shakacode/shakapacker` repo for anything you're not sure about in terms of package names.
-3. Run `bin/shakapacker` and make sure there are zero errors
-4. Update webpack plugins and loaders to current or close to current
-5. Make sure that your `bin/shakapacker` and `bin/shakapacker` match the latest on
-https://github.com/shakacode/shakapacker/tree/master/lib/install/bin

data/docs/javascript/credits.md

@@ -1,10 +0,0 @@
-## Authors
-
-[The Shaka Code team!](http://www.shakacode.com/about/)
-
-The origins of the project began with the need to do a rich JavaScript interface for a ShakaCode's client. The choice to use Webpack and Rails is described in [Fast Rich Client Rails Development With Webpack and the ES6 Transpiler](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/).
-
-The gem project started with [Justin Gordon](https://github.com/justin808/) pairing with [Samnang Chhun](https://github.com/samnang) to figure out how to do server rendering with Webpack plus Rails. [Alex Fedoseev](https://github.com/alexfedoseev) then joined in. [Rob Wise](https://github.com/robwise), [Aaron Van Bokhoven](https://github.com/aaronvb), and [Andy Wang](https://github.com/yorzi) did the bulk of the generators. Many others have [contributed](https://github.com/shakacode/react_on_rails/graphs/contributors).
-
-The gem was initially inspired by the [react-rails gem](https://github.com/reactjs/react-rails).
-

data/docs/javascript/foreman-issues.md

@@ -1,15 +0,0 @@
-# Foreman Issues
-
-## It is not recomended to include foreman into Gemfile
-
-See: https://github.com/ddollar/foreman
-
-> Ruby users should take care not to install foreman in their project's Gemfile.
-
-## Known issues
-
- * With `foreman 0.82.0` npm `react-s3-uploader` was failing to finish upload file to S3 when server was started by `foreman -f Procfile.dev`, 
-   at the same time the same code works fine when ruby server started by `bundle exec rails s`.
-
- * The same Procfile with different versions of `foreman` in combination with different versions of `bundler` may produce different output of `ps aux`.
-   This may brake bash tools which rely on `ps` output.

data/docs/javascript/images.md

@@ -1,57 +0,0 @@
-# Images
-
-1. leading slash necessary on the
-   a. Option name for the file-loader and url-loader (todo reference)
-   b. Option publicPath for the output (todo reference)
-
-
-
-
-
-```
-const assetLoaderRules = [
-  {
-    test: /\.(jpe?g|png|gif|ico|woff)$/,
-    use: {
-      loader: 'url-loader',
-      options: {
-        limit: urlFileSizeCutover,
-        // Leading slash is 100% needed
-        name: 'images/[hash].[ext]',
-      },
-    },
-  },
-  {
-    test: /\.(ttf|eot|svg)$/,
-    use: {
-      loader: 'file-loader',
-      options: {
-        // Leading slash is 100% needed
-        name: '/images/[hash].[ext]',
-      }
-    },
-  },
-];
-
-```
-
-
-
-
-
-A full example can be found at [spec/dummy/client/app/components/ImageExample/ImageExample.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/ImageExample/ImageExample.jsx)
-
-You are free to use images either in image tags or as background images in SCSS files. You can
-use a "global" location of /client/app/assets/images or a relative path to your JS or SCSS file, as
-is done with CSS modules.
-
-**images** is a defined alias, so "images/foobar.jpg" would point to the file at
-`/client/app/assets/images/foobar.jpg.`
-
-```
- resolve: {
-    alias: {
-      images: join(process.cwd(), 'app', 'assets', 'images'),
-    },
-  },
-```

data/docs/javascript/node-dependencies-and-npm.md

@@ -1,19 +0,0 @@
-# Node Dependencies, NPM, and Yarn
-
-## Updating
-
-You can check for outdated versions of packages with `yarn outdated` in your `client` directory.
-
-To upgrade package version, use `yarn upgrade [package]`.  To update all dependencies, use `yarn upgrade`.
-
-Confirm that the hot replacement dev server and the Rails server both work.
-
-## Adding New Dependencies
-Typically, you can add your Node dependencies as you normally would.
-
-```bash
-cd client
-yarn add module_name@version
-# or
-# yarn add --dev module_name@version
-```

data/docs/javascript/react-and-redux.md

@@ -1,36 +0,0 @@
-# Communication between React Components and Redux Reducers
-
-## Communication Between Components
-See https://facebook.github.io/react/tips/communicate-between-components.html
-
-# Redux Reducers
-Documentation of generated Redux code for reducers.
-
-## Example
-The `helloWorld/reducers/index.jsx` example that results from running the generator with the Redux option may be slightly confusing because of its simplicity. For clarity, what follows is a more fleshed-out example of what a reducer might look like:
-
-```javascript
-import usersReducer from './usersReducer';
-import blogPostsReducer from './blogPostsReducer';
-import commentsReducer from './commentsReducer';
-// ...
-
-import { $$initialState as $$usersState } from './usersReducer';
-import { $$initialState as $$blogPostsState } from './blogPostsReducer';
-import { $$initialState as $$commentsState } from './commentsReducer';
-// ...
-
-export default {
-  $$usersStore: usersReducer,
-  $$blogPostsStore: blogPostsReducer,
-  $$commentsStore: commentsReducer,
-  // ...
-};
-
-export const initialStates = {
-  $$usersState,
-  $$blogPostsState,
-  $$commentsState,
-  // ...
-};
-```

data/docs/javascript/react-helmet.md

@@ -1,100 +0,0 @@
-# Using React Helmet to build `<head>` content
-
-## Installation and general usage
-See [nfl/react-helmet](https://github.com/nfl/react-helmet) for details on how to use this package.
-Run `yarn add react-helmet` to add this package to your application.
-
-## Example
-Here is what you need to do in order to configure your Rails application to work with **ReactHelmet**.
-
- Create a render-function for server rendering like this:
-
-```javascript
-export default (props, _railsContext) => {
-  const componentHtml = renderToString(<App {...props} />);
-  const helmet = Helmet.renderStatic();
-
-  const renderedHtml = {
-    componentHtml,
-    title: helmet.title.toString(),
-  };
-  return { renderedHtml };
-};
-```
-You can add more **helmet** properties to the result, e.g. **meta**, **base** and so on. See https://github.com/nfl/react-helmet#server-usage.
-
-Use a regular React functional or class component or a render-function for your client-side bundle:
-
-```javascript
-// React functional component
-export default (props) => (
-  <App {...props} />
-);
-```
-
-Or a render-function. Note you can't return just the JSX (React element), but you need to return
-either a React functional or class component.
-```javascript
-// React functional component
-export default (props, railsContext) => (
-  () => <App {{railsContext, ...props}} />
-);
-```
-
-Note, this doesn't work, because this function just returns a React element rather than a React component
-```javascript
-// React functional component
-export default (props, railsContext) => (
-  <App {{railsContext, ...props}} />
-);
-```
-
-Put the **ReactHelmet** component somewhere in your `<App>`:
-```javascript
-import { Helmet } from 'react-helmet';
-
-const App = (props) => (
-  <div>
-    <Helmet>
-      <title>Custom page title</title>
-    </Helmet>
-    ...
-  </div>
-);
-
-export default App;
-```
-Register your generators for client and server sides:
-
-```javascript
-import ReactHelmetApp from '../ReactHelmetClientApp';
-
-ReactOnRails.register({
-  ReactHelmetApp
-});
-```
-```javascript
-// Note the import from the server file.
-import ReactHelmetApp from '../ReactHelmetServerApp';
-
-ReactOnRails.register({
-  ReactHelmetApp
-});
-```
-Now when the `react_component_hash` helper is called with **"ReactHelmetApp"** as a first argument it
-will return a hash instead of HTML string. Note, there is no need to specify "prerender" as it would not
-make sense to use react_component_hash without server rendering:
-```ruby
-<% react_helmet_app = react_component_hash("ReactHelmetApp", props: { hello: "world" }, trace: true) %>
-
-<% content_for :title do %>
-  <%= react_helmet_app['title'] %>
-<% end %>
-
-<%= react_helmet_app["componentHtml"] %>
-```
-
-So now we're able to insert received title tag to our application layout:
-```ruby
- <%= yield(:title) if content_for?(:title) %>
-```

data/docs/javascript/react-router.md

@@ -1,90 +0,0 @@
-_This article needs updating for the latest version of React Router_
-
-# Using React Router
-
-
-React on Rails supports the use of React Router. Client-side code doesn't need any special configuration for the React on Rails gem. Implement React Router how you normally would. Note, you might want to avoid using Turbolinks as both Turbolinks and React-Router will be trying to handle the back and forward buttons. If you get this figured out, please do share with the community! Otherwise, you might have to tweak the basic settings for Turbolinks, and this may or may not be worth the effort.
-
-If you are working with the HelloWorldApp created by the react_on_rails generator, then the code below corresponds to the module in `client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx`.
-
-```js
-
-import { BrowserRouter, Switch } from 'react-router-dom'
-import routes from './routes.jsx'
-
-const RouterApp = (props, railsContext) => {
-  // create your hydrated store
-  const store = createStore(props);
-  
-  return (
-    <Provider store={store}>
-      <BrowserRouter>
-        <Switch>
-          {routes}
-        </Switch>
-      </BrowserRouter>
-    </Provider>
-  );
-};
-```
-
-For a fleshed out integration of react_on_rails with react-router, check out [React Webpack Rails Tutorial Code](https://github.com/shakacode/react-webpack-rails-tutorial), specifically the files:
-
-* [react-webpack-rails-tutorial/client/app/bundles/comments/routes/routes.jsx](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/app/bundles/comments/routes/routes.jsx)
-
-* [react-webpack-rails-tutorial/client/app/bundles/comments/startup/ClientRouterApp.jsx](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/app/bundles/comments/startup/ClientRouterApp.jsx)
-
-* [react-webpack-rails-tutorial/client/app/bundles/comments/startup/ServerRouterApp.jsx](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/app/bundles/comments/startup/ServerRouterApp.jsx)
-
-
-# Server Rendering Using React Router V4
-
-Your Render-Function may not return an object with the property `renderedHtml`. Thus, you call 
-renderToString() and return an object with this property.
-
-This example **only applies to server rendering** and should be only used in the server side bundle.
-
-From the [original example in the ReactRouter docs](https://github.com/ReactTraining/react-router/blob/v4.3.1/packages/react-router-dom/docs/guides/server-rendering.md)
- 
-```javascript
-   import React from 'react'
-   import { renderToString } from 'react-dom/server'
-   import { StaticRouter } from 'react-router'
-   import { Provider } from 'react-redux'
-   import ReactOnRails from 'react-on-rails'
-
-   // App.jsx from src/client/App.jsx
-   import App from '../App'
-
-   const ReactServerRenderer = (props, railsContext) => {
-      const context = {}
-
-      // commentStore from src/server/store/commentStore
-      const store = ReactOnRails.getStore('../store/commentStore')
-
-      // Route Store generated from react-on-rails
-      
-      const { location } = railsContext
-
-      const html = ReactDOMServer.renderToString(
-        <Provider store={store}>
-          <StaticRouter
-            location={location}
-            context={context}
-            props={props}
-          >
-            <App />
-          </StaticRouter>
-        </ Provider>
-        )
-
-        if (context.url) {
-          // Somewhere a `<Redirect>` was rendered
-          redirect(301, context.url)
-        } else {
-          // we're good, send the response
-          return { renderedHtml: html };
-        }
-    }
-  }
-```