5. Ruby on Rails With React - Mediocre Inventions

Intro

This article is going to be a very brief rundown of what React.js is and how to use it with your application. React is a very popular JavaScript library and there are a lot of courses out there that can teach you its ins and outs in detail. However, if you just want to get up and running and figure out the details later when you need to, then this article with go through just that. We will cover how to Create, Read, Update, and Delete objects in our database using React and AJAX to interact with our Rails API.

React is a JavaScript library that allows developers to create a website’s UI by using small pieces of code (JavaScript files called Components). You can use these components to display dynamic data (eg: data from your api or database) as well as static elements (regular HTML elements like

or even

If you are curious, you can find out more about React functions at their website here: https://reactjs.org/docs/react-component.html. However, if you just want the cliff notes of what is relevant in this project, I will explain it here.

You declare a React component with the line:

class BookApp extends React.Component { 
...
}

Inside this class, there are certain default functions that React will load in a set order. The functions are called: constructor(), static getDerivedStateFromPropers(), render(), and componentDidMount(). So everytime you load a React component on a page, these functions will be called in that order. The constructor() initiates the component and the render() function renders the HTML for the page. Then if that state of the component changes, the render() function gets called again.

React Workflow

Here is the general flow of what is happening here in our component:

The constructor initiates the component in our BookApp by setting the state with an empty array of “books”. The “state” in this case can be thought of as the place to store variables so that our page can use it and render dynamic content. Then it renders text that says “Loading…” for a bit before calling componentDidMount(), which runs a custom function we created called getDataFromApi(). This function then uses AJAX (basically JavaScript that can interact with our API) to get Book data from our database and store it in the “state”. Now that the state has changed again, render is called and updates the “Loading…” to “Your books will go here!”.

Note:

The getDataFromApi() function stores variables called error and isLoaded in the state, and sets their values depending on how the API called goes. This helps with troubleshooting because the render() function will print out errors if it does run into any.

Rendering

Now that we have the component, lets go into /app/views/homepage/index.html.erb and change it so that it renders our component instead of the default text. Replace everything in the index.html.erb file with:

<%= react_component 'BookApp' %>

This tells the application to render the React component we just created. You can start your server again and refresh the page to see it. Your page should now look like this:

Now we can work on populating this area with a table to render all our book entries. Fortunately, React allows you to render other components within a component so that we don’t have to stack one file with so much code. So let’s start by creating some new files called book_table.js.jsx and book.js.jsx in the same folder as book_app.js.jsx. Fill out the table file so that it looks like this: https://gist.github.com/mt9304/fe72fac20278203c3ece7263536a741e and the book file should look like this: https://gist.github.com/mt9304/266b22788e8a7f6144c026abffbc9441

If all went well, then you page should now look something like this:

Now you should have a working delete button that should delete the entries when clicked! You can then implement the rest of the functions as you would like to build on this application. For some examples on implementing adding and editing with React, this article seems to cover the rest: https://www.nopio.com/blog/react-rails-part-1-tutorial/

For our purposes, this basic application should be enough to deploy to a Production environment. The next articles will go through some common options for hosting your web application.