Migrating the Calendar appointments app to react_on_rails

This video was part of the The Complete React on Rails 5 Course.

A new version of the course is now available

Enrol now 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.

Another thing we need to remove is the addons config 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 example hello world component works, so we know react_on_rails is working.

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.

And then let's move our components from the app/assets/javascripts/components directory to this directory under client.

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:

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:

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.

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:

We need to change the component file extensions:

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:

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!

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:

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: 

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.

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.

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:

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:

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]});