🛠️ Building React from Scratch

Before we get into today’s edition, I’d love to have your take on this. Recently I’ve been told by some of you guys that you’d like to see more diverse content from me, and I’m curious what that looks like.

⚡️ The Latest In React

📧 React Email 3.0
React Email 3 is here! Now with 54 pre-built components, it's all about faster, smoother email development, allowing you to create stunning emails in record time.

🎨 Material UI v6 is out now 
Material UI v6 is out, celebrating 10 years! Packed with new features, React Server Components support, and an experimental static CSS extraction.

📱Responsive Design and Composition
Responsive design with a single composition can lead to some crazy CSS, but cleverness isn't the answer. Instead, look for an easier approach. This blog post will walk you through a practical example.

📆 JS Dates Are About to Be Fixed
Among the latest ECMAScript updates, one stands out—a native object for "Zoned Date Time." But what exactly does that mean and what will it fix?

🖌️ Simple React Canvas
Add a tldraw canvas to your React app in just 5 minutes with the tldraw SDK. Perfect for collaborative whiteboards and so much more!

Implementing React From Scratch

Robby Pruzan recently posted a blog that's been gaining a lot of traction over the past week. In this post, Robby dives into the process of building React from scratch, offering insights into why React behaves the way it does.

His goal is to help readers develop an intuition for React's internal workings, especially since the framework sometimes leaks its abstractions into the interface.

A Fresh Approach to React's Internals

Robby makes it clear that he's not following the exact implementation of the React team. In fact, he didn't even know the internal architecture before coding his version.

Instead, he focused on high-level concepts like the virtual DOM and reconciliation. This approach allowed him to build a version of React that, while different, still captures the essence of what makes the library tick.

Rendering with React’s API

The blog starts with the basics—rendering something to the screen using React’s API. Robby explains that although React is commonly written using JSX, the actual library doesn't understand this representation. JSX gets transformed into function calls, like React.createElement, which is where the real magic happens.

For example, a simple JSX snippet like:

<div id="parent"> <span>hello</span> </div>

transforms into:

React.createElement("div", { id:"parent" }, React.createElement("span", null, "hello"))

Deep Dive into React Concepts

Robby's full blog post goes beyond just rendering. He covers a range of essential React concepts:

• useState

• Re-rendering a component

• Reconciling view nodes

• Conditional elements

• Efficient DOM updates

• More hooks:

  • useRef

  • useEffect

  • useMemo

  • useCallback

  • useContext

Why Re-Building React Matters

Robby believes that re-building a library from scratch is a powerful way to understand why certain decisions were made.

This process not only strengthens your internal model of the library but also helps you reason through scenarios you might not have encountered before. Plus, it’s a really great way to uncover hidden behaviors you wouldn’t think about without diving deep into the code.

Check out the full blog post!

Role-Based Authentication in React

I just uploaded a video where I show you how to manage role-based authentication in React.

We'll create a custom AuthProvider component to handle authentication and a protected route component to manage user roles. This setup ensures that only authenticated users with the right roles can access specific content within the app.

You can watch it below.