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

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

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

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

React Native, ReactJS, React. Js, React Native… How many times have you heard these somewhat similar terms lately? Are you confused about what they are?

If you’re a designer and your team uses (or are considering using) React technology, or you’re just curious about React, this article is for you.

In the text, I use only plain language and illustrations to explain the various terms in the React family and delve into what makes React so special. No code knowledge is required to read this article. I want you to familiarize yourself with some of the concepts so you don’t despair as you go along. Feel free to come back if you need a refresher.

Are you ready? Here we go!

Learning goals

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

  • What is DOM?
  • What is React? What aspects of it are suitable for application development?
  • How does React differ from jQuery?
  • What are the core concepts of React?
  • What is a responsive UI?
  • What are the benefits of components?

What you need to know about the Web

Let’s start with some terms that you’ve probably heard for years. First, DOM.

DOM

The full name of DOM is Document Object Model. Easy, right? It is the object model of the document.

Forget the concept for a moment. Let’s start with the famous “Web Browser” studio! Can you find DOM in the illustration below?

Is DOM… A tree? Yes, a tree! Oddly enough, a lot of things about computers are actually like a tree.

Let’s give DOM a nickname… How about Domo? Domo is a regular model for the studio “Web Browser”, where his job is to pose in front of portrait painters (or perhaps millions of artists).

A portrait is what you see when you view a website in a browser. The developer’s job is to be the director, telling Domo what to wear and what to pose. This will determine how the portrait ends up being painted. JQuery and React are both libraries that developers use as tools to communicate with Domo.

jQuery

JQuery is a JavaScript library that makes it much easier for developers to manipulate the DOM. And what role does he play in Domo’s story?

It’s a tool that makes it easier for developers to communicate with Domo, just like a mobile phone. You can easily call Domo anytime, anywhere. It’s much more convenient than it used to be (using native JavaScript), and remember before the telephone people had to be close enough to communicate simply.

For years, we’ve been using jQuery to communicate directly with Domo. It is convenient, but not without problems.

React

Allow me to introduce you to a new superhero: React.

With React, developers no longer need to communicate directly with Domo. React acts as a middleman between the developers and Domo. He reduced the cost of communication between the two, while simplifying the process of creating portraits.

React uses a number of techniques to solve some of the problems found in jQuery and other tools. Here are its three core technologies:

  • Responsive UI
  • Virtual DOM
  • component

Responsive UI

When using jQuery to update the DOM, you need to specify the elements to change at the right time and in the right order. This is equivalent to giving Domo step-by-step instructions on how to move his head, where to place his arms, where to pose his legs, and so on, for each portrait.

Damn, that sounds so boring and error-prone! Why not just tell Domo what you want to look like instead of telling him how to pose step by step?

Even cooler, imagine if you could keep a placeholder during the request to represent different variations of the same pose. React can do that!

This way, you don’t have to tell Domo which hat to wear every time the artist asks him to paint in an unused hat. You can just sit there and let him change his hat.

This technology is where the React name comes from. A UI built with React is responsive. As a developer, you just write what you want and React will figure out how to do it. When the data changes, the UI changes accordingly. You don’t have to worry about DOM updates anymore, React will do it for you automatically. The idea of a responsive UI greatly simplifies UI development.

I know I said you don’t need any coding knowledge, but just to help you put the problem in perspective, I wrote it in code anyway. See the following example (trying to change Domo’s hat):

Codepen online Demo: Domo’s hat.

I’ll cover the full code in a later article, but at this point you’ll only need to take a quick look at the key code:

const ThinkerWithHat = ({ hat }) = > (
  <div>
    <Hat type={hat} />
    <Thinker />
  </div>
);
Copy the code

Note that you only need to define what you want (the thinker in the hat) and “connect” the data (” type = {hat} “). When the data changes (the user selects a hat), the UI is automatically updated.

Virtual DOM

Another problem with jQuery is its speed.

As a demanding director, you hate waiting. You want the portrait done as quickly as possible. However, Both Domo and the painter are slow, not as slow as the tree wrasse, but Domo needs time to change and pose, and the painter needs time to paint.

To make matters worse, you can’t communicate with Domo until the painter has finished a portrait. In fact, there’s nothing you can do but wait. What a waste of time!

React uses another technology to solve this problem. React makes drafts super fast. When you tell him what you want, he will almost immediately have a draft ready for the next one. No need to wait now! You can keep telling React what portrait you want. React will record all the details of the draft and show it to Domo when appropriate.

More importantly, React is smart. He also organizes all drafts, removing duplicates and making sure that Domo and the artist’s work is kept to a minimum.

These drafts are called the “virtual DOM.” The virtual DOM is much faster than manipulating the DOM. Developers spend most of their time manipulating the virtual DOM rather than directly manipulating the real DOM. React manages this part of the DOM’s dirty work.

component

The third technology in React is the concept of components.

Components should be easy to understand, because the real world we live in is made up of components. Our cars, houses, and even our bodies are made up of different components. These components, in turn, are composed of smaller components, and so on, until they break down into atoms.

If you’re familiar with Sketch, the components are very similar to the symbols used in Sketch. Building a React application is almost always about working with components: finding the best fit, merging two components, creating new components on top of existing ones, and so on.

Back in the “Web Browser” studio, you describe the portrait requirements as components, and React translates those components into what Domo understands. This will save you a lot of time because you won’t have to repeat the generic parts of the requirement over and over again.

Another cool thing about components is that if you change a component, all the places that use that component are automatically updated.

conclusion

All right. I hope you learned something about React. Essentially, it’s a tool to help developers manipulate the DOM to build pages. Reactive UI, virtual DOM, and components are the three core concepts that make React so special. Of course, React has some other interesting concepts, such as unidirectional data streams, which I’ll cover in a later article.

In the next article, we’ll look at the connections and differences between ReactJS, React Native, and React Sketch.

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!