Copy
Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
 
Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript

Recently, Sentry converted 100% of its frontend React codebase from JavaScript to TypeScript. This year-long effort spanned over a dozen members of the engineering team, 1,100 files, and 95,000 lines of code.

In this blog post, we share our process, techniques, challenges, and ultimately, what we learned along this journey.
 

The pitch

Back in 2019, we were shipping more frontend bugs than what was acceptable. After looking at the underlying causes of these incidents, it became clear that many of these bugs could have been prevented by static analysis and type checking.

During that year’s Hackweek event, Lyn Nagara, Alberto Leal, and Daniel Griesser pitched introducing TypeScript to the Sentry frontend. This team bootstrapped the TypeScript compiler to our build process as well as converted a few non-trivial views — and their related components — to TypeScript.


Read more
 
Rebuilding Our Jekyll Website with Next.js and Theme UI
Recently we redesigned and rebuilt our promotional site that was built in Jekyll and I thought it might be interesting to explain why we did it, as well as talk about the choices we made like deciding between Gatsby and Next.js for static site generation, using React (JSX and MDX) as a templating language and for writing docs, colocating styles with CSS in JS, and building a design system with Theme UI.
 

Modern static site generators

Years ago when we chose Jekyll there were perhaps too few static site generators to choose from, but now there are arguably too many. There’s even a website called StaticGen that lists them all!

That said, while there are a lot of options, when it comes to choosing a foundational tool like a framework that you’re going to sink a lot of time and effort into, it’s best to choose something with a big community. Gatsby and Next.js are the two most popular projects (by GitHub stars) so our choice was between them.


Read more
 
Getting started with Vite and React
A short demonstration of how to get started with Vite for a React TypeScript project.

Watch video
 
Announcing Docusaurus 2 Beta

After a lengthy alpha stage in order to ensure feature parity and quality, we are excited to officially release the first Docusaurus 2 beta.

With the announcement of this beta, the team is even more confident that Docusaurus 2 is ready for mainstream adoption!


Read more
 
Creating An Outside Focus And Click Handler React Component
In this article, we’ll look at how to create an outside focus and click handler with React. You’ll learn how to recreate an open-source React component (react-foco) from scratch in doing so. To get the most out of this article, you’ll need a basic understanding of JavaScript classes, DOM event delegation and React. By the end of the article, you’ll know how you can use JavaScript class instance properties and event delegation to create a React component that helps you detect a click or focus outside of any React component.

Read more
 
Tao of React - Software Design, Architecture & Best Practices

I’ve been working with React since 2016 and still there isn’t a single best practice when it comes to application structure and design.

While there are best practices on the micro level, most teams build their own “thing” when it comes to architecture.

Of course, there isn’t a universal best practice that can be applied to all businesses and applications. But there are some general rules that we can follow to build a productive codebase.

The purpose of a software’s architecture and design is to keep it productive and flexible. Developers need to work on it effectively and modify it without rewriting its core.

This article is a collection of principles and rules that have proven to be effective for me and the teams I’ve worked with.

I outline good practices about components, application structure, testing, styling, state management and data fetching. Some of the examples are oversimplified so we can focus on the principle not on the implementation.

Take everything here as an opinion, not an absolute. There’s more than one way to build software.


Read more
 
React video courses
Because I need to pay my bills 😉
 
Copyright © 2021 ABL - The Problem Solver, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp