Please enable JavaScript.

Coggle requires JavaScript to display documents.

ReactJS - Coggle Diagram

- - - - map
        
        newArray = array.map(function(value){return value + "hi!"})
        
        used for
        
        wrapping value on array
        
        displaying value on array + dom element
      - filter
        
        newArray = array.filter(function(value){ return 1 if true, 0 if false})
        
        used for
        
        eliminating value on array
  - - - javascript + html
    - - dynamic website
      - real-time
      - simplicity
      - security
        
        prevents injection
      - expression
        
        variable
        
        conditional/loops
        
        return
  - - - ReactDOM.render(JSXElement, rootElement)
    - - movie frame
      - change: re-render
        
        only update what's changed
    - - if/etc
      - return null
  - - - functions
        
        return
        
        when
        
        visual
        
        stateless
      - objects
        
        render(){return()}
        
        when
        
        state
      - composition
    - - read-only
      - passed top-down
      - contains
        
        value
        
        function
        
        children
        
        innerHTML
  - - - purpose
        
        benchmark to dynamic things
        
        data
        
        passed to props
        
        single source of truth
      - usage
        
        object component
        
        setState
        
        declare
        
        constructor
        
        asynchronous
        
        use functions
        
        setState((prevState, props)=>{})
        
        setState(prevState => return {count: prevState.count + 1})
      - nature
        
        asynchronous
        
        callback available
        
        shallow-merge
        
        use map and spread
    - - purpose
        
        event
        
        trigger
        
        conditions
      - usage
        
        componentDidMount
        
        when?
        
        after DOM first rendered
        
        good for
        
        fetch data
        
        componentDidUpdate
        
        when?
        
        new things
        
        comparing past state & props with present
        
        good for
        
        reacting to changes
        
        note
        
        prevProps, prevState
        
        componentWillUnmount
        
        when?
        
        about to end
        
        good for
        
        clean up
        
        shouldComponentUpdate
        
        when?
        
        new things
        
        asking permission to update
        
        good for
        
        updating DOM with condition
        
        note
        
        returns boolean
        
        nextState argument
  - - - event as props
        
        top-bottom
      - prevent default
      - refers an function/method
  - - - unique
      - helps react
  - - - setState((state, props)=>{e.target.id: whatever}})
    - - currentOption = value
    - - locked
        
        value = nul
- - - - immutable
    - - everywhere
  - - - never mutate arguments
  - - - boss
        
        left wing keeper
        
        right wing keeper
    - - checking items
      - dispatch orders
  - - - anatomy
        
        type
        
        constant
        
        best if modularized
        
        helps reducer
        
        payload
      - what?
        
        orders to dispatch
        
        describes what happens
      - action creator
        
        what?
        
        function
        
        returns action
        
        code reuse
    - - what?
        
        receives orders
        
        "how state changes"
        
        controls store
      - anatomy
        
        previousState
        
        initialize state if empty
        
        ideal state shape
        
        key:value for objects
        
        arrays (recommended)
        
        action
        
        case what to do and how
      - root reducer
        
        combineReducers
        
        object
        
        state
        
        responsible reducer
        
        modularized
        
        createStore(rootReducer)
    - - what?
        
        state container
        
        modified by
        
        reducer
        
        viewed by
        
        components
      - usage
        
        createStore(rootReducer)
  - - - what?
        
        HTML/JSX element
        
        higher order component
        
        access to store
      - usage (best practices)
        
        wraps on index.js
      - anatomy
        
        store props
    - - what?
        
        connects component to provider's store
        
        allow to perform view & dispatch
      - anatomy
        
        mapStateToProps
        
        what?
        
        function
        
        returns state as props
        
        you can filter here
        
        anatomy
        
        state
        
        mapDispatchToProps
        
        what?
        
        function
        
        returns dispatch as props
        
        as object
        
        dispatch:function
        
        anatomy
        
        dispatch
        
        YourComponent
    - - npm i react-redux
- - - - JSX