Front-endReact

Introduction

  1. React Family Bucket

    React core

    React- Router routing library

    PubSub message management library

    Redux centralized state management library

    Ant-Design UI component library


  2. React definition

    React: A JavaScript library for building user interfaces. The interface is the view. React is an open-source JavaScript library that renders data into HTML views.

    For example, the process of obtaining backend data and presenting it includes:

    1. Send a request to get data

    2. Process the data (filtering, formatting, etc.)

    3. Manipulate the DOM to render the page


    Regardless of the first two steps, React is only responsible for operating the DOM to render the page, and the first two steps still need to be operated by itself. In the first two steps, React does not have its own encapsulation method.


  3. Developed by Facebook, and open source

    It was deployed in Facebook and other newsfeeds in 2011, and was announced as open source in May 2013.


  4. Native JS Disadvantages

    1. The operation of DOM in native JS is cumbersome and inefficient. Complicated refers to troublesome coding, and low efficiency refers to the browser having to rearrange and draw every DOM operation.

    2. Using JS to directly manipulate the DOM, the browser will do a lot of redrawing and rearranging.

    3. Native JS has no component coding scheme, and the code reuse rate is low.

    Modularization: split a JS into several small JS files according to the function points.


  5. React Features

    1. Component mode, declarative coding, improves development efficiency and component reuse rate.

      Imperative: order the machine how to do things (how), so that no matter what you want (what), it will be implemented according to your order.

      Declarative: tell the machine what you want (what), let the machine figure out how to do it (how).

    2. In React Native, React syntax can be used for mobile development.

      React Native is to allow front-end staff to write IOS and Android applications with JS.

    3. Use virtual DOM + excellent Diffing algorithm to minimize interaction with real DOM.


  6. JS knowledge to master in learning React

    Judging this point, class, ES6 grammar specification, npm package manager, prototype prototype chain, common methods of arrays, modularization.


  7. Using React (learning version 16.8 + new version) 4 packages

    1. Babel.min.js Babel has two uses: ES6 to ES5, JSX to JS.

    2. Prop-types.js prop library in React class components

    3. React.development.jsReact core library

    4. React-dom.development.js React extension library for manipulating DOM


  8. React Coding

    1. First, there must be a container, similar to a mount point. <div id="test"></div>

    2. Import the React package. react.development must be imported before react-dom.development. Finally, introduce babel.

    3. Before writing JS, you need to write it in the tag <script>. The full name of the tag is <script type="text/javascript"> where type can be omitted. In React, because JSX needs to be written, the tag is <script type="text/babel">.

    4. Create virtual DOM const VDOM = <h1>Hello, React</h1>

      Do not write " " here, because it is not a JS string, but a JSX virtual DOM.

    5. Render the virtual DOM to the page

      ReactDOM.render(virtual DOM, container)

      ReactDOM. render(VDOM, document. getElementById('test'))

      This is the only place in React where you need to manipulate the DOM yourself.


  9. Warnings and Errors

    You are using the in-brower Babel transformer. Be sure to precompile your scripts for production -

    When beginners use the method of manually introducing the React library (such as Section React 1.1.7 & 1.1.8), the browser finds out that it is not JS when the script code is obtained. It depends on babel and the browser translates it on the spot. When there are many codes, the screen will be white, and it will run after waiting. Hence the yellow warning.

    Failed to load resource: the server responded with a status of 404 (Not Found)

    There is no icon for the website, after refreshing it is gone.


  10. Error-prone point

    1. Did not write mount point container <div id=""></div>

    2. const VDOM = '<h1>Hello, React</h1>' mistakenly added single quotes ' '

    3. <script type="text/babel"> is written as text/javascript

    4. Rendering twice is not an addition, but a replacement.


  11. Favicon

    When there is no icon, the console will report an error, and it will be canceled after refreshing.

    Failed to load resource: the server responded with a status of 404 (Not Found)

    Solution: Make an icon with the name/format favicon.ico and put it in the root directory.

    The icon will appear after a forced refresh. Force refresh: press and hold shift+refresh.


  12. Annotation shortcuts in scaffolding

    CTRL+SHIFT+ - , the selected area directly forms a {/* */} comment.


Share