The original link: learnreact. Design / 2017/06/20 /…

Why you love it: Illustrations are interesting and have a great perspective

Special thanks to Linton Ye, the original author

Blog series: Explain the React term in colloquial terms and doodles

  • The illustration the React
  • React Native diagram
  • Component, Props, and State
  • Understanding Props and State
  • React Native vs. Cordova, PhoneGap, Ionic, etc.

In our last post, we looked at what React is and what makes it so special. Today we’re going to talk about React Native: what it does, where it comes from, how it’s different from React, and why it’s so exciting.

Learning goals

After you’ve read this, hopefully you’ll come back here and be able to answer the following questions easily:

  • What is React Native? Why does it have “Native” in its name?
  • Why is React Native so cool?
  • What can we develop with React Native and React, respectively?
  • Why ReactDOM? What does it do?
  • What does the React renderer do?
  • How does React Sketch. App work?
  • How does ReactVR work?
  • What is ReactJS? What is react.js?

It’s not just the Web

The picture in your mind should look like this after the last passage:

As you know, React is a great tool for developing user interfaces on the Web. Using React to develop a UI, you can describe what you want instead of telling the UI how to update (reactive UI), organize code in reusable components, and create high-performance user interfaces without worrying about the ultra-slow DOM (virtual DOM). More and more developers are choosing React because it allows them to focus on upper-level business rather than low-level DOM update details. We call this approach to UI development the React paradigm. A paradigm is basically the way you think about a problem, the way the problem is described, and the solution.

This is great for Web applications. What about other platforms, like iOS and Android? Wouldn’t it be great to apply the React paradigm to native app development?

To some extent, the mobile side works the same way as the Web side. For example, there is a model (treant) and an artist who creates visual elements based on the model. Not surprisingly, the traditional way to build a native app UI is to directly manipulate the tree and tell it how to update (talk to the tree directly). This has a similar disadvantage to manipulating the DOM directly in a Web browser. React definitely helps with that.

In addition to the similarities, mobile is different from the Web in that it is completely different from system to system. In the past, developing native apps required learning specific language and platform toolchains.

It’s a bit like working in a foreign studio, where people need to speak different languages. You need to be fluent in all languages to communicate with all models. That sounds like a lot of trouble, doesn’t it?

So, if you want your native app to run on both iOS and Android, you need to create two completely separate code bases. The same business logic needs to be written twice. Developing applications is difficult and costly, especially when it comes to long-term maintenance.

That’s where React Native came in. Let’s see how it simplifies the development process.

React Native

The Renderer and the new React

For Web applications, React is responsible for enabling the React paradigm (managing the responsive UI, components, and virtual DOM) and actually updating the DOM in the browser (communicating with the Domo). React handles both tasks easily when the DOM is the only object that needs to be interacted with.

However, with native apps, things can become challenging when it comes to managing various “tree people” on different platforms. If we put more weight on React’s shoulders, our poor superhero will be freaking out.

To solve this problem, React founders split the original React into two parts. The first part is the new React, which is only responsible for enabling the React paradigm. The second part is called ReactDOM, and its sole task is to interact with the DOM in the browser. Since ReactDOM updates the DOM, and the DOM determines what the browser renders, we call ReactDOM a renderer.

Imagine our superhero taking off his cloak and sprinkling some magic dust on it.

The cloak instantly comes to life and becomes the superhero’s little sidekick. Freed from the shackles of being responsible for communicating with Domo, React can now focus on doing what he does best.

This idea of separation of roles is very powerful. Now we just need to maintain a shared core library and write a whole new renderer to accommodate the new platform. This way is much easier than before. Thanks to the strong support of iOS and Android renderers, you can now develop for both platforms using only one language and the same React paradigm.

React just needs to focus on what he’s good at. The renderer takes care of the communication.

A complete platform

The React website defines it as a JavaScript library used to develop the user interface. It has two meanings: first, it is a great tool for UI development, and second, it does not touch any other area except UI development.

In fact, you can’t build an entire app using React alone. For example, you need CSS for styling, you need WebPack for packaging, you need Firebase for data persistence, and so on.

The actual scene in the Web Browser studio is a lot busier than you’ve seen before.

This is fine in a Web development environment, because React is a JavaScript library, so it naturally fits in with other widgets in a Web environment. These widgets are either JavaScript libraries themselves or can be easily adapted to JavaScript. After all, JavaScript is the standard language on the Web.

