#152 — August 21, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

Introducing the New React DevTools — If you’re a React developer, you should be using the DevTools and if you are, they’re now a lot faster and easier to navigate. Here’s a list of all the changes. React 15 and above are supported.

Want to get playing right away? There’s now an interactive tutorial so you can learn more about how to use them, and CodeSandbox has directly integrated the tools so you can get going quickly.

Brian Vaughn

JavaScript to Know for React — Examples of which JavaScript features in particular you should be familiar with when learning and using React.

Kent C Dodds

Simplify Event Tracking with a Single API — Integrate 250+ tools with the flip of a switch. Power your entire tech stack with the same data. Segment is all you need — in one tool.

Segment sponsor

Announcing the Ionic React Release CandidateIonic is a cross-platform mobile app delivery framework more commonly associated with Angular, but they’re keen to be as agnostic as possible, so here’s the first RC of their React-based variant.

Ely Lucas (Ionic)

Draggin' and Droppin' in React — There are a lot of React-focused drag and drop libraries out there, but react-sortable-hoc is the way to go to keep things simple, says Maks.

Maks Akymenko

💻 Jobs

Frontend Software Engineer (New York) — Passionate about React and building high-quality UX? If you’re driven and want to help us continuously ship new, impactful features for our users, then get in touch.

KUSTOMER

React developers are in demand on Vettery — Make a free profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Tutorials and Stories

Using requestAnimationFrame with React Hooks“Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way.”

Hunor Márton Borbély

Animating a Canvas with React Hooks — A neat demonstration of using hooks to interact with and animate an HTML5 canvas.

Pete Corey

Rendering Maps in React — A look at how to display data on a map using React along with Google Maps and MapBox, while comparing both approaches.

Leigh Halliday

A Quick Guide to Refs in React — If you need to get a reference to a DOM node to perform some sort of direct operation upon it, React.createRef is what you need.

William Le

Want a Better Way to Store and Serve Images and Videos? — Join a community of over 450K web and mobile developers dynamically managing rich media with Cloudinary. Try it free.

Cloudinary sponsor

▶  What's New with React Dev Tools 4 — If the things we linked to for the DevTools above weren’t enough.. enjoy Harry Wolff as he presents a live demo of the new DevTools using his own blog as a guinea pig app.

Harry Wolff

How to Create a Service-Oriented React Webapp — Thoughts on turning a static single-page React app into something more dynamic with a backend (ultimately an introduction to Infrastructure-Components, a project which deploys React-focused backend components to AWS for you).

Frank Zickert

▶  Next.js: The React Framework — A 25 minute talk introducing you to the motivations for using Next.js, a popular framework for building React apps including statically generated or server-side ones.

Tim Neutkens

How to Jest Snapshot Test the Difference

Robin Wieruch

🔧 Code and Tools

AdminBro v1.0.0: An 'Autogenerated' React + Node.js Admin Panel — I appreciate many will not be a big fan of the name, but this is an interesting project nonetheless.

Wojciech Krysiak

react-shimmer: An Image Component That 'Shimmers' While Loading — Essentially a ‘this image is loading’ effect. Here’s a live demo, complete with code.

Gokcan Degirmenci

Kinvey a Leader in 2019 MQ for Multiexperience Development Platforms

Progress Kinvey sponsor

React Spinners: A Collection of 'Loading Spinner' Components

David Hu

ReactPlayer: A React Component for Playing Media from Remote URLs — From file paths to YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, and more.

Pete Cook

react-flame-graph: A Component for Visualizing Profiling Data — Define the data in a tree of objects and this will render a flame graph. GitHub repo.

Brian Vaughn