Please enable JavaScript.

Coggle requires JavaScript to display documents.

React - Coggle Diagram

- - - - Pre Requisites
        
        Array methods
        
        Basic understanding of ES6 features
        
        HTML, CSS & JS
      - Only deals with the view layer
      - Very simple & Lightweight
  - - - Issue
        
        Updating DOM is usually the bottleneck
        when it comes to the web performance
      - solution
        
        Virtual DOM
        
        I
        
        A DOM is kept in memory
        
        II
        
        Any chances are reflected in virtual DOM
        
        III
        
        efficient Diff Algorithm compares previous and
        current states of the virtual DOM
        
        IV
        
        Calculates the best way to apply these changes (min updates required)
        
        V
        
        finally those updates are applied to DOM
        to ensure min read/write time
  - - - advantages
        
        easier to develop
        
        maintain & grow codebase
        
        consistent look & feel
      - Ex: Button Component
        
        with component
        
        reusing the component
        
        Button component
        
        w/o component
        
        o/p
        
        What is Component?
        
        Component is just a plain JS fn which takes props as an argument and returns a react element
      - A piece of UI that can be used in various parts
        of an application to build more than one UI instance