Integrating React into existing applications & drag-n-drop with React
Have you been wanting to try React in an existing application, but you're not sure how or where to start? Or is your legacy codebase in need of a serious refresh, but it's too costly & labor intensive to rewrite from scratch?
This week's newsletter has some tips and tricks from a few seasoned React developers on how to go about integrating React into an existing codebase.
Also included in this week's newsletter:
- Learn how Mint created a fun game for kids using React VR
- Rethink drag-n-drop with React
- Use "burger menu" component for snappy and stylish sidebar menus that animate in various ways when sliding out
- Need a WSYIWYG editor for your next project? Check out a React wrapper around the Quill.js editor
Happy Coding!
-Sophia Shoemaker
Tutorials
Building in React VR: What Mint Learned
Every year Mint goes away on a company product development retreat to build something interesting within a few days. This year the team was assigned the task of building something using augmented reality technology. The team settled on building an immersive VR teaching aid — for use in the classroom — that would help children aged between 8 and 11 expand their vocabularies. What might a VR game that tests literacy skills look like? Read this article to find out how they built it and what their experience was like using React VR.
medium.com
Rethinking Drag and Drop with React
Atlassian recently released react-beautiful-dnd, a drag-n-drop component for React. The core design idea of react-beautiful-dnd is physicality: users should feel like they are moving physical objects around. While the more commonly used drag-n-drop library, react-dnd performs well over a variety of use cases, react-beautiful-dnd is focused primarily on creating a better experience for horizontal and vertical lists.
Migrating Complex JavaScript Applications to React
In this article, Jack Franklin talks about his experience migrating a business critical codebase from Angular to React, component by component (as opposed to a complete rewrite). He covers four topics: Tech, Tests, Team and Talking in discussing what he's learned from the process.
javascriptplayground.com
How do I integrate React into an existing app?
Most React guides assume that you're building a new app with React. But what if you've already got an application? Rewriting an application from scratch can be a costly headache. How can you integrate React into existing pages? In this article, James K Nelson gives us a few tips and tricks for integrating React into an existing application.
reactarmory.com
Code
React with Rails
react-rails makes it easy to use React and JSX in your Ruby on Rails (3.2+) application. Learn more:
- Use React & JSX with webpacker or with the asset pipeline
- Rendering components in views or in controller actions
- Server-side rendering
- Generating components in various formats
React Burger Menu
react-burger-menu is an off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations. This library has some awesome animations! Check out the demo here: http://negomi.github.io/react-burger-menu/.
React Quill: A React component for Quill
Quill is a free, open source WYSIWYG editor built for the modern web. React Quill is a wrapper around the Quill editor so you can add it to your next CMS built with React!
github.com
About
Fullstack React: The Book
Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.
fullstackreact.com
Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).
Follow us on Twitter
Curated with love by Sophia Shoemaker and the Fullstack.io team.
Suggestions are welcome, just reply to this email - we'd love to hear from you.