Creating My First React App

For my first React app, I wanted to create a virtual corkboard. My goal was for users to be able to create separate boards and create notes linked to those boards. I also wanted the notes to be able to be moved around on the board, and for all of the modified data to be automatically sent to the server and updated.

The first big hurdle I ran into was when I needed to have my frontend and backend communicate. Normally when you create an MVC Rails app, a lot of the communication process is set up and managed for you. Since Rails’ main purpose is to be used to handle both backend and frontend, you don’t have to worry about compatibility issues arising, because it is built to work as one unit. However, when you start using Rails as an API, things change. The main thing you have to worry about is managing CORS correctly. CORS, short for Cross-Origin Request Sharing, is essentially a gate meant to restrict where requests are sent and received from. It plays an important role in the security of websites. If we don’t tell Rails to accept requests from our frontend server, both backend and frontend can’t talk to each other, as Rails blocks communication to unspecified servers. To properly implement CORS, the config/initializers/cors.rb file has some code that should be uncommented and modified to match your specific frontend domain.

The next big issue I ran into was managing authentication. Normally, when I’m creating an MVC Rails app, I don’t need to worry about how sessions work. Cookies are sent automatically, and it all just works as intended. When creating a Rails API, things are a little different. Cookies are disabled by default in Rails if you create an app using the ‘ — api’ flag. In order to re-enable cookies, we have to insert the following line into the config/application.rb file after the application class to tell Rails to use the cookies middleware:

config.middleware.use ActionDispatch::Cookies
config.middleware.use ActionDispatch::Session::CookieStore, key: ‘_namespace_key’

as well as

include ::ActionController::Cookies

in the application controller.

We also need to make sure that our JavaScript requests are sending the cookies. For my app, I needed to get back cookies after I logged in. To do this, I needed to specifically indicate that cookies be saved by including the credentials header and setting the value to ‘include’.

fetch(‘http://localhost:4000/login', {
 method: ‘POST’, // or ‘PUT’
 body: formData,
 credentials: ‘include’
 })
 .then(response => response.json())
 .then(data => {
 if (data.error) {
 this.setState({error: true});
 this.setState({errorMessage: data.message});
 } else {
 this.props.setUser(data);
 this.props.setLoggedIn(true);
 }
 });

When working with React, I ran into an issue when trying to find a way to create components onClick and add them to the DOM. My goal was to have it where when I clicked a button, a new component would be created and added to the DOM. At first, I tried creating a separate function that would handle a click and return a new component to a ternary operator that I had in the render function. This was very bad for several reasons. One, it didn’t work. Two, the return function should be pure, and the way I wrote the handle click function was that it would update the state, which doesn’t work. The way I solved the issue was by adding a ‘children’ key to the state and adding that reference to the render. This way, I could update the state by adding a new component to the children array, which in turn would automatically call the render function.

The last major issue that I’ll discuss involved onClick events and how they work with the DOM hierarchy. My goal was to have a way where when a user clicked on the background of the board, the expanded content would close. I originally did this by adding an onClick event to the board canvas and linking it to the unselectNote function. However, this didn’t work, as the onClick event would trigger even if something other than the background was not clicked. This was because the board canvas element was the parent element of all of my other elements, meaning that if the child elements were clicked, the parent onClick event would be called. I fixed this by making a specific element to capture background clicks and adding it as a child to the board canvas element.

Overall, I learned a lot about React and about combining React and Rails. I only really feel like I scratched the surface, with so much more to learn through experience and documentation. If I were to continue working on this project or were to recreate this project from scratch, I would consider using WebSockets to create an environment where users can collaborate in real-time on the same boards/notes. I can’t wait to continue learning and improving my knowledge of React!