All about React

Articles about structuring React apps are always popular; this one breaks the idea down to five steps from the simplest of apps to more complex ones. Bulletproof React is worth a look too for something broader.

From Kent C Dodds of Epic React fame comes this part cheat sheet, part succinct reminder of some of the new things you can do in React 19, along with (very) brief code examples.

React, with its addition of Server Components and Server Actions, is evolving into a full-stack framework. Once the most popular frontend framework, it has now successfully bridged the gap between frontend and backend to reign over both sides of the chasm.

A major announcement at this week’s React Conf was the open sourcing of React’s experimental compiler, aimed at optimizing React code at build time. Additionally, a React Compiler Playground has been created for experimentation.

Use a Google Map as a fully controlled reactive component and utilize all the other features of the Google Maps JavaScript API.

Alhought, most probably, the React Complier won't be released in React 19, we'll get it sooner or later. The article describes the problems that the React Complier is going to solve.

Explore the future of conversational AI and learn how to build context-aware AI apps using NLUX and React JS.

A comprehensive guide for beginners on how React rendering works.

Discover how to replace your numerous useEffect statements with a more efficient and readable alternative.

Meta open-sourced their styling solution, which powers Facebook, Instagram, Threads, and WhatsApp.

Server Actions are now in React Canary, ready for frameworks and libraries to adopt! Server Actions are functions created alongside your components that run on the server for tasks like data mutations.

Yalc simplifies the process of working with and ‘publishing’ packages entirely locally, allowing you to try things out without publishing to a remote, and potentially public registry.

In this guide, we’ll show you some of the most useful practices and patterns for working with React.js. We’ll cover things like how to structure your folders, separate concerns, and design components. These tips will make your life as a developer a whole lot easier. They will help you build applications that are easy to maintain, scale, and perform well. We’ll show you lots of real-life code examples to make things super clear and give you practical advice on how to put these best practices to work in your own projects. Plus there is a bonus at the end — a GitHub repo with all the code mentioned in this article!

React is one of the most popular techs when talking about JavaScript. Even for some developers, it’s the best. React doesn’t force you how to structure your project. It’s completely up to you to choose how do it. As a result, that makes some developers bring the artistic sense out of them.

Today, I’ll share what I have learned from my work experience and research from blogs about performance optimization in React, which I use in my professional life and as well as my side projects.

Picture this: a user clicks on a link, eagerly anticipating the next page. In the blink of an eye, the content magically appears, as if the website knew exactly what the user wanted. It's like having a psychic web server that predicts your every move.

In the realm of front-end development, terms and paradigms can sometimes be mystifying, and ‘headless UI’ or ‘headless components’ may very well belong to this category.

Conform is a form validation library that helps you build forms with serverside validation and client-side error handling. It works really well with Remix and Zod.

Often, the difficult thing about web development is that different browsers implement the same thing in different ways. Multiple screen readers compound this problem. For example, VoiceOver (VO) will announce a disabled button is "dimmed" and NVDA will announce "unavailable".

There has been a lot of frustration in tech Twitter over the last few weeks. Some people are frustrated with React Server Components, and some are frustrated with the way the React team communicates. The React team is frustrated with that “pile-on” they are facing.

Loading Performance - This is a measure of how fast the content is loaded when a user visits your webpage. Some specific metrics are First Contentful Paint (FCP), Largest Contentful Paint (LCP), First Input Delay (FID), TTI (Time to Interactive), and maybe a "Speed Index".

After years of using React, it still packs a surprise. Did you know you can update state while rendering?

Ten useful custom React hooks that can enhance your React application development. The hooks cover a range of functionalities, such as handling form inputs, managing state, working with APIs, and implementing scroll tracking.

Various performance issues that developers may encounter when working with React, such as unnecessary re-renders, excessive state updates, and inefficient data fetching. The author provides practical tips and solutions to address these problems, offering insights on optimizing React components for better performance and user experience.

As a senior Javascript React developer, consistently improving the performance of your applications is an essential skill to master. We’ve gathered the top 10 expert performance tips that will elevate your React development game.

An overview of seven beginner-friendly React projects that individuals can work on to enhance their React skills. The projects range from creating a simple to-do list application to building a weather application, and each project includes a detailed description, code snippets, and resources to guide beginners through the development process.

Concise and practical roadmap for developers who want to learn React, a popular JavaScript library for building user interfaces. It outlines a step-by-step approach, highlighting essential concepts, recommended resources, and common pitfalls to avoid,

The evolution and impact of the React JavaScript library over the past decade. It highlights key milestones, influential features, and the community's contributions, showcasing how React has revolutionized front-end development and become one of the most popular frameworks in the industry.

Insights and guidance on using Higher-Order Components (HOCs) effectively in React applications. It covers topics such as composing HOCs, handling props, implementing error boundaries, and dealing with common challenges, offering practical tips and best practices for leveraging HOCs to enhance code reusability and maintainability in React projects.

How the Factory Pattern can be applied in React applications to enhance code modularity and maintainability. It explains how to use the Factory Pattern to create reusable components and provides examples of implementing the pattern in React.

How experienced engineers leverage React Hooks to build scalable and maintainable applications. It explores various techniques and best practices for using React Hooks effectively, offering practical advice for developers looking to enhance their skills in working with React Hooks.

Recently, the React and Next.js teams have been promoting Server Components, a new way to build web applications that doesn't fit with most existing React app. Is this change as big as the move from Angular.js to Angular 2? Is React going through a similar phase as Angular.js did?

No, Server Components Don't Make Your Job Easier

React Server Components are currently discussed quite controversial. Personaly I think RSC can solve problems of React applications, but are not the "holy grail" or the "one fits all" solution. I tried to sump up some of my understandings and opinions in this document.

How to implement an app using RSC, or how to implement a framework using them. Instead, it walks you through the process of "inventing" them on your own from scratch.

Key advancements and updates in React, such as concurrent rendering, automatic state management, and improved developer tools, highlighting their impact on the development process and the overall user experience.

React is working on <Catch> boundary

The development of RedwoodJS, a popular full-stack JavaScript framework, shift in Redwood's architecture to embrace the Redwood Scalable Components  model, which offers improved scalability, reusability, and performance for building web applications.

best practices that have emerged in the React ecosystem over time. It explores the evolution of React patterns from class components to functional components with hooks, as well as popular patterns such as render props, higher-order components (HOCs), and the latest trend of using React's Context API and custom hooks for state management.

NakedJSX is a command-line tool for generating HTML files from JSX. The output is pure HTML and CSS - unless you choose to add your own JavaScript.

Overview of JSX and its IntrinsicElements in the context of TypeScript. It explains how JSX allows developers to write HTML-like syntax in their JavaScript code and how TypeScript leverages IntrinsicElements to provide type safety and autocompletion for JSX elements.

Detailed explanation of the React hooks useMemo and useCallback. It explores their purpose, usage, and benefits, guiding readers on how to optimize their React components using these hooks for improved performance and memoization.

Next.js version 13.4 has been released, offering faster full-stack development capabilities with significant performance improvements and new features.