medium bookmark / Raindrop.io |

This series of posts will be the very first part of the “React for Designers” course I’m creating. Be sure to sign up to receive exclusive updates!

• What is React?
• What is React Native? (this post)
• React Native vs. Hybrids (coming soon)
• Components, props, state etc. (coming soon)

In the previous post, we looked at what React is and what makes it special. Today let’s study React Native: what it’s for, where it came from, how it’s different from React and why it’s a big deal.

I’ll get you to come back here after reading this post. Hopefully you’ll be able to answer these questions easily:

• What is React Native? Why does its name include “Native”?
• Why is React Native cool?
• What can we build with React Native? What about React?
• Where does ReactDOM come from? What does it do?
• What does a React Renderer do?
• How does React Sketch.app work?
• How does ReactVR work?
• What is ReactJS? React.js?

By now you probably have this picture in your head:

You see, React is a great tool for building user interfaces on the web. With React, you can build the UI by describing what you want instead of how to update the UI (reactive UI), organize the code in reusable components, and create performant UI without worrying about DOM the slowpoke (virtual DOM). More and more web developers choose React because it allows them to focus on a bigger picture instead of low-level details. We call this way of building the UI React paradigm. A paradigm is basically the way how you think about a problem and how you describe it and its solution.

That’s great for web apps. What about other platforms, such as iOS and Android? Wouldn’t it be great if you could apply the same React paradigm to the development of mobile apps?

In a way, mobile platforms work in the same fashion as the Web. There is a model (a tree guy). There is something that creates visual elements according to the model (an artist). Not surprisingly, the traditional way of building a mobile UI is to directly manipulate the tree model and tell it how to update things (directly talk with the tree guy). This has similar shortcomings as directly working with the DOM in a web browser. React can definitely help on that.

Similarities aside, mobile platforms are different from the Web, and they are different from each other. In the past, developers had to learn the specific language and toolchain of a platform in order to build apps for it.

This is like working with exotic studios where the staff speak various different languages. You’d have to learn all the new languages to communicate with those models. It doesn’t sound easy, does it?

Therefore, if you wanted to build native apps for both iOS and Android, you had to create two completely separate codebases. The same business logic had to be implemented twice. It was difficult and expensive to create an app and even more so to maintain it in the long run.

That is why React Native was created. Let’s see how it makes things a lot easier.

Renderers And The New React

For web apps, React takes care of enabling the React paradigm (managing reactive UI, components and virtual DOM), as well as actually updating the DOM in the browser (talking with Domo). When the DOM is the only thing it needs to interact, React can easily handle both tasks.

However, for mobile apps, things get challenging when it’s necessary to manage various tree models on different platforms. If we keep adding more responsibilities on React’s shoulders, it’ll start driving our poor superhero crazy .

To deal with this, the creators of React split the original React into two parts. The first part is the new React which focuses on enabling the React paradigm. The second part is called ReactDOM, whose only job is to interact with DOM in the browser. Because ReactDOM updates DOM which determines what is rendered on the browser, we say ReactDOM is a renderer.

Back to our story, imagine that our superhero takes off his cloak and sprinkles some magic dust.

His cloak goes alive and becomes his helper. Freed from the burden of dealing with Domo, React can now concentrate on what he does the best.

This separation of roles is a powerful idea. It makes it easy to write new renderers that adapt to new platforms while maintaining a shared core. Powered by the renderers for iOS and Android, you can now build apps for both platforms in a single language and the same React paradigm.

React focuses on his thing. Renderers do the talk.

A Complete Platform

The official definition of React is: A JavaScript library for building user interfaces. Its meaning is twofold: first it’s a great tool for UI, second it doesn’t include anything else.

In fact, you can’t build a full application with just React alone. You’d need for example CSS for styling, webpack for preprocessing and bundling the code, Firebase for persisting the data and many other things.

The studio “Web Browser” is actually a lot busier than what you’ve seen.

This is fine in the context of web development because as a JavaScript library, React fits naturally with the other parts which are either JavaScript libraries too or are designed to work well with JavaScript libraries. After all, JavaScript is the language of the Web.

However, things are different for mobile platforms where various languages and technologies are in use. It becomes important to include a full package of tools that can be used in the same way as React, in JavaScript. Therefore, React Native was born.

Compared to React on the Web, React Native includes a lot more stuff:

• the new React as its core (our cloakless superhero),
• renderers for iOS and Android,
• tools that convert and bundle code into installable apps,
• native UI widgets (status bar, ListView etc.) and animations,
• toolkit for styling and laying out the UI (flexbox),
• essential parts that make up of most apps (such as networking),
• parts that provide native functionalities such as clipboard, accelerometer and storage.
• …

