React Newsletter #275

A visual guide to React rendering, Tagged template literals, and Using WebSockets with React


This week's issue is sponsored by Clerk

With Clerk, you can add <SignUp/> and <SignIn/> to your React application in minutes. Clerk comes with beautiful, high-conversion UIs, multi-factor authentication, device management, and much more.

👉 Try it out for free


Articles

A Visual Guide to React Rendering - Props

This is the second part of Alex Sidorenko's series on React rendering. This post covers Props with lots of helpful gifs, graphics, and code snippets.

Tagged Template Literals - The Magic Behind Styled Components

In this article, Dekel doesn't cover the pros and cons of traditional stylesheet files vs. styled-components, but instead focuses on tagged template literals -- the "magic" that lets us use the styled-components syntax.

React 18 and the future of async data

Swizec Teller writes about what working with async data will (eventually) look like in React 18. To illustrate this, he built a side-by-side comparison of current best practice for data fetching, React Query, and future <Suspense> for data fetching, using the latest experimental version of React.

Using WebSockets with React, the right way

In this article, Itay Schechner introduces a few useful custom React hooks that take websocket clients to the next level.


Tutorials

How create a React Swiper Slider

This tutorial will show you not only how to make a specific slider, but also in general how to implement various simple sliders on React apps without putting much effort.


Jobs

2x Sr. Frontend Engineers - React | 100% Remote

Close.com is looking for two experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. They are a 100% globally distributed team of ~45 high-performing, happy people that are dedicated to building a product our customers love.


Projects

Welcome UI

A customizable design system with React, styled-components, styled-system, and reakit.

Create Eth App

A minimalistic way to create a scalable, Ethereum-powered React app with a single command. It brings Yarn Workspaces, Create React App and The Graph under one roof.

React Native Share

A simple tool for sharing message and files to other apps.

React-Portfolio

A cookie cutter React portfolio suited perfectly for Github Pages that you can get up and running in less then 5 minutes. Just edit the data.json file and you're good to go.


Videos

React Without JavaScript?

In this 13-minute talk at last month's React Summit, Fred K. Schott introduces Astro from a React developer's perspective.

How To Setup Next.JS with TypeScript, Prettier, ESLint and Husky

This 10-minute video by Jarrod Watts will help you learn how to set up ESLint, Prettier, and Husky to consistently write and style your code. He uses a TypeScript and Next.JS project to demonstrate how you can set up Visual Studio to lint and format your code whenever you hit save and to set up pre-commit hooks to check your code for style consistency using Husky.

made with ❤️ by ui.dev