Using Create-React-App

Gabriel Valle
Dec 23, 2018 · 14 min read

This is the second article in a series that will provide newer developers guidance on how to create a React application, use React Router to make a SPA (Single Page Application), deploy it to Heroku, incorporate Redux for state management, and implement user authentication. When I first started working with React, I felt a lot of guides glossed over details that seem trivial to more experienced developers, so I will be going into more detail in an attempt to bridge the gap between newer and more experienced developers.

While this guide will walk a reader through creating a React application, it does assume the reader has their environment setup for using node, npm and/or yarn. This article also uses a Rails API as the backend, a guide to set this up can be found in this article https://medium.com/@Gabriel.Valle/setting-up-a-rails-api-backend-4b1bb124846b


The React team has done a fantastic job at providing documentation for React, including the initial setup for a new React application. With npm 5.2 and higher, starting a new React application is as simple as enter the following command into the terminal npx create-react-app my-app.

Since we are going to be expanding on a previously created Rails API, we need to do things a little differently. Instead of just entering the command into our terminal, we need to first navigate to the root directory of our Rails API in the terminal. From there we will enter the above command, but replace ‘my-app’ with client. I like to use client when using create-react-app inside of a Rails API directory because we will be creating the client that users interact with, but just about anything can be entered instead of ‘my-app’. Once that script has finished running, we’ll enter yarn —-cwd client start into the terminal. This command temporarily changes the working directory to client and runs the start command, which will boot up the React application. Your browser will open a new page and greet you with

One nifty feature about React is the ability to proxy the backend server for the development environment. This capability allows developers to avoid CORS issues that would normally occur when the frontend and backend are running on different ports. To setup the proxy, simply add "proxy": "http://localhost:3001 to the package.json file located in the client folder. We are using port 3001 because that is the port we decided to use in my previous article about setting up a Rails API. The package.json file should look something like

In order to make this a Single Page Application (SPA), we need something to handle the routing inside the React application. The current most popular, and also my weapon of choice, is React Router. To install this dependency, run npm install react-router-dom while in the client directory of the project. We are also going to install semantic-ui-react and semantic-ui-css because it provides some very nice styling and functionality. React Router allows us to create navigation routes for our application that will display different pages of the application without forcing the browser to reload. Before we can connect the components of our application, we need to create the components.


The programming concept Separation of Concerns is followed with the React convention to create a component to query the information, similar to controllers in Rails, and a separate component to display the information, similar to views in Rails. We will start by creating a component to query information for our lists, aptly named ListContainer. In an effort to keep the application files organized, we’ll create a new folder client/src/Containers and name our new component ListContainer.js. When creating a new component there are a few things that need to be imported into the file. React will always need to be imported, and since we are using Semantic-UI we need to determine which aspects we will use, which can be changed later. Since this is a Container component for a list, I like to import Container, Dimmer, Divider, Header, Icon, List, Loader, and Segment from Semantic-UI. When first creating a component I like to set them up as classes incase I need the extra functionality, which results in a ListContainer that looks like

This component is going to have several parts that perform specific functions. React components have the ability to store information with something called state. When implementing state in a component, a constructor function needs to be setup to provide the initial state for the component. The constructor for our ListContainer component will start with an empty state so we can alter the display in the browser depending on if the user has lists saved to the database.

The ListContainer needs to grab the lists that belong to the user and add them to its state so that they can then be displayed. It is best to do initial data fetching in a React function called componentDidMount(). This function will be run once a component is initially rendered to the DOM. The componentDidMount() will call a separate function that will do the data fetching, in case we need to reuse the function to fetch the data later. Once we fetch the data on the user’s lists, the data needs to be converted into JSON and then fed to another function that will add the information to the component’s state. Here is what these three functions will look like

A function is needed to allow users to add new lists, this function needs to accept an object that contains information about the new list so it can be sent to the API endpoint we setup on our Rails backend. Once the Rails backend has successfully created a new list, it will send the saved list back to the front-end and the function needs to add it to our state containing the user’s lists. This function will be passed to a child component that will be used to accept user input and create an object with correct formatting and then passed back to this function.

