---
title: "Using the HTML Drag and Drop API from React"
publication: "React Status"
issue: 177
published_at: "2020-02-26"
canonical_url: "https://react.statuscode.com/issues/177"
---
This week's React news, links, and libraries
#177 — February 26, 2020
[Read on the Web](https://react.statuscode.com/issues/177) React Status Your weekly React news digest, every Wednesday
[](https://github.com/tannerlinsley/react-query)
[React Query 1.0: Hooks for Fetching, Caching and Updating Data](https://github.com/tannerlinsley/react-query) — Hooks that help you keep your server cache state separate from your global state and let you read and update everything asychronously. Unopinionated and interoperable with any data fetching strategy including REST, GraphQL, and streaming-based APIs – can even lean on Suspense for ‘Fetch-As-You-Render’ prefetching. There’s a lot to enjoy here.
Tanner Linsley
[How To Use The HTML Drag-And-Drop API in React](https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/) — It won't be for everyone but this walks through the process of using the Drag and Drop API directly to build a file upload component, plus how to use the `useReducer` hook for managing state in a React functional component.
Chidi Orji [](https://frontendmasters.com/courses/interviewing-frontend/?utm_source=nodeweekly&utm_medium=email&utm_campaign=interviewing)
[New Course: Interviewing for Front-End Engineers](https://frontendmasters.com/courses/interviewing-frontend/?utm_source=nodeweekly&utm_medium=email&utm_campaign=interviewing) — Jem Young leverages his experience conducting dozens of interviews as Senior Software Engineer at Netflix to teach you to pass front-end engineering interviews, and give better interviews as a technical manager.
Frontend Masters sponsor
[Using React-Loadable to Half a React App's Load Time](https://dev.to/rozenmd/how-i-used-react-loadable-to-more-than-half-my-react-app-s-load-time-299c) — [React Loadable](https://github.com/jamiebuilds/react-loadable) makes it easier to lazily import components as needed. The project’s [detailed README](https://github.com/jamiebuilds/react-loadable#readme) does a great job of selling it, but so does this brief post on how one developer uses it (although it’s worth keeping the still-experimental [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) in mind too).
Max Rozen
[react-beautiful-dnd 13.0: Accessible Drag and Drop for Lists](https://github.com/atlassian/react-beautiful-dnd/releases/tag/v13.0.0) — A major release of a popular and powerful library for creating drag and drop interactions, including visuals, within React apps. It provides a higher level, list-focused abstraction than the HTML5 Drag and Drop API approach covered in the tutorial above.
Atlassian
[`reactnative.dev`: React Native Gets A New Domain Name](https://reactnative.dev/) — It’s the same homepage but React Native now gets its own domain name rather than piggybacking on `facebook.github.io` :-)
Facebook
💻 Jobs
[Find a Dev Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-reactstatus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77585) — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.
Vettery
📘 Tutorials and Stories
▶[Getting Started with the Create React App Redux Template](https://www.youtube.com/watch?v=xbgwyhHmCyU) — Last week we featured the release of [the official Redux template for CRA](https://github.com/reduxjs/cra-template-redux/releases/tag/v1.0.0), this 50 minute screencast takes a deeper look at its use.
Justin Kim
[Nesting Tab and Stack Navigators in React Native and Expo Apps](https://heartbeat.fritz.ai/nesting-tab-and-stack-navigators-in-react-native-and-expo-apps-cc118a141e70) — The art of rendering a navigator inside the screen of another navigator.
Aman Mittal
[9 Things I Learned Building the Same App with Angular and React](https://www.telerik.com/blogs/9-things-i-learned-building-same-app-angular-and-react?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-tj9thingsilearned&utm_content=sponsored-link) — TJ VanToll rewrote an Angular app with React to compare Angular and React app dev. Find out what he learned during the rewrite process.
Progress KendoReact sponsor
[Inline CSS Works Better in a Component World](https://davnicwil.com/inline-css-works-better-in-a-component-world/) — If you’ve not entirely been won over by the idea of inline CSS, this makes a good case.
David Nicholas Williams
[Advanced Memoization and Effects in React](https://gist.github.com/slikts/fd3768de1493419ed9506002b452fcdc) — It’s funny how some of the best written articles we come across are just GitHub Gists and not actual blog posts :-)
slikts
[React Router v6 in Two Minutes](https://t.co/gQjS8HpQgS) — Learn what’s coming in the latest alpha.
Emre Yilmaz
🔧 Code and Tools
[](https://github.com/malerba118/react-particle-image)
[react-particle-image: Render Images as Interactive 'Particles'](https://github.com/malerba118/react-particle-image) — A component to render a given image as an interactive particle display. See a [demo here](https://malerba118.github.io/react-particle-image-demo/).
Austin Malerba
[Electron React Boilerplate 1.0: A Foundation for Scalable Cross-Platform Apps](https://github.com/electron-react-boilerplate/electron-react-boilerplate) — Brings together Electron (the popular cross-platform desktop app development toolkit) with React, Redux, React Router, webpack and React Hot Loader. v1.0 completes its migration to TypeScript.
Electron React Boilerplate
[ImageCon: Great Media Experience for U and I](https://www.imagecon.com/?utm_source=Newsletter&utm_medium=sponsored_placement&utm_campaign=imagecon2020&utm_content=react_status)
Cloudinary sponsor
[Gestalt: React UI Components using Pinterest's Design Language](https://github.com/pinterest/gestalt) — Check out all of the components [in action here.](https://pinterest.github.io/gestalt/#/)
Pinterest
[React PDF Reader: A Simple PDF Viewer Component](https://github.com/ZEISS/react-view-pdf) — A wrapper around [PDF.js](https://mozilla.github.io/pdf.js/), as used by Firefox.
ZEISS Group
[React Stripe.js: React Components for Stripe.js and Stripe Elements](https://github.com/stripe/react-stripe-js) — We linked to `react-stripe-elements` just last week but Stripe has decided to rename and rework the project making this repo the place to go for official React components for Stripe.
Stripe
A **[Cooperpress](https://cooperpress.com/)** publication.
[Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*)
© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom