React Newsletter #97

StateOfJS Survey results, testing React components, and atomic design with React


StateOfJS Survey Results

React is the most-used Front-End Framework, with 93% of Users Saying "Would Use it Again", According to Just-Released State Of JavaScript 2017 results.


Testing React Components

Testing should make us confident. Confident that our software does what we think it does, and that it will continue to do so as we pile up functionality. But testing UI components rarely breeds confidence. Instead, it often makes us feel angry and unproductive. Why bring this up? Because Ovidiu has had this problem for years, since before the days of React, and he's recently put a ridiculous amount of time and thought into solving it. This article covers those solutions.

Optimize React Performance

How to improve React performance in production and avoid common mistakes

Atomic Design with React

How one methodology allowed Danilo to create a great design system from scratch and made him a better developer, with principles of componentization, hierarchies and reuses of code.

How exactly does React handle events?

There are an awful lot of posts explaining how to use React’s event handling system, but not many that explain how it works. I have been working on React Native lately, and Nicolas' struggles with event handling acted as a reminder of how important it was to understand precisely what’s going on. He decided to gather as much info as possible regarding event handling in React: the following is a report of what he found looking around the source code.


Make your React code better with DeepScan

DeepScan is a cutting-edge static analysis tool for JavaScript, TypeScript and React code. Find runtime errors and quality issues beyond lint including React specific problems. Track code quality status over time for your React apps on GitHub. Get started with DeepScan for free now!


The Beginner's Guide to ReactJS

This course is for React newbies and those looking to get a better understanding of React fundamentals. With a focus on React fundamentals, you'll come out of this course knowing what problems React can solve for you and how it goes about solving those problems.

Create React Content Loader

Have you heard about react-content-loader? It's React component that uses SVG to create loaders which simulates the structure of the content that will be loaded. So now you can use this tool to create your loader easily.


Authentication Boilerplate with Next.js and Apollo GraphQL


A React component that helps in scrolling around a page. React Scroll-To provides a Higher Order Component, and Render Props implementation.


react-tiny-dom is a minimal implementation of react-dom as custom renderer using React 16 official Renderer API.\r\n\r\nThe purpose of this project is to show the meaning of each method of the ReconcilerConfig passed to react-reconciler, by using a practical yet familiar environment: the browser DOM.

made with ❤️ by