Please enable JavaScript.

Coggle requires JavaScript to display documents.

reactJS - Coggle Diagram

- - - - ES6 Class extending React.Component
        
        receives properties => returns a declaration that
        
        contain their own private data - state
        
        can hold private state
        
        good for complex UI logic
        
        provide lifecycle hooks
    - - simple JavaScript Function
        
        use whenever possible to keep App simple & maintainable
        
        receives properties => returns a declaration (JSX)
        
        no "this" keyword
        
        hooks & state is available to use in functional components in React version 16.07.00 and later
  - - - BINDING Event Handlers
        "this" keyword is undefined in an event handler!
        => event binding is necessary in react class components
        
        VARIOUS WAYS TO BIND A HANDLER
        
        1) BIND THE HANDLER IN THE RENDER METHOD (PERFORMANCE ISSUES)
        <button onClick={this.clickHandler.bind(this)}>Click</button>
        
        2) USE ARROW FUNCTIONS IN THE RENDER METHOD (okay for simple tasks like parsing parameters)
        (auto-binds)
        <button onClick={() => this.clickHandler()}>Click</button>
        
        3) BINDING IN THE CONSTRUCTOR (BEST PRACTICE)
        
        constructor(props) { super(props); this.state = { message: "Hello", }; this.clickHandler = this.clickHandler.bind(this); }
        .
        in the render-method do this:
        <button onClick={this.clickHandler}>Click</button>
        
        4 USE AN ARROW FUNCTION AS A CLASS PROPERTY
        define the clickhandler function
        differently (WORKD GOOD, BUT IS NEW FEATURE) clickHandler = () => { this.setState({ message: "Goodbye!!", }); };
  - - - (a lot of code)
        constructor(props) { super(props); this.state = { isLoggedIn: false, };}
        
        render() { if (this.state.isLoggedIn) { return <div>Welcome Vishwas</div>; } else { return <div>Welcome Guest</div>; }
    - - use variables to store elements
        (still long code)
        render() { let message; if (this.state.isLoggedIn) { message = <div>Welcome Vishwas</div>; } else { message = <div>Welcome Guest</div>; } return <div>{message}</div>; }
    - - can be used inside JSX
        (short & readable)
        render() { return this.state.isLoggedIn ? ( <div>Welcome Vishwas</div>
        ) : (
        <div>Welcome Guest</div>
        );
        }
    - - use for render something OR nothing
        ( only if the left side of the operator is true, the right side will get executed )
        return render() { this.state.isLoggedIn && <div>Welcome Vishvas</div> }
  - - - List index can be used as key-value to uniquely identify items
        (LAST RESORT TACTIC)
        const nameList = names.map((name, index) => ( <h2 key={index}> {index} {name} </h2>)); return <div>{nameList}</div>; }
        
        the index can be passed as the 2nd parameter of an arrow function
        
        ONLY USE WHEN:
        1) The intems in your list do not have an unique ID
        2) The list is a static list, and will not change
        3) The list will never be re-ordered or filtered
        Otherwise the items will get identified and filled incorrectly