How to use react-on-rails - 10 common examples

// Import React on Rails lib
import ReactOnRails from 'react-on-rails';

// Import components
import Home from '../containers/Home';

// This is how react_on_rails can see the components in the browser.
ReactOnRails.register({
  Home,
});

import ReactOnRails from 'react-on-rails';

import Room from '../containers/Room'
import RoomMobile from '../containers/RoomMobile'

// This is how react_on_rails can see the HelloWorld in the browser.
ReactOnRails.register({
  Room, RoomMobile
});

// Deferred render on the client side w/ server render
import RenderedHtml from './ClientRenderedHtml';

// Deferred render on the client side w/ server render with additional HTML strings:
import ReactHelmetApp from './ReactHelmetClientApp';

// Demonstrate using Images
import ImageExample from '../components/ImageExample';

import SetTimeoutLoggingApp from './SetTimeoutLoggingApp';

ReactOnRails.setOptions({
  traceTurbolinks: true,
});

ReactOnRails.register({
  BrokenApp,
  HelloWorld,
  HelloWorldWithLogAndThrow,
  HelloWorldES5,
  HelloWorldRehydratable,
  ReduxApp,
  ReduxSharedStoreApp,
  HelloWorldApp,
  RouterApp,
  PureComponent,
  CssModulesImagesFontsExample,
  ManualRenderApp,
  DeferredRenderApp,
  CacheDisabled,
  RenderedHtml,
  ReactHelmetApp,

import ReactOnRails from "react-on-rails";

import Container from "../bundles/Container/components/Container";
import Team from "../bundles/Container/components/Team";
import Indicators from "../bundles/Container/components/lessons/Indicators";
import DNA from "../bundles/Container/components/lessons/DNA";
import Eye from "../bundles/Container/components/lessons/Eye";
import Atoms from "../bundles/Container/components/lessons/Atoms";
import CellsTissuesOrgans from "../bundles/Container/components/lessons/CellsTissuesOrgans";
import Sound from "../bundles/Container/components/lessons/Sound";
import Classification from "../bundles/Container/components/lessons/Classification";

// This is how react_on_rails can see the HelloWorld in the browser.
ReactOnRails.register({
  Container,
  Team,
  Indicators,
  DNA,
  Eye,
  Atoms,
  CellsTissuesOrgans,
  Sound,
  Classification
});

// Deferred render on the client side w/ server render
import DeferredRenderApp from './DeferredRenderAppServer';

// Deferred render on the client side w/ server render
import RenderedHtml from './ServerRenderedHtml';

// Deferred render on the client side w/ server render with additional HTML strings:
import ReactHelmetApp from './ReactHelmetServerApp';

// Demonstrate using Images
import ImageExample from '../components/ImageExample';

import SetTimeoutLoggingApp from './SetTimeoutLoggingApp';

ReactOnRails.register({
  BrokenApp,
  HelloWorld,
  HelloWorldWithLogAndThrow,
  HelloWorldES5,
  HelloWorldRehydratable,
  ReduxApp,
  ReduxSharedStoreApp,
  HelloWorldApp,
  RouterApp,
  HelloString,
  PureComponent,
  CssModulesImagesFontsExample,
  DeferredRenderApp,
  RenderedHtml,
  ReactHelmetApp,
  ImageExample,

// Deferred render on the client side w/ server render
import RenderedHtml from './ClientRenderedHtml';

// Deferred render on the client side w/ server render with additional HTML strings:
import ReactHelmetApp from './ReactHelmetClientApp';

// Demonstrate using Images
import ImageExample from '../components/ImageExample';

import SetTimeoutLoggingApp from './SetTimeoutLoggingApp';

ReactOnRails.setOptions({
  traceTurbolinks: true,
});

ReactOnRails.register({
  BrokenApp,
  HelloWorld,
  HelloWorldWithLogAndThrow,
  HelloWorldES5,
  ReduxApp,
  ReduxSharedStoreApp,
  HelloWorldApp,
  RouterApp,
  PureComponent,
  CssModulesImagesFontsExample,
  ManualRenderApp,
  DeferredRenderApp,
  CacheDisabled,
  RenderedHtml,
  ReactHelmetApp,
  ImageExample,

export default (props, _railsContext, domNodeId) => {
  const render = props.prerender ? ReactDOM.hydrate : ReactDOM.render;
  // eslint-disable-next-line no-param-reassign
  delete props.prerender;

  // This is where we get the existing store.
  const store = ReactOnRails.getStore('SharedReduxStore');

  // renderApp is a function required for hot reloading. see
  // https://github.com/retroalgic/react-on-rails-hot-minimal/blob/master/client/src/entry.js

  // Provider uses this.props.children, so we're not typical React syntax.
  // This allows redux to add additional props to the HelloWorldContainer.
  const renderApp = (Komponent) => {
    const element = (
      
        
          
        
      
    );
    render(element, document.getElementById(domNodeId));
  };

const mainNode = (_initialProps, context) => {
  const store = ReactOnRails.getStore("recipesStore");
  const { location, base, serverSide } = context;

  // We render a different router depending on whether we are rendering server side
  // or client side.
  let Router;
  if (serverSide) {
    Router = props => (
      
        {props.children}
      
    );
  } else {
    Router = props => (
      {props.children}
    );
  }

export default (_props, railsContext) => {
  const store = ReactOnRails.getStore('routerCommentsStore');

  let error;
  let redirectLocation;
  const { location } = railsContext;

  // This tell react_on_rails to skip server rendering any HTML. Note, client rendering
  // will handle the redirect. What's key is that we don't try to render.
  // Critical to return the Object properties to match this { error, redirectLocation }
  if (error || redirectLocation) {
    return { error, redirectLocation };
  }

  // Allows components to add properties to the object to store
  // information about the render.
  const context = {};

export default (props, railsContext, domNodeId) => {
  // This is where we get the existing store.
  const store = ReactOnRails.getStore('SharedReduxStore');

  // renderApp is a function required for hot reloading. see
  // https://github.com/retroalgic/react-on-rails-hot-minimal/blob/master/client/src/entry.js

  // Provider uses this.props.children, so we're not typical React syntax.
  // This allows redux to add additional props to the HelloWorldContainer.
  const renderApp = (Komponent) => {
    const element = (
      
        
          
        
      
    )
    render(element, document.getElementById(domNodeId));
  }