How to use client-side routing in your React web applications
React Router is the standard for client-side routing in a React application. According to their documentation,
“React Router is a collection of navigational components that compose declaratively with your application.”
In this article, we will go through some of the main components of React Router and set up routing for a basic web application. For beginners, I hope this can help you to use React Router in your app. For experienced users, I hope this can be a nice refresher.
We will be using a React application created from create-react-app in our example below. …
Looking at the pages directory, dynamic routes, Link component, and useRouter hook
Next.js is a React framework that enables a hybrid of server-side rendering and generating static pages for React applications. There are many benefits of using Next.js over the traditional React application, including better performance and SEO. If you are new to Next.js, have a look at the article below to get an overview of the framework.
In this article, we will be taking a look at routing in a Next.js app. This will include looking in the pages directory, how to handle dynamic routes, and understanding the Link component and useRouter hook.
Simple Routing in pages Directory
The easiest way to get started with a Next.js app is to run the following command. …
A simple solution to animate React elements when in-view using Framer Motion
I have been exploring different animation libraries recently and have come to like framer motion for my React apps. Framer Motion is described as a production-ready React animation and gesture library. Check out their website below to see some of the things you can do.
While building a web page the other day, I wanted to add an animation to an element, but I was having some trouble with the timing of it.
The problem was that the animation was happening when the component mounts upon page load. Doesn’t sound like a big deal, right? However, since the element was lower on the page, the animation was happening before I scroll down to see it. I needed to find a way to have the animation start when the element comes into the screen view. …
Introduction to Next.js routing, styling, pre-rendering, and deployment
Since learning React, I have been using create-react-app for all of my personal projects. I love how easy it is to set up a boilerplate app and get to coding right away. Recently I had the urge to take my React skills to the next level, and that is when I came across Next.js.
According to Wikipedia, Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React-based web applications.
On their website, they have a getting started tutorial, where they teach us how to use the basics of Next.js by building a blog. …
Let’s have a look at the chroma.js scale function
I recently came across a useful JavaScript library called chroma.js. Chroma.js is a small-ish zero-dependency JavaScript library for all kinds of color conversions and color scales.
There are many things that you can do with chroma.js, including:
- Read colors from a wide range of formats
- Analyze and manipulate colors
- Convert colors into a wide range of formats
- Linear and bezier interpolation in different color spaces
In this article, we will be taking a look at this library by building a color scale generator using HTML, CSS, and JavaScript. Here is a preview of what we will be building.
Continue your learning, even without your computer
Learning to code as a self-taught developer takes time and commitment. Over the New Years' holiday, I was away from my computer for a few days and it got me thinking about other ways I can continue to learn about programming without actually writing code. Here are 4 ways that you can continue to grow as a developer even if you are away from your computer.
1. Watch Videos on YouTube
YouTube has been one of the biggest tools that have helped me to learn software development.
While there are many tutorial videos out there where you code along with the instructor, there are also many videos that are lifestyle based, motivational, or great to just watch casually without coding along. If I am thinking to start a project using new technology, I go to YouTube to look up a crash course or short tutorial to get an overview of the subject. …
Part 8 of the Data Structure series with JavaScript
In this article, we will be taking a look at priority queues and building one using JavaScript. If you are not familiar with binary heaps, I recommend having a look at the article below on how to create a binary heap first. This article and our implementation of priority queues are building upon this knowledge.
What is a Priority Queue?
According to Wikipedia, a priority queue is an abstract data type similar to a regular queue or stack data structure in which each element additionally has a “priority” associated with it. What does this mean? …
Part 7 of the Data Structure series with JavaScript
In this article, we will be taking a look at another type of data structure, Binary Heaps. If you are not familiar with trees, I recommend checking out the article below first.
MaxBinaryHeap vs MinBinaryHeap
A binary heap is a type of binary tree that has additional rules. To quickly review; a binary tree is a data structure that consists of nodes with a parent and child relationship. Each parent node can have at most two child nodes. In a binary heap, there are two additional rules:
- All levels of the tree must be filled in order. If the last level of the tree is not filled, the nodes of the tree are filled in from left to right. …
Part 6 of the Data Structures series with JavaScript
In this article, we will be introduced to tree traversal. If you missed the last part of the series where we learned about trees, binary trees, and binary search trees, be sure to check out the article below first.
What is Tree Traversal?
Tree traversal is visiting every node once in a tree. Compared to a list, array, stack, or queue where there is only one linear path to visit all nodes, a tree does not have a specific order in which you can accomplish this. There are two approaches when it comes to tree traversal:
- Depth-First Search — Exploring as far as possible down a branch before backtracking. Within depth-first search, there are three main orders; preOrder, postOrder, and inOrder. …
Create a Bounce Effect with Anime.js
I have been playing around with some JavaScript libraries recently and came across Anime.js. Anime.js is a lightweight JavaScript animation library that works with CSS properties, SVG, DOM attributes, and JavaScript Objects. In this article, let’s have a look at the library by creating a bounce effect and building a bouncing basketball app.
About
