Issue 152 - Introducing the new React DevTools (22)

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.

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

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...

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

Announcing the Ionic React Release Candidate — Ionic 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.

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.

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.

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.”

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

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.

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.

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.

▶  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.

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).

▶  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.

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.

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

Find A Job Through Vettery — Vettery specializes in dev roles and is completely free for job seekers.