We want users to be able to delete their lists so we need a function to perform this. Similarly to the function for adding new lists, this function will be passed to a child component so that an individual list can provide its id to allow it to be deleted from the database. This function needs to accept a list_id so it can make a DELETE request to the Rails API endpoint. Once Rails has successfully deleted the list, the array of lists stored in the state will filter out the list with the matching id.

Every React component needs a render function, which has a return statement that determines what will be displayed on the DOM. We’ll use conditionals inside our return statement to determine if a loading screen should be displayed or if information on whether lists belonging to the user were found. Inside the render function, but outside the return statement, variables can be declared. It’s here that we will declare a new variable to iterate through the lists in our state and display another React component for each list. Following these guidelines creates a render function for the ListContainer that looks like

Next we need to create our ListEntryInput component and then a ListEntry component so React doesn’t run into errors when trying to render.


The ListEntryInput component will be pretty straightforward, it needs to maintain state, update state when a user types in the title for a new list, and reset state when a user creates a new list. Just like with previous components, React needs to be imported and let’s also import Button, Input, and List from Semantic. The Button will be used to allow a user to submit a new list to the Rails API, Input will be used to allow user input, and List will allow this component to display seamlessly since its parent component has this component in a list.

In order for the Button to be used as a submit button, it will need an event handler for when a user clicks on it. Thankfully the parent component passed this component a handleAddList function for just this purpose, so when a user clicks the button this function will be called and passed the component’s state and then a function to reset the state will be called.

The Input needs to have a function called whenever the user edits the field in order for the component’s state to be an accurate representation of what the user has entered and have its value be the current state so the user can see what has been entered/delete from the field.

In order for the component to maintain state, it needs to be initialized in the constructor function. Based on our backend List model, we need to include a title, status and user_id. The user_id will default to 1 since that is going to be the ‘guest’ account users can access if they want to test the application before creating an account. User authentication will be added at a later stage, so this will be edited in the future.

The function to handle user input accepts an event as input, which in this case will be the onChange event whose target is the Input field. This function will update the component’s state by using React’s built in function setState.

Similar to the handleListUpdate function, the handleClear function will use React’s built in function setState to reset the component’s state.

Putting all these parts together creates a component that looks like


For our ListEntry component, we are going to start with our imports and the structure of our class so it can be exported and used in other components. The skeleton of our ListEntry looks like the below

In order to have this component use state to store the list’s items, state needs to be initialized in the constructor function. Once the constructor function has been created, three additional functions can be added to get the list_items and add them to the component’s state. The first function will be React’s componentDidMount(), which will then call a function to GET the data from the Rails API endpoint. The getListItems() will access the component’s props to access the id of the current list to ensure the correct list_items are added to state. Once data has been retrieved from the Rails API endpoint, it needs to be iterated through so the list_items can be added to the state. This all results in three functions that look like

Since our ListEntry component is populating entries in a list, we are going to use the List component from Semantic UI to wrap everything in our render(). We are going to add a few elements to our list entries, first will be a trashcan icon to the right of the entry that will be used to delete the list.

Since the trashcan icon will be used to allow users to delete lists, it uses the handleDelete() passed to the component from the parent component. The bordered, inverted, and verticalAlign attributes are all stylistic choices that are optional.

The second element we are going to add to our ListEntry component will be a button to change the status of the list between ‘Open’ and ‘Completed’. This button will have its text changed depending on the status of the list and will call a handleStatusChange() when clicked.

The handleStatusChange() needs to accept a list, check the status and change it appropriately, and then make a PATCH request to the Rails API endpoint sending the updated list. This criteria generates a function that looks like

Since a list can have any number of list items a component to display a list item will be created and the ListEntry component will iterate through its state listItem key and feed each value to this new component. This new component will need a unique key for each listItem, the id is a perfect choice, and it will need to ability to delete items so a function from the ListEntry component will be passed to it.

