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.

The author selected Creative Commons to receive a donation as part of the Write for DOnations program. Introduction> Introduction # React is a popular JavaScript framework for creating front-end applications. Originally created by Facebook, it has gained popularity by allowing developers to create fast applications using an intuitive programming paradigm that ties JavaScript with an HTML-like syntax known as JSX.

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!

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.

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!

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.

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.

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> 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.

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.

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.

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.

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> Introduction # Redux is a predictable state container for JavaScript apps. If Redux is new to you, we recommend looking at our introduction to Redux. In this article, you will learn how to persist user data using Redux in a React Native application.

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.

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.

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!

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.

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.

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.