React Newsletter #270

Good Redux articles, a React Preview VSCode extension, and building a liquid swipe animation in React Native


This week’s issue is sponsored by Springboard.

Want to transition into a well-paying and fulfilling cybersecurity career? Springboard's got you covered with 1:1 mentorship from industry experts, a curriculum built by experienced hiring managers, and proven career coaching. Springboard offers the first cybersecurity bootcamp to combine a job guarantee and deferred tuition: you only pay your tuition if you get a job.

Senior cybersecurity analysts can earn more than $120,000 a year while protecting essential data and systems. A background in web development and programming skills can help you transition into this dynamic career path.

👉 Check it out.


News

Microsoft Teams is now 100% on React

The Microsoft Teams app has moved away from Electron and Angular and fully embraced a new stack that includes Apollo, GraphQL, and React. Teams will also be directly integrated as part of Windows 11.


Articles

The Redux Best Practice -- "Do not put non-serializable values in state or actions" -- Explained

Charlotte Isambert explains the three reasons why you should not put non-serializable values in your state or your actions when using Redux.

The Evolution of Redux Testing Approaches

In response to a beginner's question about Redux, Mark Erikson wrote this extended response about the history of testing Redux apps, the two major styles of testing that he's seen, and how those approaches have evolved over time.

Getting started with Typescript with React Hooks

This article is for developers who already know React and JavaScript and want a quick intro to the basics of TypeScript and how to use it alongside React.


Tutorials

How to useContext in React

Robin Wieruch discusses how React Hooks can be used for both state in React (e.g. useState and useReducer) and also for consuming React's Context. Then he walks you through how to use React's useContext Hook.

How to Securely Access Secret API keys using Netlify Functions in a React App

In this tutorial, Joseph Mawa will help you learn how to add a Netlify function to a React app, use Netlify functions to securely access secret API keys, and use the netlify-cli tool to test your Netlify functions.

Learn Next.js and Tailwind CSS By Building Dev.to

This is the first post in a tutorial series that will help you learn Next.js by building a fully-functioning clone of Dev.to. It covers Next.js concepts like Pages, Server Side Rendering, getServersideProps, Env Variables, and more.


Job Listing

Full Stack Engineer (remote + occasional epic hike) -- Rupa Health

Rupa makes lab testing simple. We're taking the archaic processing of ordering lab work and bringing it into the modern age. Come join us as the 5th engineer in our early team. You'll be a key part of setting the direction for the engineering culture and will own major aspects of the product. Rupa is a remote-first company, but we love getting the team together a couple times a year for some beautiful outdoor experiences. We're growing rapidly and would love to have you be a part of this journey with us! 💙


Projects

React Preview

A VSCode extension that allows you to preview your React components with just a click, giving you instant feedback in your IDE without writing any extra code. Previews are updated as you type, and it automatically generates valid props for TypeScript components.

React Cool Virtual

A tiny React hook for rendering large datasets in a highly performant way, using DOM recycling. Created by Welly Shen.

iPod.js

A fun React app that connects your Spotify or Apple Music account to a classic iPod UI -- complete with the click wheel and that addicting Brick Breaker game.

React Native Liftoff

A CLI for starting up React Native apps fast. Created by the team at thoughtbot.


Videos

Liquid Swipe - “Can it be done in React Native?”

In this 45-minute video, William Candillon gives a great introduction to masking, gestures, wave animations and more as he walks you through building a liquid swipe with React Native.

I Made a Twitch Chat Controlled Minecraft Stream

In this 10-minute video, Vig walks you through the process of how he used Node.js and React to create an interactive Minecraft livestream in Twitch, which includes dynamic overlays that display info about the stream.

made with ❤️ by ui.dev