We say React Native is a complete platform itself because it includes all you need to build a full app. In comparison, the original React is only in charge of web UI and you’ll need to include other parts yourself to create a web app.

The formation of React Native

Native UI

Have you ever wondered why React Native is labeled Native? That’s actually its branding feature: the UI built with React Native consists of native UI widgets that perform well and look/feel consistent, not some simulated crap wrapped in a WebView. The apps built with React Native are often indistinguishable from the apps written in native languages such as Swift and Java.

You know, those little things, such as scrolling acceleration, animations, keyboard behavior and drop shadows, actually play an important role in the user experience of your app. If those are not consistent with other apps on the phone, users will quickly get frustrated.

I originally intended to explain here what “native” really means and why React Native performs better. But my notes quickly grew into a full page after a few brainstorming sessions. Let’s leave that as a future post of its own.

For now, I want you to just remember that native UI is one of the great things that make React Native shine.

So here you go, React Native is a complete platform that allows you to build truly native apps following React paradigm, in JavaScript.

Recently Airbnb recently released a nifty tool called React Sketch.app which converts React code into image layers in Sketch. Can you guess how it works?

Right! It’s essentially React Native with a renderer who talks to the tree model in Sketch!

Because React Sketch.app is based on React Native, which is a full package, we can do fancy things like fetching data from a real API and rendering it in Sketch.

In the meantime, many other variations of React Native are created to support building apps for Windows, macOS, VR etc.

This means, as long as you master the essence of React, you can build apps for a gazillion of platforms (and counting), in JavaScript, with the same pattern of thinking. As
the creators of React Native nicely put, “learn once, write anywhere”.

So much talking so far! Do you want to try something on your phone?

I’m excited too! Grab your phone and follow me!

1. On your phone, download the Expo app. You can either download from here: iOS, Android, or search “Expo” in the App Store. The app’s icon looks like (or on Android).
2. On your computer, open this page: https://snack.expo.io/
3. On your phone, launch the Expo app and tap “Scan QR Code”
4. Scan the QR code displayed on your computer. You should see a green “Device connected” message if everything works fine.
5. If the QR code does not automatically disappear, close it by clicking the little cross on the top right of the page. You should see a code editor.
6. Delete everything in the editor, Paste this code.
7. What do you see on your phone?
8. If you want, you can change the code in the editor and see the result on your phone right away!

I’ll explain this environment in detail in the future. For now, just remember that it’s like Codepen (the tool I used to show you the Domo’s hat example in the previous post) for React Native.

If you compare the React Native version of the code with the React (Web) version, you’ll notice that they look very similar. They both go like this:

const Hat = ... 
 
const Thinker = ... 
 
// Below is the React Native version 
// For Web version, replace "View" with "div" 
const ThinkerWithHat = ({hat}) => ( 
  <View> 
    <Thinker /> 
    <Hat type={hat}/> 
  </View> 
); 
 
const HatSwitcher = ... 
 
...

“Learn once, write anywhere”! Remember?

You might have heard ReactJS (or React.js) a lot – and I used it too. In fact it’s never an official name . The official name has always been “React” since the day one.

Because JavaScript libraries tend to be named “XyzJS” or “Xyz.js” and React is a JavaScript library, perhaps people just appended “JS” or “.js” to its name voluntarily. Since React was a library for the web in the beginning, many people use ReactJS or React.js to refer to React on the Web, the duo of React and ReactDOM.

Following the de facto convention, when I say ReactJS, I mean React on the Web too.

Awesome! We’ve gone over quite a few things so far. We’ve learned a bit of history of React and how React Native is put together. Being a complete platform, React Native includes everything that you need to build native apps in JavaScript and React paradigm. React Native now supports many platforms including iOS, Android, Windows, macOS, Sketch.app and even VR. “Learn once, write anywhere”!

In the next post, we’ll look at what a native app really is and why React Native is one of the best ways to build native apps.

I encourage you to go back to the Learning Goals to see if you can answer all the questions. Let me know if you have any questions or comments!

Want to learn more about React? Sign up now and receive exclusive updates!

Illustrations

I am fortunate to work with Beebee Ye, who is an excellent illustrator and storyteller. His illustrations have made these posts really unique and fun to read.

Revisions

As usual, this post has gone through many edits. What’s special here though, is that I’ve almost completely rewritten the whole thing hearing that I’ve taken the metaphors too far.

I really appreciate your constructive suggestions that pushed me to rewrite it, Yitong Zhang, Brittany Smart, Grant Robinson, Jason Fuller and Victoria Pugh. Thanks a ton!

If you are curious, check out the previous version that’s full of fantasy stories 🌈🦄 😆.