Your experience of developing apps in React greatly depends on utilities, packages, and generally tools you choose. React is considered one of the three main JavaScript frameworks. In reality, it’s only a library that leaves a lot of room for improvisation. React developers have the luxury to choose their own preferred utilities and supporting libraries to build fully functional web applications with React.
In this article, I wanted to share with you my recipe for what libraries and utilities to use to have fun building applications in React. These supporting libraries and utilities will remove a lot of headaches that you might encounter without them. Simpler development process leads to quicker development as well.
Next.js for general web development
Most web applications are built using a combination of technologies. They are not, and don’t need to be built entirely in React. Next is a great option for building different types of applications – from web applications to regular blogs. There are many alternatives to React, but they’re not as useful for multiple use-cases.
Next provides every functionality you could possibly need. It helps you create API endpoints to use in your web application. It also supports static site generation to get the best of both worlds – client-side and server-side rendering. This is useful for SEO purposes, because SPAs built solely with React are difficult to index in search engines.
Next also helps with TypeScript integration to ensure consistent development process. It allows you to include custom fonts and create routes for navigating the app. React lacks many of these features, and Next.js fills the necessary role. However, Next still lacks some essential features like authentication. You can, however, install an additional library like ‘next-auth’ to add this feature.
Next.js is fairly easy to learn. Following a simple YouTube tutorial should be enough to get you up and running. If there’s still something you don’t know, you can refer to documentation for developing apps in Next.js.
Use React Query for fetching external data
Most React apps need to load external data. Usually data comes from the external API. There are several libraries to facilitate this process. React Query is the main library that can help you achieve this goal.
Sometimes asynchronous operations like fetching external data require precision and writing too many lines of code. Libraries still require you to pay attention to avoid bugs, but they still simplify the process. React Query provides hooks like useQuery and useMutation that help you to load data from a specified URL for the API.
The standard approach is to fetch data inside the useEffect() hook, which replaces lifecycle methods in class components. In particular, useEffect() with an empty dependency array works like componentDidMount. Fetching data so many times is inefficient. React-Query solves this problem so external data loads only when it’s necessary.
Create-react-app for prototyping
Setting up a React project is not an easy task. For example, React developers use JSX to define web application layouts. This requires Babbel and a number of other tools to compile JSX into low-level React API. Create-React-App is a tool that allows beginner React developers to create a starter React project with one command. Installing the package provides a number of other useful features, such as hot reloading and full TypeScript support.
However, you still need to install additional libraries like React-Router to define custom dynamic routes for React apps. This library also provides a number of hooks and custom components to simplify the development process. For example, the useNavigate hook can be used to redirect user to another page in React. The same library also provides custom Navigate component, with a to prop where users can specify the destination. Rendering the component will perform a redirect.
Material UI
This library is a collection of UI elements ready to use in your apps. Components are designed according to principles laid out in Material Design principles laid out by Google.
From buttons to cards and carousels, Material UI provides building blocks for building a responsive web application. Developers can use props to implement advanced features and even customize their pre-defined appearance.
Packages for building forms
React community of developers have created several great libraries for building forms in React. React Hook Form, in particular, is the most popular library for building high performance forms with advanced features. You can use it to avoid unnecessary re-renders and writing extra code. Libraries like Yup allow you to set rules for validation. Controlled inputs and event handlers allow you to dynamically validate input fields.
classnames()
Finally, conditional styling is a very important for building user-friendly interfaces with React. Visuals like the element color or background color can be very useful to communicate messages to users. For example, a red text signifies an error. Using semantics to communicate a message can be useful for form validation and similar use cases.
Classnames() function allows you to set className values based on a condition. Argument to the function should be an object with key-value pairs, where key is a className value and its value is a condition that needs to be met.
The classnames() function can help you add multiple className values for advanced styling. Or setting a single className value based on multiple conditions.
Whatever you choose to do, classnames() function is a great tool for conditionally changing the appearance of elements in the app. Instead of using ternary operators or string interpolation (example), you can use classnames() utility instead.
Summary
In this article, we discussed several tools you can use to simplify web development process with React. Hopefully these tools can help you save some time and money on building prototypes or other simple applications in React.
Top comments (0)