Code with Kristian • I make videos and write about software development and programming tools
How to learn React Native in 2021
How to get started with React Native, including the best open-source packages, courses, and tutorials. Up-to-date for 2021!
React Native: How To Build Bidirectional Infinite Scroll
Brought to you by Stream
Learn how to build bidirectional infinite scroll with Stream's blog post on The Practical Dev, and check out the open-source package they've released alongside the tutorial.
Thanks to Stream for sponsoring Bytesized. Learn more about sponsoring the newsletter.
🎓 What is it?
⌛ The past
Developing non-web applications is tough. In particular, mobile apps have a steep learning curve and a lack of developer ergonomics. Here's Matthew Mombrea on why developing for mobile applications is tougher than you think:
The start of the difficulties is the inconsistent nature of mobile devices. I’m not talking about specs and screen sizes in this case, I’m talking about where you are and what you’re doing. The beauty of programming for these devices is that they provide all kinds of sensors and measurements, as well as a variety of network connectivity methods for use in your apps. Unfortunately you have no way of knowing what the state of these sensors or data connections will be when a user fires up your app so additional logic must be added to handle a large number of scenarios. Data connections are transient and prone to failure. If your app relies entirely on a network connection, you’ll have a lot of mitigation to deal with that you wouldn’t normally have with a web application or desktop app.
And that’s just the tip of the iceberg. Apps can be shoved into the background at will. Limited storage space can dump your cache. Memory will fill up and leave no room for your software to run. Batteries dies, and so forth. Where desktops are sitting comfortably, plugged in to infinite power and a reliable internet connection, mobile phones are free wheeling through space, leaching sips of data and GPS when able while gradually marching toward battery death. It’s a hostile environment for software.
On top of those developments, the actual high-level art of "building web applications" has been completely overhauled. React made declarative UI development the norm. Flexbox and CSS Grid have made virtually any layout possible. Frontend development continues to see rapid transformations, so much so that the day-to-day of writing frontend applications is barely recognizable from a decade ago.
As those changes have occurred, frontend developers have set their sights on other platforms. What lessons from the last ten years of web development can be brought to mobile app development, and to desktop development?
📌 Right now
React Native also brings declarative layout tools that should feel familiar to anyone who's worked in web development. Flexbox-like layouts are supported by default in React Native, as well as support for external images, like HTML's
Currently, the React Native team is focused on performance and accessibility. The most recent version of React Native at time of writing, 0.64, includes support for Facebook's Hermes engine, which should improve performance on iOS. The React Native team also announced that they're adopting the GAAD pledge, to make React Native applications accessible and to make accessibility itself a core value of the framework.
Tools like Expo and Ignite are offering comprehensive solutions to building React Native applications. Whether it's boilerplate code for things like state management, notifications, or network requests, or full-on testing and deployment solutions, the developer experience ecosystem for React Native is thriving.
There's also really interesting innovations happening in where React Native is used. React Native uses many high-level primitives for writing layout code — for instance, instead of a
h1 tag in HTML, React Native uses the
<Text> component, which accepts a number of props for things like colors, text size, and font weight.
These primitives make it possible to use React Native as a layout engine for multiple platforms, which is what makes it possible to write React Native applications both for mobile (iOS and Android), as well as Windows and Mac. In a full-circle move, one of the most popular React Native projects is react-native-web, which substitutes React itself for React Native's higher-level layout primitives.
We can't talk about React Native without talking about Flutter — Google's cross-platform mobile app framework. The competing frameworks have a number of shared pros and cons, but due to radically different approaches, they each stand on their own merits. Check out my blog post on Flutter to learn more 👇
👶 Where to start
On Twitter, I asked my followers: "How would you learn the framework if you had to start today?" Here's some of the answers:
Greg Brimble, software developer and student: "First learn a chunk of regular React (arguably easier to setup and learn basics—esp. if you're also new to JS), and then Expo. Could not recommend them highly enough! Such a slick experience and the path from React -> React Native with them is so smooth." (tweet)
Jamon Holgren, co-founder at Infinite Red: "I'd start with reactnative.express, and also check out Ignite (which supports Expo too!)" (tweet)
Andrei Calazans, React Native developer at G2i: "I would start with the Basic section of the docs. Then build an app that renders a list of items and opens a page, and shares something on social media. Test iOS and Android. If you can later read the remaining of the documentation, great content there." (tweet)
Adrian Carolli, React.js developer at G2i: "I would take Stephen Grider's course on React Native. He's the best instructor for people who want to learn React Native. I have gotten so many people to take Stephen's courses and they are now successful engineers." (tweet)
If you're looking for a complete app tutorial, Stream has an in-depth tutorial (with code and screenshots), showing you how to build a complete chat application from scratch using React Native and Stream.
🙋♀️ Who to know
- reactnative.express is a complete guide to getting started with React Native, including writing React, React Native components, and working with native platform APIs on a variety of platforms.
- Byteconf React Native 2018 was a virtual conference that I organized, bringing six great React Native speakers together. Check out Adhithi Ravichandra's excellent talk "10 Things I Learned Building React Native Apps", or Jamon Holgren's tutorial for using Ignite, the most popular React Native boilerplate.
- The Complete React Native + Hooks Course – Stephen Grider's incredibly popular Udemy course on React Native.