Recap

Linked Projects:

Calreact
 
Lesson code - https://github.com/learnetto/calreact/tree/m7-react-router

We’ve done a lot in this module, so let’s do a quick recap.

We’ve learnt to use React Router so that we can build a single page app with multiple routes for viewing, editing and deleting records.

Instead of loading a fresh page, when a user clicks on links, we render the component for the route and fetch the necessary data using AJAX calls.

We added 4 routes:

  • The AppHeader, with the app title and link to the homepage which is shared on all of the routes.

  • The homepage route with the Appointments component.

  • And we added a show route and an edit route.

We can click on an appointment title to view it on its own page.

[screenshot 0:45]

We can go to the editing page for an appointment, which shows the appointment form with the details for that appointment filled in.

And we can change and update the appointment or delete it.

One big change we made was that we split our state management between the Appointments component and AppointmentForm component.

[screenshot 1:05]

We used to have it all in the Appointments component.

But that wasn’t convenient when we wanted to reuse the AppointmentForm component for our editing route.

So we moved the form related state to AppointmentForm and only left the Appointments state data in the Appointments component.

That also helped reduced the number of props we needed to pass to the AppointmentForm component.

In order to get all our new functionality working, we also had to add corresponding actions in Appointments controller.

There’s one other thing I want to fix. If I go to an individual appointment route and reload it, I just see the JSON.

[screenshot 1:48]

That’s because we haven’t specified what to render for the HTML format.

So let’s fix that.

Let’s add a respond_to block and add format.html render index just like we do for the edit action.

def show
   @appointment = Appointment.find(params[:id])
      respond_to do |format|
        format.html { render :index }
        format.json { render json: @appointment }
   end
   end

And then format.json render JSON appointment

Now if I refresh, the page loads fine.

That is React Router.

Liked this tutorial? Get more like this in your inbox