React

Here is the list of most common CLI tools for React development:

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. Visit the following resources to learn more:

Components are the building blocks of React applications. They let us split the UI into independent, reusable pieces, and think about each piece in isolation. Visit the following resources to learn more:

Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree. Functional components can also have state which is managed using React hooks. Visit the following resources to learn more:

JSX stands for JavaScript XML. It allows writing HTML in JavaScript and converts the HTML tags into React elements. Visit the following resources to learn more:

Props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of component render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function). Visit the following resources to learn more:

In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them. Visit the following resources to learn more:

React has a powerful composition model, and it is recommended to use composition instead of inheritance to reuse code between components. Visit the following resources to learn more:

React follows a declarative approach to rendering components, which means that developers specify what a component should look like, and React takes care of rendering the component to the screen. This is in contrast to an imperative approach, where developers would write code to manually manipulate the DOM (Document Object Model) to update the UI. The virtual DOM (VDOM) is an important aspect of how React works. It is a lightweight in-memory representation of the DOM (Document Object Model), and it is used to optimize the rendering of components in a React application. Components are written as JavaScript classes or functions that define a render method. The render method returns a description of what the component should look like, using JSX syntax. When a component is rendered, React creates a virtual DOM (VDOM) representation of the component. The VDOM is a lightweight in-memory representation of the DOM, and it is used to optimize the rendering of components. React compares the VDOM representation of the component with the previous VDOM representation (if it exists). If there are differences between the two VDOMs, React calculates the minimum number of DOM updates needed to bring the actual DOM into line with the new VDOM. React updates the actual DOM with the minimum number of DOM updates needed to reflect the changes in the VDOM. This process is known as reconciliation, and it is an important aspect of how React works. By using a declarative approach and a VDOM, React is able to optimize the rendering of components and improve the performance of web applications. Visit the following resources to learn more:

React components have a lifecycle consisting of three phases: Mounting, Updating, and Unmounting along with several “lifecycle methods” that you can override to run code at particular times in the process. It is not recommended to use lifecycle methods manually. Instead, use the useEffect hook with functional components. Visit the following resources to learn more:

When you render lists in React, you can use the key prop to specify a unique key for each item. This key is used to identify which item to update when you want to update a specific item. Visit the following resources to learn more:

The term ‘render props’ refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. Visit the following resources to learn more:

Refs provide a way to access DOM nodes or React elements created in the render method. In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch. Visit the following resources to learn more:

Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences: React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string. Visit the following resources to learn more:

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component. Higher-order components are not commonly used in modern React code. In order to reuse logic, React hooks are mainly used now. Visit the following resources to learn more:

Hooks were introduced in React 16.8 and they let us use React’s features-like managing your component’s state and or performing an after effect when certain changes occur in state(s) without writing a class. Visit the following resources to learn more:

useEffect is a special hook that lets you run side effects in React. It is similar to componentDidMount and componentDidUpdate, but it only runs when the component (or some of its props) changes and during the initial mount. Visit the following resources to learn more:

Building your own Hooks lets you extract component logic into reusable functions. Visit the following resources to learn more:

useCallback is a React hook that returns a memoized version of a callback function. It’s used to optimize performance by preventing unnecessary re-renders. Specifically, it helps avoid recreating functions when their dependencies haven’t changed, which can be useful when passing callbacks to child components that rely on referential equality to prevent re-rendering. Visit the following resources to learn more:

useRef is a React hook that provides a way to create a mutable reference that persists across component re-renders. It stores a value that doesn’t cause re-renders when it changes. Visit the following resources to learn more:

useMemo is a React hook that memoizes the result of a function. It is used to optimize performance by caching the result of a function and returning the cached result when the inputs to the function have not changed. Learn more from the following resources:

useReducer: An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.) Learn more from the following resources:

The useContext Hook lets us share data between components without having to pass props down through every level of the component tree. This is particularly useful when many components need to access the same data or when components are deeply nested. Visit the following resources to learn more:

useState hook is used to manage the state of a component in functional components. Calling useState returns an array with two elements: the current state value and a function to update the state. Visit the following resources to learn more:

To fully leverage the capabilities of React Hooks, it is crucial to adopt best practices that not only enhance code readability but also optimize performance. By adhering to these practices, developers can create cleaner, more maintainable components that make the most of React’s powerful features, leading to a more efficient and enjoyable development experience. Learn more from the following resources:

Routing is an essential concept in Single Page Applications (SPA). When your application is divided into separated logical sections, and all of them are under their own URL, your users can easily share links among each other. Visit the following resources to learn more:

TanStack Router is a powerful router for building React applications, offering a range of advanced features to streamline development. Learn more from the following resources:

React router is the most famous library when it comes to implementing routing in React applications. Visit the following resources to learn more:

Application state management is the process of maintaining knowledge of an application’s inputs across multiple related data flows that form a complete business transaction — or a session — to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs — saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session. Visit the following resources to learn more:

Context provides a way to pass data through the component tree without having to pass props down manually at every level. In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree. Visit the following resources to learn more:

