How to Build a Tabs Component with React
Introduction> Introduction # If you’ve ever built a web app, there’s a good chance you’ve built a tabbed document interface at one point or another. Tabs allow you to break up complex interfaces into manageable subsections that a user can quickly switch between.
How To Set Up a React Project with Create React App
5 Tips to Improve the Performance of Your React Apps
Has your React app been feeling kinda sluggish? Are you afraid of turning on the “paint flash” in Chrome DevTools because of what you might see? Try out these 5 performance tips!
How To Build a CRUD App with React Hooks and the Context API
Introduction> Introduction # This article will be covering the Context API (introduced in version 16.3) and React hooks (introduced in version 16.8). The introduction of the Context API solves one major problem: prop drilling.
How To Use Error Boundaries in React
Introduction> Introduction # Error Boundaries were introduced in React v16 as a way to catch tricky errors that occur during the render phase. In the past, this would have caused the app to unmount completely, and the user would just see a blank web page, which is not ideal!
How to Create a Countdown Timer with React Hooks
Introduction> Introduction # In this tutorial, you will create a countdown timer using React hooks to update state and manage side effects in a React component. With React hooks, you can create cleaner code, reusable logic between components, and update state without classes.
How To Implement Infinite Scroll in React
Introduction> Introduction # Infinite scrolling is when a user reaches the bottom of a page and new content is fetched and loaded so the user can continue to scroll in a relatively seamless experience.
How To Work with Context API in React and React Hooks
Introduction> Introduction # In this article, you will examine how to implement Context API and the React Hook useContext() in your React project. The Context API is a React structure that allows you to share specific data from all levels of your application and aids in solving prop-drilling.
Introduction to Bulma CSS with React
Tutorials CSS React
Introduction> Introduction # Bulma is a CSS framework that has helpers, elements, and components. You can use the Bulma classes and HTML structures for dependable and expandable designs in your projects.
Understanding Constructors with React Components
The constructor is a method that’s automatically called during the creation of an object from a class. It can handle your initial setup stuff like defaulting some properties of the object, or sanity checking the arguments that were passed in.
How To Create Searchable, Async Dropdowns with React-Select
Introduction> Introduction # HTML provides a <select> element that allows end-users to choose from a dropdown menu of <option>s. However, there may be situations where a select menu can benefit from additional user experience niceties, like allowing a user to filter available choices.
How To Build an Autocomplete Component in React
Introduction> Introduction # Autocomplete is a feature in which an input field suggests a word based on user input. This helps improve the user experience in your application, such as cases where a search is necessary.
How To Use Routing with React Navigation in React Native
Introduction> Introduction # React Navigation is a popular library for routing and navigation in a React Native application. This library helps solve the problem of navigating between multiple screens and sharing data between them.
Introduction to Using Redux in a React Native App
How To Implement a Modal Component in React
Introduction> Introduction # Modals are separate windows within an application, most often as a dialog box. They are a common user interface pattern for providing information or requiring confirmation. In this tutorial you will learn about how to implement a modal component in your React project.
How to Enable Server-Side Rendering for a React App
Warning: This tutorial is intended to be a brief introduction to ReactDOM.hydrate() and ReactDOMServer.rendertoString(). It is not intended for production use. Alternatively, Next.js offers a modern approach to creating static and server-rendered applications built with React.
A Sneak Peek at React Router v6
At the time of this writing, React Router v6 is still in alpha, but the time is about right to start playing with it and exploring what’s to come. This guide will give you a peek at the new features/changes!
Using TypeScript with React
Introduction> Introduction # TypeScript is awesome. So is React. Let’s use them both together! Using TypeScript allows us to get the benefits of IntelliSense, as well as the ability to further reason about our code.
How To Use Font Awesome 5 with React
Introduction> Introduction # Font Awesome is a toolkit for websites that provides icons and social logos. React is a coding library that is used for creating user interfaces. While the Font Awesome team has made a React component to promote integration, there are some fundamentals to understand about Font Awesome 5 and how it is structured.
Understanding the React useMemo Hook
Introduction> Introduction # With the release of React 16.8, there are many useful hooks you can now use in your React applications. One of the built-in Hooks that was introduced in 16.