The handleDeleteItem() needs to accept an id so it knows which API endpoint to send a DELETE request to and also which item to filter out of this component’s state. This creates a function that looks something like

I personally really like modals, so that is how I will be setting up the display of a list once a user clicks on it.

Setting up a Modal involves two steps; first is to determine the trigger, which in this case will also be the text displayed in our list of Lists. Second step is determining what appears on screen once a Modal has been triggered. We will have the Modal use the variable we created earlier to display all of the items for a list, listItems, and also a component, ListItemInput, that will allows users to create new items for a list.

We need to create our handleAddItem() since we are passing it to our child component ListItemInput. This function needs to accept an object containing the details of the new item, create a POST request to the Rails API endpoint for the correct list, and then once Rails returns the saved object, add the item to our ListEntry component’s state. This thought process produces a function that looks like

Now we need to create our ListItemInput component and then lastly the ListItem component.


The ListItemInput component will be pretty straightforward, it needs to maintain state, update state when a user types in the name for a new item, and reset state when a user creates a new item. Just like with previous components, React needs to be imported and let’s also import Button, Input, and List from Semantic. The Button will be used to allow a user to submit a new item to the Rails API, Input will be used to allow user input, and List will allow this component to display seamlessly since its parent component has this component in a list.

In order for the Button to be used as a submit button, it will need an event handler for when a user clicks on it. Thankfully the parent component passed this component a handleAddItem function for just this purpose, so when a user clicks the button this function will be called and passed the component’s state and then a function to reset the state will be called.

The Input needs to have a function called whenever the user edits the field in order for the component’s state to be an accurate representation of what the user has entered and have its value be the current state so the user can see what has been entered/delete from the field.

In order for the component to maintain state, it needs to be initialized in the constructor function. Based on our backend ListItem model, we need to include a name, status, and quantity.

The function to handle user input accepts an event as input, which in this case will be the onChange event whose target is the Input field. This function will update the component’s state by using React’s built in function setState.

Similar to the handleItemUpdate function, the handleClear function will use React’s built in function setState to reset the component’s state.

Putting all these parts together creates a component that looks like

This leads to the final part of this article, creating the ListItem component.


Similar to most components that will be created in React projects, certain steps must be followed when creating a new component. React needs to be imported along with any other components or files that will be used in the component, in this case we will be using Button and List from Semantic, and if the component is going to contain state then a class needs to be created. The start of out ListItem component will look something like

Next, the render function of our component is going to be created. Since this component is displaying a single list_item, it needs to display certain attributes about the list_item. This component needs to display the name of an item, the quantity of an item and a plus and minus button so a user can increase or decrease the quantity, a button to mark an item completed, and a button to delete the item. For display purposes, I’ve decided to have the plus/minus buttons, the quantity, the button for mark the item complete, and the button to delete the item display on the right side of the component, and the name of the item display on the left side of the component. The plus, minus, complete, and delete buttons will all need a function to handle a user clicking on it. Thankfully this component’s parent component passed it a function that handles item deletion, and all this function needs is the id of an item. These guidelines will produce a render() that looks something like

Both the handlePlus and handleMinus functions will act very similar, with the exception of the handlePlus increasing quantity, and the handleMinus decreasing quantity if the current quantity is above 0. Both these functions need to accept a list_item, update the quantity of the list_item, and make a PATCH request to the Rails API endpoint for the list_item’s id. This line of thinking produces functions that look like

The last thing that needs to be add to this application is a function to handle when a user clicks the button to change the status of a list_item to completed or incomplete. This function needs to accept a list_item so it can check the current status of the item and update it correctly. The function will then send a PATCH request to the Rails API endpoint for the specific list_item so the database can save the change. This function will look like


If you’ve been coding along, take a breath and congratulate yourself. There was a lot covered in this article and you’ve now successfully created a simple list application.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store