Zustand is a small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn’t boilerplatey or opinionated. Zustand is often used as an alternative to other state management libraries, such as Redux and MobX, because of its simplicity and small size. It is particularly well-suited for small to medium-sized applications, where the complexity of larger state management libraries is not required. Visit the following resources to learn more:

Jotai takes an atomic approach to global React state management. Build state by combining atoms and renders are automatically optimized based on atom dependency. This solves the extra re-render issue of React context, eliminates the need for memoization, and provides a similar developer experience to signals while maintaining a declarative programming model. It scales from a simple useState replacement to an enterprise TypeScript application with complex requirements. Plus there are plenty of utilities and extensions to help you along the way!

While “CSS in JS” is the most predominant way of styling modern frontend applications, there are several different ways to style your React applications whether it is vanilla CSS, CSS Modules, or CSS in JS etc and each has several frameworks available. Visit the following resources to learn more:

Headless component libraries have some powerful state, logic and data management tools that do not enforce any UI structure. Consequently, developers are able to build custom UI components with unique styles but that still benefit from strong reusable logics. This kind of library simplifies complex behaviors and accessibility issues in outdoor environments allowing you to create innovative interfaces. With headless components, developers keep code clean and maintainable as a result of the reusability aspect inherent in these, this also guarantees efficient and accessible components enhancing application quality. Visit the following resources to learn more:

CSS Framework that provides atomic CSS classes to help you style components e.g. flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. Visit the following resources to learn more:

React component libraries are collections of pre-built, reusable components that can be used to speed up the development process. They can be styled using CSS in various ways, including traditional CSS files, CSS modules, and CSS-in-JS solutions like styled-components. Visit the following resources to learn more:

Panda CSS is CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience. Visit the following resources to learn more:

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. Visit the following resources to learn more:

Material UI is an open-source React component library that implements Google’s Material Design. It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box, and features a suite of customization options that make it easy to implement your own custom design system on top of our components.

Shadcn is an open-source framework providing pre-built, accessible, and customizable UI components for rapid web application development. It offers a streamlined approach to construct modern user interfaces. Visit the following resources to learn more:

CSS files in which all class names and animation names are scoped locally by default. Visit the following resources to learn more:

Radix UI is an open-source library designed to make it easier to create accessible and customizable User Interface (UI) components in React. It provides developers with a range of unstyled, fully accessible primitives, giving them complete control over the appearance and behavior of their UI elements. Visit the following resources to learn more:

React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze. Visit the following resources to learn more:

It is a modern and versatile user interface framework designed to streamline the development of responsive and accessible web applications. It provides a comprehensive set of components and tools that simplify the process of building user interfaces, allowing developers to focus on functionality and design. With a strong emphasis on flexibility and ease of use, Ark UI enables rapid prototyping and scalable solutions, ensuring a consistent and polished user experience across various devices and platforms. Its modular architecture and extensive documentation make it an excellent choice for developers looking to enhance productivity and maintain high standards in their UI design. Visit the following resources to learn more:

APIs, short for Application Programming Interfaces, are software-to-software interfaces. Meaning, they allow different applications to talk to each other and exchange information or functionality. This allows businesses to access another business’s data, piece of code, software, or services in order to extend the functionality of their own products — all while saving time and money. There are several options available to make API calls from your React.js applications. Visit the following resources to learn more:

Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services. Visit the following resources to learn more:

Relay is a JavaScript client used in the browser to fetch GraphQL data. It’s a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions. Visit the following resources to learn more:

urql (Universal React Query Library) is a library for managing GraphQL data in React applications. It is developed and maintained by Formidable Labs and is available as open-source software. urql is designed to be easy to use and flexible, with a simple API for performing GraphQL queries and mutations. It is based on the concept of a client, which is used to manage the GraphQL data for an application. The client provides a set of utilities and APIs for managing GraphQL data, including: executeQuery: A utility for executing a GraphQL query. executeMutation: A utility for executing a GraphQL mutation. useQuery: A hook for executing a GraphQL query and accessing the result in a component. useMutation: A hook for executing a GraphQL mutation and accessing the result in a component. urql is often used as an alternative to other GraphQL libraries, such as Apollo Client, because of its simplicity and lightweight size. It is particularly well-suited for small to medium-sized React applications where the complexity of other GraphQL libraries may not be required. Visit the following resources to learn more:

SWR is a React Hooks library for data fetching. The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the request (revalidate), and finally comes with the up-to-date data again. With just one hook, you can significantly simplify the data fetching logic in your project. Visit the following resources to learn more:

Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. Visit the following resources to learn more:

The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests. Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers. Visit the following resources to learn more:

RTK Query is a data fetching and caching tool that is included in the Redux Toolkit package. It is designed to simplify common use cases for fetching data, including caching, polling, and invalidation. Visit the following resources to learn more:

A key to building software that meets requirements without defects is testing. Software testing helps developers know they are building the right software. When tests are run as part of the development process (often with continuous integration tools), they build confidence and prevent regressions in the code. Visit the following resources to learn more:

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more! Visit the following resources to learn more:

Vitest is a fast Vite-native unit test framework with out-of-box ESM, TypeScript and JSX support. Works on React, Vue, Svelte and more projects created with Vite Visit the following resources to learn more:

