React

  • React
    • The characteristics of the React
    • React is efficient
  • React
    • The js library
  • React JSX
    • Virtual DOM
    • JSX
    • Render the virtual DOM
    • Two ways to create a virtual DOM
  • Understanding of modules and components and modularity and componentization

React

The characteristics of the React

  • Declarative development
  • Component-based coding
  • Learn Once,Write Anywhere. Support client and server rendering
  • efficient
  • Unidirectional data flow

React is efficient

  • Virtual DOM, not always manipulating DOM directly
  • DOM Diff algorithm to minimize page redraw

React

The js library

  • React. Js: the core library for React
  • React-dom.js: the react extension for manipulating the DOM
  • Babel.js: library that parses JSX code into pure JS syntactic code

React JSX

Virtual DOM

  • React uses the API to create generic JS objects
const element = React.createElement('h1', {id:'id'}, 'Hello')
Copy the code
  • Virtual DOM objects are eventually converted to real DOM by React
  • React’s virtual DOM data will be converted to real DOM changes to update the data

JSX

  • JSX: JavaScript XML

    • React defines an XML-like JS extension syntax

    • React virtual DOM Object

      const ele = <h1>Chova</h1>
Copy the code
      • This is neither a string nor an HTML or XML tag
      • The result is a JS object

    • Any tag name: HTML tag or other custom tags

    • Tag attributes Any: HTML tag attributes or other custom attributes

  • Basic grammar rules:

    • Tags that start with < are parsed in tag syntax. HTML tags with the same name are converted to HTML elements. Other tags need special parsing
    • Tags that begin with {must be parsed in JS syntax. The JS code in the tag must be included with {}

  • What babel.js does:

    • Browsers cannot parse JSX code directly and need Babel to escape to pure JS code to run
    • Whenever JSX is used, add type= “text/ Babel” to the script tag, stating that Babel is needed for processing

Render the virtual DOM

  • Syntax: reactdom.render (virtualDOM, containerDOM)

    • VirtualDOM: a virtualDOM object created by pure js or JSX
    • ContainerDOM: The real DOM element object used to contain the virtual DOM element

  • What it does: Renders the virtual DOM to display in the real container DOM on the page

Two ways to create a virtual DOM

  • Pure JS mode:
React.createElement('h1', {id:'ids'}, msg)
Copy the code
  • JSX grammar:
const element =  <h1 id={ids}>{msg}</h1>
Copy the code

Understanding of modules and components and modularity and componentization

  • Module:

    • In order to solve the JS code more complex problems
    • Definition: a JS program that provides a specific function, usually a JS file
    • Function: reuse JS, simplify THE writing of JS, improve the running efficiency of JS

  • Components:

    • To solve a more complex interface function problem
    • Definition: a collection of HTML, CSS, and JS code used to implement locally specific functions
    • Function: reuse coding, simplify project coding, improve operation efficiency

  • Modular:

    • Write JS code in the form of modules, this application is modular application

  • Modular:

    • When an application is implemented as multiple components, it is a componentized application