A Global State Management Solution

Image for post
Image for post
Image from freecodecamp

If you have experience working with React, then you’re familiar with the idea of storing data in state . Each component can have its own state, but ideally, the top level component will contain the main data. As the application grows in complexity and components, passing data as props can get tricky and tedious since the data will have to find its way back up to the top level component and back down to the children components.

Several solutions already exist to help manage and maintain state in React. One of them is the popular Redux library, which can also be used with other frameworks. …


An introduction to useRefs

Image for post
Image for post
Photo by Clement H. (Unsplash)

While working on a personal project, I implemented useRef. It is a hook provided by React and is the equivalent of createRef which is used with class components.

The useRef hook is a function that returns a mutable ref object whose .current property is initialized with an argument, (initialValue). The returned object will persist for the full lifetime of the component. (Hooks Reference)

const refContainer = useRef(initialValue);

The useRef hook served two primary uses in my project: accessing DOM nodes/elements and storing mutable information. Let’s explore how useRef can be implemented in your React application.

Accessing DOM nodes/elements

Before diving further, let’s first discuss what ref is. It is an attribute that is used either on an HTML element or a component tag. It provides us a way of referencing DOM nodes in React. …


Implementation in a React Application

Image for post
Image for post
Image from https://github.com/ReactTraining/react-router

React-router is a tool that can be implemented on top of a React application. React, by itself, does not dictate anything about routing. Routing can sync the application with the URL along with the navigation features offered by the browser such as the address bar and navigation buttons enhancing the capabilities of your React application. React router offers a way to write your code so that specific components are rendered only if the route matches what is defined.

In this guide, we will cover how we can implement react-router into your React application.

Server-side Vs. Client-side Routing

Before we begin implementing react-router, let’s discuss the difference between server and client side routing. Server-side is the more traditional approach where we define the routes on the server. Client-side is the more modern approach where we use client-side Javascript to dynamically change what gets shown to the screen. With client-side routing, we handle the rendering of our application. …


Deploy a React and Node/Express application with one repository

Image for post
Image for post
Photo from V School.

Let’s say you’re working on a full-stack application where the client side is utilizing React and the server side is utilizing Node.js/Express. You will most likely have separate GitHub repositories for each. But what if both of those were subdirectories? Let’s first examine how this structure would look:

app (github repo)
|__frontend (react application)
|__backend (node/express application)

I used this approach to determine if it was possible to deploy each subdirectory to Heroku. It’s not common practice to have applications as subdirectories, and they should ideally have their own GitHub repository.

Assuming that we initialize app as the repository, deploying it to Heroku would not work. Instead, the goal would be to deploy frontend and backend to Heroku through theapp’s GitHub repository. …


Upload images and videos with Cloudinary

Image for post
Image for post
Photo by Pero Kalimero (Unsplash)

In this guide, we will cover how to upload images/videos in a React application.

For the server, we will be setting up a Rails API to store the information of the image/video. For the actual storage of image/video, we will be including a third-party service called Cloudinary. It is a cloud-based image and video management platform.

Let’s begin by signing up with an account at Cloudinary as we will need credentials to integrate into the Rails API.

Cloudinary Setup

If you don’t have an account yet for Cloudinary, go ahead and register for one here:

Once you sign up, you should be redirected to the dashboard containing the account details on the top. …


Set up your application to manage JWT

Image for post
Image for post
Redux, React, and JWT logos

This is a guide on creating a React Redux application from scratch. The focus is on handling a user signing up and logging in — and then authenticating and authorizing them with JSON Web Tokens(JWT). Keep in mind the file structures and approach presented here represent one of many.

For this guide, we’ll be making requests to a Ruby on Rails API that was already created. For reference, it’s referring to the Rails API produced here and the repo.

Setup

Let’s generate a React application with Create React App. In the terminal, run:

npx create-react-app jwt-react-redux

Change the directory to jwt-react-redux, and open it. From the directory, run the following to install Redux, React Redux, and Redux Thunk. …


Set up your user auth using JavaScript Web Tokens for improved security

Image for post
Image for post
Photo by Joshua Fuller (Unsplash)

This is a guide on creating and setting up a Rails API application from scratch.

The focus will be on user login and sign up and authorizing/authenticating them with JWT (JSON Web Tokens). Keep in mind that this approach represents one of many. Let’s begin with the setup.

Setup

Let’s generate a Rails API. From the terminal, run the following command:

rails new jwt-rails-api-app --database=postgresql --api

The flag --database=postgresql is included to indicate that PostgreSQL is to be utilized as the database instead of SQLite, and the flag --api is included to indicate that this application is to be set up as an API and to avoid generating the views and view helpers since they are not necessary for an API. …


How Redux manages complex state

Image for post
Image for post
Image from Christopher Lis from https://chriscourses.com/blog/redux

Redux is a JavaScript library for managing and maintaining application state that is used alongside other frameworks, such as React. Understanding how Redux works can be tricky. The purpose of this guide is to break down some resources we get from Redux as well as to explain terminologies associated with it.

Installing and Implementing Redux

Let’s first generate a React application named redux-practice with the following:

npx create-react-app "redux-practice"

The purpose of this generated application is to test Redux, primarily from src/index.js.

We also need to install Redux with the following:

npm install redux

Once installed, we can now import a few resources from Redux. …


Handling a model that belongs to more than one model

Image for post
Image for post
Unsplash Photo by Natalia Y

A while back, while working on a project, I decided to have separate models/tables for teachers and students as opposed to having one user model. At the time, having two models worked best for the structure of my application.

But at some point, I did come across a minor problem. When I asked for guidance, I was pointed to the solution of polymorphic association. Of course, I didn’t know what it was initially.

I did some research to determine how it worked and applied it to my project and it solved my issue!

In this guide, I will cover the problem I faced during my project and how the concept of polymorphic association solved it. (If you only care about how to implement it, feel free to scroll down to the solution. …


Build a sample social graph so users can follow each other

Image for post
Image for post
Photo by Benjamin Smith on Unsplash

For the longest time, I avoided the implementation of self-relationships in my projects.

I was always aware of the concept and knew of its application (most famously, a user can follow a certain user but that certain user does not necessarily need to follow that user back), but I could never fully understand or visualize how it worked, despite reading numerous blogs.

The biggest roadblock was that I just never actually coded it…until now.

Models

We will use the following models, a User and Follow model, as an example.

The setup of self-referential relationships involves two tables, the user table and a joiner (follow) table that will connect it back to the user table. Sounds confusing? …

About

Reinald Reynoso

Full Stack Developer || Educator || Lifelong Learner

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