CategoryReact

September 17, 2020 — Among others, Next.js has dubbed itself: The React Framework for Static Websites. But just like every other framework whose goal is to help you build what matters by abstracting common, redundant tasks, you’re often required to learn something new and opinionated. With Next.js, one of the things you need to know is how to integrate different CSS methods with its API, and that is the focus of this tutorial. Read more…

September 14, 2020 — GreenSock Animation Platform (GSAP) is a set JavaScript functions that let you tween a value/attribute/CSS property over time and insert these tweens into a timeline for more complex animations. In this article, Blessing explains how GSAP plays well with the React library by integrating its functions into a React component in building an example landing page with a variety of animations. Read more…

September 9, 2020 — In this guide, Ibrahima Ndaw will be looking at Next.js, a popular React framework that offers a great developer experience and ships with all of the features you need for production. We will also build a blog, step by step, using Next.js and MDX. Finally, we’ll cover why you would opt for Next.js instead of “vanilla” React and alternatives such as Gatsby. Read more…

September 4, 2020 — A component library helps to keep a design consistent across multiple projects. It ensures consistency because any changes made will propagate across the projects that make use of it. In this tutorial, Ademola Adegbuyi will show you how to build a component library, using Emotion in React to resolve inconsistencies. At the end of this piece, you should be able to create a component library that fits whatever use case you have in mind! Read more…

September 1, 2020 — In this article, Abdulazeez Adeshina will show you what storybook is about and how to use it to build and test React components by building a simple application. He’ll start with a basic example that shows how to work with storybook, then will go ahead to create a storybook for a Table component which will hold students’ data. You should have basic knowledge of React and the use of NPM before proceeding with this article, as you’ll be building a handful of React components. Read more…

August 26, 2020 — MobX is a battle-tested library that makes state management simple and scalable by transparently applying functional reactive programming. It treats your application like a spreadsheet, and it’s one of the many state management tools available to React developers. In this tutorial, Fortune Ikechi is going to show you how to use MobX to manage state in React Native applications by building a React Native application to see how this is done. Read more…

August 20, 2020 — Ionic Framework provides first-class support for building fast and mobile-optimized applications for any platform using React. In this tutorial, Jerry Navi will show you how to build forms using Ionic React’s UI input components in this tutorial. You will also learn how to use a library to help with detecting form input changes and responding to validation rules. Finally, you will learn to make your forms accessible to screen readers by adding helpful text to your inputs’ ARIA attributes. Read more…

August 17, 2020 — Props and PropTypes are an important mechanism for passing information between React components, and we’re going to look into them in great detail here. This tutorial will introduce you to the details about props, passing and accessing props, and passing information to any component using props. However, it’s always a good practice to validate the data we are getting through props by using PropTypes. So, you will also learn how to integrate PropTypes in React. Read more…

August 6, 2020 — Showcasing new product features to users or familiarizing them with some UI functionality in a web app can get tedious, especially when you want users to see a lot of things. In the following guide, BLessing Krofegha will show you how to proactively use product tours to onboard users into a new and complex UX, and how to familiarize them with UI functionality without boring them, using a typical React app. Read more…

August 3, 2020 — Redux is a robust state-management library for single-page JavaScript apps. It is described on the official documentation as a predictable state container for Javascript applications and it’s fairly simple to learn the concepts and implement Redux in a simple app. Going from a simple counter app to a real-world app, however, can be quite the jump. Read more…