Introduction
So, you’ve now learned a lot of juicy JavaScript, enabling you to make various components of your HTML/CSS page react to user actions and/or input. That’s great! As you’ve seen, you can get your apps to do a lot of pretty cool things already, just using client-side JavaScript. You may have noticed, though, that there is still an important piece of the puzzle missing: unless you use Local Storage, your app ‘forgets’ the user’s preferences, as well as any other changes made, as soon as the page gets reloaded.
While Local Storage is great, it’s not ideal: it only stores data on the computer from which the user is accessing the page. This approach does not allow for the app to ‘remember’ anything when the same user tries to access it again from a different device. For that, you’re going to need a real backend.
Lesson overview
This section contains a general overview of topics that you will learn in this lesson.
- Understand the various ways to use React in our Rails application.
- Explain how to pass data from your Rails application to React.
- Learn how to integrate React with Rails and handle the CSRF token.
Building your own backend with Ruby on Rails
Since you’ve already learned Ruby on Rails in our full-stack Ruby on Rails path, the next step is obvious: you get to build your own backend with Rails! In preparation, reread the Rails lesson on building an API to refresh how to set up a Rails backend that can handle JSON requests.
Are you done? Good. Next, it’s time to practice allowing your front end JavaScript to talk to your Rails backend using AJAX (asynchronous HTTP requests to a web server using JavaScript without requiring a full page reload). We’ll cover some best practices for how to pass data from one to another and different ways to integrate React with Rails, but otherwise it’s up to you: you’ve got everything you need to put together those final pieces of the web development puzzle.
Assignment
-
Read thoughtbot’s article on “How to integrate React with Rails 7” to get an overview of different possibilities.
-
Follow the tutorial in “How to Build a fullstack Rails 7 backend with React Frontend”. It demonstrates how to integrate React with Rails via esbuild, retrieve data from the API layer through an AJAX request using the Fetch API (remember what you learned in the JavaScript lesson “Working with APIs”), and handle the CSRF token in non-GET requests.
Additional resources
This section contains helpful links to other content. It isn’t required, so consider it supplemental.