React State Balancing: A Guide to State Management
As React apps grow, managing shared and app-wide state can become challenging. Dedicated state management libraries help tackle these complexities. …
Read Article →React
24 articles about react development, tools, and best practices
React + Node: Beginner's Guide to Full Stack Dev
React excels at building fast, dynamic frontends. Node.js shines for server-side APIs and microservices. Together, they make a powerful stack for full …
Read Article →Optimal React Patterns: Beginner's Guide
As with any framework, React comes with its own set of best practices and optimal patterns. Let’s explore some tips for writing robust React …
Read Article →Debugging React Apps: Beginner's Guide
Bugs are inevitable in complex React applications. Thankfully, React provides great tools to squash bugs quickly.
Let’s look at some key …
Read Article →Advanced React Patterns: Compound Components & More
As React apps scale, you’ll want to structure components for greater reusability and composability. Here are some powerful React patterns: …
Read Article →React Animation Guide: Libraries and Techniques
Animation brings interfaces to life. Thankfully, React has great open source libraries for animation. Let’s compare some popular options:
Framer …
Read Article →Testing React Apps: Beginner's Guide to TDD
Testing is crucial for ensuring React apps are stable and bug-free. Popular tools like Jest and React Testing Library make testing React components …
Read Article →Data Fetched Fast - A Beginner's Guide to React Query
Fetching data in React often means using stale state and complex caching logic.
React Query simplifies data fetching with powerful features like …
Read Article →Forms Simplified, A Beginner's Guide to Managing React Forms
Forms are a common need for many React apps. However, managing form state and validation can be tricky.
Thankfully, React provides great libraries to …
Read Article →Optimizing React Performance: Beginner's Guide
As React apps grow, you may notice performance starting to lag - sluggish interactions, choppy animations, janky scrolling.
Luckily, there are many …
Read Article →State Management 101 - A Beginner's Guide to React State
State management is a crucial concept in React. State allows components to dynamically update UI based on data changes.
However, managing state …
Read Article →Accessible React Apps: Beginner's Guide to Accessibility
Accessibility is an important consideration when building modern web apps. React provides useful tools to make accessible, inclusive products. …
Read Article →Mystery Boxes - A Beginner's Guide to React Fragments
When returning multiple elements from a component’s render method, they must be wrapped in a single parent DOM node:
// Needs a <div> …Unidirectional Data Flow in React: Beginner's Guide
A key advantage of React is its unidirectional data flow. This makes the flow of data predictable, and helps avoid unexpected side effects from data …
Read Article →Event Handling in React: Beginner's Guide
Responding to user events is a crucial part of building interactive UIs. In React, you can pass event handlers as props to components to run code when …
Read Article →Hooked on React - A Beginner's Guide to React Hooks
When React was first released, class components were the standard way to build complex UIs. However, classes can be cumbersome for some use cases. …
Read Article →Lifting State in React: Beginner's Guide
As React apps grow in complexity, managing shared state between components can become tricky. Oftentimes, several child components may need to reflect …
Read Article →Looping in JSX with React Keys: Beginner's Guide
Looping over arrays to render lists of elements is a common need in React apps. However, there are some special considerations when rendering lists in …
Read Article →Conditional Rendering in React
In React apps, you’ll often need to render different UI components conditionally based on certain state. For example, showing a login form if a …
Read Article →Passing Data Between React Components with Props
One of React’s core concepts is reusability through composable components. Components allow splitting complex UI into separate, reusable pieces. …
Read Article →How to Deploy React App to S3 and CloudFront
If you would like to deploy a React App to AWS S3 and AWS CloudFront, then you can follow this guide.
The following solution creates a React App and …
Read Article →[Solved] export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’
In react-router-dom v6, Switch is replaced by routes Routes.
You need to update the import from:
import { Switch, Route } from …How to declare a global variable in React?
If you need to declare a global variable in React, then you can do the following:
Create a file called config.js
module.exports = global.config = { …How to Increment/Decrement a value in React/NextJS
Use the following code block to get started:
function GetCount() {
const [count, setCount] = useState(1);
const incrementCounter = () => { …