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. …
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.
useRefhook is a function that returns a mutable
.currentproperty is initialized with an argument, (
initialValue). The returned object will persist for the full lifetime of the component. (Hooks Reference)
const refContainer = useRef(initialValue);
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.
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. …
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.
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
backend to Heroku through the
app’s GitHub repository. …
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.
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. …
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.
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. …
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.
Let’s generate a Rails API. From the terminal, run the following command:
rails new jwt-rails-api-app --database=postgresql --api
--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. …
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
We also need to install Redux with the following:
npm install redux
Once installed, we can now import a few resources from Redux. …
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. …
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.
We will use the following models, a
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? …