The React Testing Library is a very lightweight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you. Visit the following resources to learn more:

Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework. Visit the following resources to learn more:

Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari.Playwright leverages the DevTools protocol to write powerful, stable automated tests.Playwright can actually see into and control the browser rather than relying on a middle translation layer, it allows for the simulation of more insightful and relevant user scenarios. Visit the following resources to learn more:

Server-side rendering (SSR) is a technique for rendering a JavaScript application on the server, rather than in the browser. This can improve the performance and user experience of a web application, as the initial render of the application is done on the server and the content is sent to the browser as a fully-rendered HTML page. There are several frameworks and libraries available for server-side rendering React applications, most common being Next.js and Remix: Visit the following resources to learn more:

Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites. Visit the following resources to learn more:

Astro is the web framework for building content-driven websites like blogs, marketing, and e-commerce. Astro is best-known for pioneering a new frontend architecture to reduce JavaScript overhead and complexity compared to other frameworks. If you need a website that loads fast and has great SEO, then Astro is for you. Visit the following resources to learn more:

There used to be Remix in this list but they announced to merge Remix into react-router after v7. Visit the following resources to learn more:

Although you can build forms using vanilla React, it normally requires a lot of boilerplate code. This is because the form is built using a combination of state and props. To make it easier to manage forms, we use some sort of library. Visit the following resources to learn more:

React hook form is an opensource form library for react. Performant, flexible and extensible forms with easy-to-use validation. Visit the following resources to learn more:

Formik is another famous opensource form library that helps with getting values in and out of form state, validation and error messages, and handling form submissions. Visit the following resources to learn more:

Typescript provides a static type system that helps you in avoiding mistakes during the development and provides other features (e.g. IDE support) that help you improve your productivity. One thing you should note is that TypeScript can only help you avoid mistakes during the development. We can’t rely on it to validate a client’s input. Zod is a powerful validation library that allows us to validate: form input, local storage, API contracts and much more using their typesafe implementation. Visit the following resources to learn more:

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. Visit the following resources to learn more:

Zod is a TypeScript-first schema declaration and validation library. I’m using the term “schema” to broadly refer to any data type, from a simple string to a complex nested object. Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicate type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type. It’s easy to compose simpler types into complex data structures. Visit the following resources to learn more:

Animation in React can be achieved using various methods, such as CSS transitions, keyframes, or libraries like react-spring, framer-motion, and GSAP (GreenSock Animation Platform). CSS transitions are ideal for simple animations, where you can toggle classes or manipulate inline styles to create smooth transitions. For more complex and interactive animations, libraries like react-spring provide a declarative approach, allowing you to create animations by defining spring physics or interpolating values. framer-motion offers a rich API to handle complex animations, gestures, and even layout transitions with ease. GSAP is another powerful library that excels at creating high-performance animations, offering fine-grained control over every aspect of the animation process. These tools integrate seamlessly with React’s component-driven architecture, enabling you to create responsive and dynamic user interfaces. Visit the following resources to learn more:

The react-dom/server APIs let you render React components to HTML on the server. These APIs are only used on the server at the top level of your app to generate the initial HTML. A framework may call them for you. Most of your components don’t need to import or use them. Learn more from the following resources:

Framer Motion is a popular open-source motion library for React that allows developers to create sophisticated animations and interactions with ease. It is designed to be simple to use yet powerful, providing a rich set of tools to animate elements in a declarative way. It powers the amazing animations and interactions in Framer, the web builder for creative pros. Zero code, maximum speed. Visit the following resources to learn more:

React Spring is a popular animation library for React that leverages the principles of spring physics to create smooth, natural-looking animations. Unlike traditional animation libraries that rely on keyframes and linear transitions, React Spring uses spring-based physics to produce fluid and realistic animations that can dynamically respond to user interactions and state changes. Visit the following resources to learn more:

GSAP (GreenSock Animation Platform) is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in every major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects…anything JavaScript can touch! Visit the following resources to learn more:

React Suspense is a feature in React that allows components to “suspend” rendering while they are waiting for something to happen, such as data to be fetched from an API or an image to be loaded. Suspense allows developers to create a more seamless user experience by rendering a placeholder or fallback component while the component is waiting for the required data to be available. Here is a general overview of how React Suspense works: A component that uses Suspense wraps a component that may need to “suspend” rendering in a Suspense component. The wrapped component throws a promise when it needs to suspend rendering. The Suspense component catches the promise and renders a fallback component while the promise is pending. When the promise resolves, the wrapped component is rendered with the required data. Visit the following resources to learn more:

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Visit the following resources to learn more:

In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to emit cryptic errors on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them. Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. Visit the following resources to learn more:

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities. Visit the following resources to learn more:

MobX is a powerful and intuitive state management library that enhances application scalability and simplicity through its use of functional reactive programming. The core philosophy of MobX is rooted in straightforwardness and efficiency. Developers can write minimalistic, boilerplate-free code that clearly expresses their intentions. For instance, updating a record field is as simple as performing a standard JavaScript assignment, with MobX automatically detecting changes and propagating them throughout the application. This eliminates the need for specialized tools in asynchronous data processes.