Christian Nwamba

Articles & Tutorials

Build a Meal Ticketing App with GraphQL and Apollo React Hooks (
Nov 25, 2019
A meal ticket tracker allows you to issue digital meal tickets to attendees and not rely on paper tickets.
Create a Custom useFetch() React Hook (
Jun 05, 2019
The whole idea behind custom hooks is just so that we can extract component logic into reusable functions.
React Async for Declarative Data Fetching (
May 31, 2019
Generally, there are two ways of writing code: Imperatively/Declaratively and two ways of fetching Data: Synchronously/Asynchronously. We are more convenient with making requests imperatively using fetch or libraries like axios.
Animated Page Transitions in Gatsby Websites (
May 21, 2019
In this tutorial, we are going to look at a few through which we can add page transitions to our Gatsby applications to make the site a little bit more interesting and fun.
Performance Profiling Your React App (
May 06, 2019
In this article, we'll learn how to profile the performance of React apps using React Profiler, and leverage it to discover performance issues.
Use Artificial Intelligence to Suggest 1-5 Star Ratings (
Apr 25, 2019
A handful of products rely on reviews and star-ratings for product feedback. When customers are impressed or dissatisfied about our product, they come back to where it was purchased looking for a way to leave feedback.
    A Closer Look at React Memoize Hooks: useRef, useCallback, and useMemo (
    Apr 15, 2019
    The best way to understand what memoize hooks are is to expose ourselves to the problem space which these hooks solve. Starter hooks examples don’t expose these problems. They make hooks look approachable and straightforward— which makes complete sense.
    useRef vs useState: Should we re-render or not? (
    Apr 11, 2019
    Getting started with React is not the hard part, it’s understanding React’s lifecycle and how re-rendering works. With these new Hooks API’s, we have an extra layer of question marks regarding when and how reconciliation in the virtual DOM tree happens (aka re-rendering).
    Overview of Popular CSS-in-JS Libraries for React (
    Apr 10, 2019
    We thought React was crazy when it came with HTML-in-JS (JSX), but today, we are happy that revolution happened. It helped us build better components. Why not do so with CSS too? As a matter of fact, you can. Meet CSS-in-JS.
    Build Better React Forms with Formik (
    Feb 22, 2019
    Formik is an alternative and more efficient way of building React forms, keeping your React form logic organized and making testing, refactoring, and overall reasoning a breeze. We demonstrate how to leverage the features of Formik to build better React forms.
    Getting Started with Razzle: An Alternative SSR Framework for React (
    Feb 05, 2019
    Razzle is a tool that abstracts all complex configuration for SSR into a single dependency. Learn how to get started with Razzle in server-rendering React apps.
    Build Mobile-Friendly Web Apps with React Native Web (
    Jan 22, 2019
    Creating a multi-platform application is even easier with React Native Web, which lets us build and deploy to the web and mobile platforms alike.
    10 More Things You Didn’t Know About Create React App (
    Dec 03, 2018
    Learn new tips and tricks for Create React App to make you more productive with tooling and help you build your apps faster.
    How to Create a Gist Download Chrome Extension Using React (
    Oct 16, 2018
    Many tools are built to run in browsers today, as we spend most of our time there. Learn how to build a Github Gist Downloader Chrome extension with React.
      React vs ReasonReact (
      Sep 07, 2018
      This tutorial primarily focuses on React and ReasonReact and their benefits and disadvantages. If you don’t already know what ReasonReact is, it can be thought of as a version of React that is built on the statically-typed functional programming language, Reason. In the next sections, we will briefly introduce React and ReasonReact before exploring their pros and cons.
      Getting started with Reason React and BuckleScript (
      Aug 28, 2018
      This tutorial will introduce OCaml, Reason React, and BuckleScript, and explain their relevance. To wrap things up, we will take a look at a demo project built with ReasonReact.
      5 Most Common Dropdown Use Cases Solved with React Downshift (
      Jun 26, 2018
      Downshift is a library that helps you build simple, flexible, WAI-ARIA compliant enhanced input React components. Its major use case is for building autocomplete components but it can also be used to build dropdown components.
      Setup React Hot Loader in 10 minutes (
      Jun 22, 2018
      HMR, as the name implies, can replace modules without restarting the server and can easily be enabled with different bundlers.
        Time slice and Suspense API – What’s coming in React 17? (
        Jun 12, 2018
        In this tutorial, we will explore what’s new in React 17 along with Time Slice and Suspense API.
        5 React Motion use cases with examples (
        Jun 08, 2018
        React-motion is a library that makes it easy to create realistic animations within components using the laws of physics. An endless possibilities of realistic animations can be explored by simply specifying values for stiffness and dampness within one of the exported components.
        Testing SEO in React apps using Fetch as Google (
        May 30, 2018
        The general belief among SEO experts is that you should implement server-side rendering on your page. This way Google’s (the most popular search engine right now) web crawling bot can have access to your HTML code and index it.
        Component error handling in React using Error Boundaries (
        May 23, 2018
        In this tutorial, we will handle Component Error in React using Error Boundaries. Before React 16, errors emitted from a component’s rendering proved hard to handle.
        Implicit routing and server rendering for React apps using Next.js (
        May 15, 2018
        Server rendering is one of the trickiest assignments we get as developers working with UI libraries and frameworks. React being a UI library is not an exception. We will discuss the impact of server rendering and how we can achieve it for React-based apps.
        Conditional Routing with React Router v4 (
        May 08, 2018
        In this tutorial, we will see how to build a simple user dashboard application that serves different routes to users based on the size of their device screens.
        Working with the new React Context API (
        May 02, 2018
        This post explains the React Context API by showing off the old and new version, comparing them, and explaining how best to use the API.
        Build a Static Blog using GatsbyJS (
        Jan 31, 2018
        In this article, we will be building a static site using Gatsby.js.
        When (and when not) to use Redux (
        Jan 19, 2018
        In this post, I’m going to discuss Redux, how it’s deeply rooted in the concepts of functional programming, and how to decide if you need it in your application.
        Rendering CSS on Servers for Next.js (React) Apps (
        Jan 04, 2018
        While working with Next.js, I ran into an obscure problem. This had to do with how styles are rendered on the server, and it never struck till now that styles are also first class citizens for server-side rendering.
        Quick guide to Webpack bundle and code splitting with React (
        Nov 15, 2017
        You’re probably here because your app has grown to the point where forcing the user to download the entire thing as a single file seems cruel and unusual.
        Animating Route Transitions with React Router (
        Aug 23, 2017
        In this article, we’re going to create a React app with the new React Router (v4) and add some animations when navigating between views.

        Books & Guides

        Hands on Next.js (
        Apr 27, 2018
        A Practical Fullstack Book on Universal (Server) Rendering for React