How to learn React Native

#archive

This post is out of date

This post has been migrated from my old blog. It may have broken links, or missing content.

🎓 What is it?

React Native is a tool for building desktop and mobile apps using React, the world’s most popular JavaScript framework. In a super competitive space versus tools like Flutter, Ionic, and Cordova, React Native differentiates itself by building on top of React’s incredible community and developer tooling.

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

Developing for web is relatively simple — we have the DOM, an abstraction we use for reasoning about how to layout content on our websites. Besides that, we have HTML, CSS, and JavaScript, which has been rapidly transformed in the last decade.

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 is an offshoot of React. It brings declarative UI development to desktop and mobile applications. It also brings JavaScript, which continues to grow and evolve, to new platforms, like your phone and your tablet.

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

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

👶 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

🔗 Links