However, it is more difficult for mobile, where multiple languages and technologies need to be supported. At this point, we need to include a whole set of widgets that behave like React, or at least can be called in JavaScript. Thus React Native was born.

React Native includes many more things than React on the Web:

  • – New React as the core library (our superhero, but without the cape)
  • A renderer for iOS and Android
  • Convert code into tools that can install applications
  • Native UI components (status bars, lists, and so on) and animations
  • UI Style and Layout Toolkit (Flexbox)
  • Building the basic parts of most applications (such as networks)
  • Parts that provide native functionality, such as stickboards, accelerometers, and storage
  • .

We say React Native itself is a complete platform because it contains everything you need to develop a complete application. In contrast, React was only responsible for the Web UI, and you had to reference the other parts yourself to create a Web application.

Composition of React Native

Native UI

Why does React Native have Native in its name? This is actually its signature feature: React Native’s built-in UI is made up of Native UI components that behave well and have a consistent look/feel, rather than some garbage simulation included in the WebView. Apps developed with React Native are often indistinguishable from Native apps developed with things like Swift and Java.

As you know, details like scroll acceleration, animations, keyboard behavior, and shadows actually play a very important role in the user experience of an application. If these things aren’t consistent with the rest of the apps on your phone, users can quickly get upset.

My original goal here is to explain what “native” really means and why React Native performs better. But I found that after a few brainstorming sessions, a whole page of my notes was quickly filled. I’ll talk about it separately in a later article.

For now, I just need you to remember that Native UI is one of the things that makes React Native shine.

By this point, you should know that React Native is a complete platform that allows you to develop true Native apps using JavaScript and write them the React way (the React paradigm).

React Sketch. App, ReactVR, React XYZ…

Airbnb recently released a really fun tool called React Sketch. App that converts React code into layers in Sketch. Can you guess how it works?

That’s right! It’s essentially React Native with a special renderer that communicates with the tree people in Sketch!

Because the React Sketch. App is based on React Native, it’s also a complete platform, so you can use it directly to capture data from the remote API and render it in Sketch.

At the same time, many other variations of React Native have been released to support the creation of apps on Windows, macOS, VR, and more.

This means that once you’ve mastered React, you can create apps using JavaScript on a wide variety of platforms, and support for new platforms continues to emerge. Different platform, same mindset. As the founders of React Native advocate: “Learn once, write anywhere.”

Action time!

So much for that! Do you want to try this on your phone?

I’m excited, too! Pick up your phone and move with me!

  1. Download the Expo app on your phone. You can download it here: iOS, Android, or search for “Expo” in the App Store.
  2. Open a web page on your computer: Snack. Expo. IO /.
  3. Launch the Expo app on your phone and click “Scan QR Code”.
  4. Scan the QR code displayed on the computer. If something works, you should see a green message saying “Device Connected.”
  5. If the QR code cannot disappear automatically, you can click the small fork in the upper right corner of the page to close. When closed, you should see the code editor.
  6. Delete all the code in the editor, then paste this code in.
  7. What do you see on your phone?
  8. Feel free to change the code in the editor and see the results instantly on your phone!

I’ll explain the development environment in more detail in a later article. For now, just remember that it’s the React Native Codepen (which I used to show the sample Domo hat in the previous article).

If you compare the React Native version to the React (Web) version, you’ll find that the code is very similar. It looks something like this:

const Hat = ...

const Thinker = ...

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

“Learn once, write anywhere”! Remember that?

What is ReactJS? What is React.js?

You’ve probably heard ReactJS (or React.js) a thousand times, and THAT’s what I call it. That’s not actually the official name. The official name has been “React” ever since it was born.

Since most JavaScript libraries tend to be named “XyzJS” or “xyz. js” and React is no exception, developers are probably used to adding “js” or “.js “suffix to library names. Because React was originally created as a Web library, many developers are used to using ReactJS or React.js to refer to React on the Web in general, which is a collection of React and ReactDOM.

By convention, when I say ReactJS, I mean React on the Web.

conclusion

All right, so far, we’ve covered quite a bit. We learned a little bit about the history of React and the composition of React Native. As a complete platform, React Native contains everything you need to develop Native apps, and it uses the JavaScript language and React paradigm. React Native now supports multiple platforms, including iOS, Android, Windows, macOS, Sketch. App, and even VR. “Learn once, write anywhere”!

In the next article, we’ll look at what a true Native app is and why React Native is one of the best ways to develop Native apps.

I encourage you to go back to your learning goals and see if you can answer all the questions. If you have any questions or comments, please leave me a message!