CategoryReact

June 1, 2020 — In this article, Chidi Orji will explore the concept of error boundaries in a React application. You’ll work through an example app to see how we can use error boundaries to deliver a better app experience. Finally, you’ll integrate Sentry into our error boundary for realtime error reporting. The only prerequisite is that you have some familiarity with React class components. Let’s dig in! Read more…

May 25, 2020 — Tailwind is a popular utility-first CSS framework that provides low-level class names to web developers. It does not have any JavaScript and works well with existing frameworks such as React, Vue, Angular, Ember, and others. Whilst this is positive, it can be confusing for new developers to understand how to integrate Tailwind in their applications. In this article, Tilo Mitra will explore ways to build reusable React components using Tailwind. Read more…

May 21, 2020 — In this article, Kelvin Omereshone introduces you to machines, an open standard for JavaScript functions. At the end of this article, you should be familiar with what machines are and how to implement them. There is no special prerequisite for this article. If you can write a JavaScript function, then you’ll be able to follow along. With all that said, let’s dive in. Read more…

May 18, 2020 — The social media company released React Native, and it quickly became the most popular framework for building mobile apps with JavaScript. In this article, based on his experience with creating a GPS and navigation application, Chafik Gharbi will show you how to create a mobile app using Expo and Firebase services such as Firestore, Firebase functions and Expo push notifications. Read more…

May 14, 2020 — React is a fantastic JavaScript library for building rich user interfaces. It provides a great component abstraction for organizing your interfaces into well-functioning code, but what about the look and feel of the app? There are various ways of styling React components from using stylesheets to using external styling libraries.  In this article, Shedrack Akintayo will explain the cons and pros of these styling strategies, and by the end of this tutorial, you’ll know all about styling React components and how they work along with the various methods that can be used for styling these components. Read more…

May 11, 2020 — In this article, Blessing Krofegha introduces Typescript, a superscript of JavaScript that presents the static type feature for spotting common errors as developers codes, which enhances performance, hence results in robust enterprise applications. You’ll also learn how to efficiently set up TypeScript in a React Project as we build a Money Heist Episode Picker App, exploring TypeScript, React hooks such as useReducer, useContext and Reach Router. Read more…

May 4, 2020 — Mobile app development using hybrid frameworks has come a long way since initial release in 2008. With the improvements being made to the JavaScript engine and improved processing power available to mobile phones, the major concern people had when they considered developing their apps using the hybrid approach — namely, performance — has all but been eliminated, and cross-platform frameworks have seen a surge in popularity.

We’re going to build a mobile application that pulls data from the Marvel Comics API; the data will show Marvel comics and you’ll be able to choose your favorites. At the end, we’ll create a native build of the project on Android. Read more…

April 28, 2020 — Light mode is a convention in most web and mobile apps. However, in modern development, we have seen how dark mode, which displays light text and interface elements on a dark background, is quickly becoming a user preference. In this article, Blessing Krofegha will show you how to efficiently implement dark mode in a React app on a simple web page, using the styled-components library and leveraging some React features like hooks. We will also discuss the pros and cons of dark mode and why it should be adopted. Read more…

April 20, 2020 — Skeleton screens offer a better user experience by reducing loading-time frustration. By focusing on progress instead of wait times, it create the illusion for users that information will be incrementally displayed on the screen. In this tutorial, Blessing Krofegha will show you what a skeleton screen UI is and some types of skeleton screen libraries, along with their pros and cons. We’ll build a YouTube-like skeleton screen UI using React Loading Skeleton. Then, you can experiment on your own with the skeleton screen React package of your choice. Read more…

April 15, 2020 — React provides a few built-in Hooks like useState. You can also create your own Hooks to reuse stateful behavior between different components. The example below shows a counter whose state is managed using the useState() hook. Each time you click on the button, we make use of setCount() to update the value of count by 1. In this article, Adeneye David Abiodun covers the rules of React Hooks and how to effectively start using them in your projects. Please note that in order to follow this article in detail, you will need to know how to use React Hooks. Read more…