React 16.2 released, AWS AppSync & the HOC vs render prop debate
This week React 16.2 was released and now includes support for fragments!
🍬Goodies in this week's newsletter🍬
- Improve performance in your React application using Chrome DevTools
- Debate the pros and cons of higher order components vs render props
- Integrate AWS S3 with your React Native application
- Explore the new AppSync service for GraphQL from AWS
- Create a form with a new form library from Erik Rasmussen, the creator of Redux Form
Happy Coding!
-Sophia Shoemaker
Sophia Shoemaker
React v16.2.0: Improved Support for Fragments
React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. The feature is called "fragments". A common pattern is for a component to return a list of children and prior to React 16, the only way to do this was to wrap the children in an extra <div> or <span>. With the release of React 16, you could put your children in an array removing the need for the extra elements, but this caused some confusion. To provide a more consistent authoring experience for fragments, React now provides a first-class Fragment component that can be used in place of arrays. Check out the blog post detailing how to add fragments to your React application.
Higher Order Components or Render props?
Recently James Kyle tweeted out a poll on Twitter -- Which do you prefer: "Higher-Order Components" or "Render Props"?
The resulting conversation between Sebastian Markbage, Ryan Florence and a few others is a really interesting discussion on the pros and cons of both approaches. Check it out!
twitter.com
Tutorials
Upload and download images to/from AWS S3 in a React Native App
Configuring Amazon Web Services like S3 are known for being tricky at times. You need to have everything configured just right or your system won’t function. This article goes into detail (with screenshots!) of how to configure S3 to work with a React Native app and an Express server.
ademcan.net
Debugging React Performance with React 16 & DevTools
React’s virtual DOM is known for efficiently rendering components—but what happens when those components suffer from performance issues? Where do you look? How do you fix the problems? In this article, Ben Schwarz uses Chrome DevTools to demonstrate powerful new performance tracking features and how you can use them to diagnose slow rendering components.
calibreapp.com
Performance Tuning a React Application
Josh Comeau has built a web application to track and manage your favorite TV shows. Since it was a relatively small codebase, he originally thought there wasn't much to be done as far as page load time. After doing an initial benchmark, however, he was surprised to see that the application did not load well at all on slow connections. It took around 5 seconds for anything meaningful to show up, and more than 15 seconds for all network requests to resolve. In this article he details the process he went through to decrease download times and improve TTI.
codeburst.io
Code
AWS AppSync: GraphQL
AWS AppSync is new service for building mobile applications that are driven by data-intensive services in the cloud. AWS AppSync is a fully managed serverless GraphQL service for real-time data queries, synchronization, communications and offline programming features.
amazon.com
React Final Form
Erik Rassmussen, the author of redux-form, a form library for React/Redux applications has built a new, Redux-free form library called Final Form. Final Form is a JavaScript library that is compatible not only with React, but also with any other framework of your choice. He has also built a small wrapper around the Final Form library to easily integrate it into React.
codeburst.io
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).
Sophia Shoemaker