Category: RalphM

React Lifecycle Reference Guide

This is a reference guide to help developers quickly figure out which lifecycle method will best fit a solution they’re currently working on in React. constructor(props) The constructor for a React component is the first method that gets called. This is where you should initiate state. You should ensure you execu...

An Introduction to JSX

When React was first introduced, one of the features that caught most people’s attention (and drew the most criticism) was JSX. If you’re learning React, or have ever seen any code examples, you probably did a double-take at the syntax. What is this strange amalgamation of HTML and JavaScript? Is this even ...

Using Preact as a React Alternative

Preact is an implementation of the virtual DOM component paradigm just like React and many other similar libraries. Unlike React, it’s only 3KB in size, and it also outperforms it in terms of speed. It’s created by Jason Miller and available under the well-known permissive and open-source MIT license. Why U...

Extracting Website Data and Creating APIs with WrapAPI

Today, almost all services we use have some sort of API. Some web applications are even built from API points alone, being passed to some kind of front-end view. If you’re a consumer of a service that provides an API, you’ll sometimes need more features or find limits to what the API can offer. In this arti...

Conditionally Applying a CSS Class in Vue.js

There are times you need to change an element’s CSS classes at runtime. But when changing classes, it’s sometimes best to apply style details conditionally. For example, imagine your view has a pager. Pagers are often used to navigate larger sets of items. When navigating, it can be helpful to show the user...

React Router v4: The Complete Guide

React Router is the de facto standard routing library for React. When you need to navigate through a React application with multiple views, you’ll need a router to manage the URLs. React Router takes care of that, keeping your application UI and the URL in sync. This tutorial introduces you to React Router v4 and...

Getting Started with Redux

A typical web application is usually composed of several UI components that share data. Often, multiple components are tasked with the responsibility of displaying different properties of the same object. This object represents state which can change at any time. Keeping state consistent among multiple components can b...

Sharing React Components Easily with Bit

This is the age of components. Frameworks built for UI components, such as React, enable us to split our UI into individual, reusable pieces that can be worked with in isolation. In many ways, React components are not that different from other encapsulated code functionalities. They can get defined inputs (usually “p...

Writing Server-rendered React Apps with Next.js

The dust has settled a bit as far as the JavaScript front-end ecosystem is considered. React has arguably the biggest mindshare at this point, but has a lot of bells and whistles you need to get comfortable with. Vue offers a considerably simpler alternative. And then there’s Angular/Ember which, while still popular,...

To Redux or Not: the Art of Structuring State in React Apps

One common trend I find among most Redux developers is a hatred towards setState(). A lot of us (yes, I’ve fallen into this trap many times before) flinch at the sight of setState() and try to keep all the data in our Redux store. But, as the complexity of your application grows, this poses several challenges. In...