Migrating the Calendar appointments app to react_on_rails

Sign up to view this video

gem 'react_on_rails', '6.4.2'

Or if you want to use the latest gem with yarn, you can install yarn first and then replace all npm install commands in the lesson with yarn.


Next, let's remove the React and other utility JavaScript libraries (moment.js and react-datetime) from the application.js file. We're going to install moment.js and react-datetime from npm, so we can remove them from here. And we don't need components.js either.

Remove JS require statements from application.js


Another thing we need to remove is the addons config setting in application.rb
Remove the React addons setting in application.rb
Then let's install the react_on_rails gem and run through the setup process quickly.

Run bundle:

$ bundle

$ git add -A
$ git commit -m "Remove react-rails gem. Add react_on_rails gem."

$ rails generate react_on_rails:install

$ bundle && npm install

$ bundle && yarn

$ foreman start -f Procfile.dev

Now if we open it in a browser, the page loads but our components won't load because we haven't set them up with react_on_rails yet.
The page loads but we need to set up our components


The example hello world component works, so we know react_on_rails is working.
Example HelloWorld component inside our app


Ok, so now let's fix our components. They will live in the new client directory that react_on_rails created in the root folder of our app.

Let's rename the client/app/bundles/HelloWorld directory to client/app/bundles/Appointments.
Rename client/app/bundles/HelloWorld to client/app/bundles/Appointments
And then let's move our components from the app/assets/javascripts/components directory to this directory under client.
Move components to the client directory

Then we need to change the entry point for webpack in the client/app/bundles/Appointments/startup/registration.jsx file:

import ReactOnRails from 'react-on-rails';

import Appointments from '../components/appointments';

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

Replace all instances of HelloWorld with Appointments.

Let's also delete the 3rd party library javascript files (moment and react-datetime) from the vendor assets directory.

Let's leave utils.js in app/assets for now because we'll use it later.
 
Ok now if we refresh the page, we get an error:
Uncaught Error: Cannot find module ".app/bundles/helloworld/startup/registration"

That's because we didn't change the entry file path in the Webpack config. So let's change that to from HelloWorld to Appointments:

  entry: [
    'es5-shim/es5-shim',
    'es5-shim/es5-sham',
    'babel-polyfill',
    './app/bundles/Appointments/startup/registration',
  ],

Now we need to restart webpack and refresh the page. We get a couple of new errors:

React is not defined!

This is because of one big change compared to react-rails. Because we had all our React component code in the app/assets directory, all components were automatically getting included in the asset pipeline.

But now that we have our components in the client directory (outside app/assets), we have to explicitly specify when we want to use code across files. That's the standard practice in using JavaScript modules using import and export statements.

The only thing that gets included in the asset pipeline by default is the final bundle that Webpack produces.

So let's fix this error by importing React in appointments.jsx:

import React from 'react';

export default class Appointments extends React.Component {

Now if we refresh the page, the React and Appointments component errors are gone. But we get a different error - AppointmentForm is not defined.

AppointmentForm is not defined

So let's fix that in appointment_form.jsx.

import React from 'react';

export default class AppointmentForm extends React.Component {

import AppointmentForm from './appointment_form';

Then refresh and we get another error:
cannot find module './appointment_form'


We need to change the component file extensions:
Change component file extensions from .es6.jsx to .jsx
Let's remove .es6 because we haven't set webpack to recognise that extension. We're using es6 by default anyway so we don't need it. We can just use the .jsx extension.

Now let's reload and that error's fixed and we've got a different one:
AppointmentsList is not defined

So let's first export that in appointments_list.jsx:

import React from 'react';

export const AppointmentsList = ({appointments}) => 

import { AppointmentsList } from './appointments_list';

export default AppointmentsList

Ok now let's refresh and see what more fun awaits us!
Datetime is not defined!
I know this can be a bit annoying that we are getting so many errors and warnings.
But I'm purposely doing this step by step so you can see how react_on_rails and ES6 works.

Ok, let's fix the Datetime error by installing react-datetime from npm.

We just need to add it to our package.json file (the one in the client directory). Put it in the list of dependencies:

"react-datetime": "2.8.3",

$ npm install

 $ foreman start -f Procfile.dev

import Datetime from 'react-datetime'

Now if we refresh, the Datetime error is fixed. But we get a different error:
Appointments: Cannot read property 'map' of undefined

That's coming from the AppointmentsList component, where we use map to loop through the  appointment records:

export const AppointmentsList = ({appointments}) => 
  <div>
    {appointments.map(function(appointment) {
      return (
        <Appointment appointment={appointment} key={appointment.id} />
      )
    })}
  </div>

= react_component('Appointments', props: {appointments: @appointments})

Ok, now let's try again. So that fixed the map error. Now we have a new error: 
Appointment is not defined

So let's fix that by first exporting it from appointment.jsx:

import React from 'react';

export const Appointment = ({appointment}) =>

import { Appointment } from './appointment'

Ok so Appointment is being loaded now. But moment is not defined because we haven't imported it yet.
moment is not defined

Now let's see where we're using moment. We use it in a utility function called formatDate in utils.js:

var formatDate = function(d) {
  return moment(d).format('MMMM DD YYYY, h:mm:ss a');
};

import moment from 'moment';

export const formatDate = function(d) {
  return moment(d).format('MMMM DD YYYY, h:mm:ss a');
};

import { formatDate } from '../utils/format';

Ok now, let's refresh our app.
Look ma, no errors!


We can see the form and our list of appointments.

Now let's try and make an appointment. Set a title and choose a date.

When I click on a date, the title gets reset. Looks like our state updates are not quite working correctly. If I enter the title again and submit the form, the appointment doesn't get added to the appointments list.

Let's have a look at the console. We have an error:
obj is not defined
That's coming from the handleChange function in AppointmentForm:

export default class AppointmentForm extends React.Component {
  handleChange (e) {
    const name = e.target.name;
    obj = {};
    obj[name] = e.target.value;
    this.props.onUserInput(obj);
  }

const obj = {};

Now if we refresh, we can set a title and choose a date without any errors. The title doesn't get reset. If we submit the form, we get an error:
Cannot read propery 'update' of undefined

That's coming from the addNewAppointment function in appointments.jsx because we don't have React addons. So let's add that.

Now although we used the update function from React addons in our previous lessons, this package has now been deprecated. The React team recommends using another package called immutability-helper. So let's use that.

This package has an update function which works just like the one we've been using.
So let's add it to the list of dependencies in our package.json file:

"immutability-helper": "2.1.1",

$ npm install

import update from 'immutability-helper';

const appointments = update(this.state.appointments, { $push: [appointment]});