CategoryReact

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…

July 29, 2020 — Ever tried interacting with a GraphQL server in a client-side application and felt like giving up even before getting anywhere? Ever declined an invitation to join a code base that requires working with GraphQL API because you had no idea? Ever felt like the only front-end engineer who hasn’t learned how to consume GraphQL APIs? If you answered yes to any of these questions, then this tutorial is for you. We’ll be taking a closer look at a few basics of GraphQL and Apollo Client, as well as how to work with both of them. By the end, we’ll have built a pet shop app that uses Apollo Client. Then, you can go on to build your next project. Read more…

July 23, 2020 — Styled components are “visual primitives for components”, and their goal is to give us a flexible way to style components. The result is a tight coupling between components and their styles. While the component-driven approach has ushered in a new frontier in the way we build web applications, it isn’t without its imperfections — one being its usability and scalability with CSS. This has given birth to a new way to construct and manage our styles in a component-specific manner, otherwise knows as CSS-in-JS. Read more…

July 16, 2020 — Since React was introduced, it has transformed the way front-end developers build web applications, and its virtual DOM is famous for effectively rendering components. In this tutorial, Shedrack Akintayo will discuss various methods of optimizing performance in React applications, and also the features of React that we can use to improve performance. Read more…

July 13, 2020 — There is a high possibility that a lot of components in your React application will have to make calls to an API to retrieve data that will be displayed to your users. It’s already possible to do that using the componentDidMount() lifecycle method, but with the introduction of Hooks, you can build a custom hook which will fetch and cache the data for you. That’s what Ademola Adegbuyi will cover with this tutorial. Read more…