Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

React technology 2021 React Technology 2021 React Technology (Used to read articles and documents, now feel a little uncomfortable to brush the video, the stand-up teacher spoke very well, too detailed but also good.)

Introduction of the React

“JavaScript libraries for building user interfaces”. In plain English: an open source JavaScript library that renders data as HTML views.

React was developed by Facebook and announced as open source in May 2013.

What problem does React solve?

  • Native JavaScript manipulation of the DOM is cumbersome and inefficient (DOM-API manipulation of UI).
  • Using JavaScript to manipulate the DOM directly, the browser does a lot of redrawing and rearranging.
  • Native JavaScript has no componentized coding scheme and low code reuse rate.

What’s special about React?

  • Componentized mode and declarative coding are adopted to improve development efficiency and component reuse rate.
  • React Native allows you to use the React syntax for mobile development. (You can write Android and IOS apps using React syntax)
  • Virtual DOM + Diffing algorithm is used to minimize the interaction with real DOM.

The React to fit

  • react.developmen.js: React core library
  • react-dom.developmen.js: used to support DOM manipulation with React
  • babel.min.js: Used to convert JSX to JS

Virtual DOM Creation

  • JSX way:

  • JS way

Babel translates JSX into a function call called react.createElement ().

Virtual DOM vs. real DOM

Virtual DOM:

  • Objects of type Object in nature (generic objects)
  • The virtual DOM is “light” and the real DOM is “heavy” because the virtual DOM is used internally by React and does not need to mount as many properties as the real DOM.
  • The virtual DOM will eventually be converted into the real DOM by React and rendered on the page.