Please enable JavaScript.

Coggle requires JavaScript to display documents.

React-JS A JavaScript library to build User Interface - Coggle Diagram

- - - - This is just a synthactical sugar in JavaScript and not an HTML code.
        
        It gets converted to :-
        
        React.createElement('div',{className: 'App'},React.createElement('h1', null, 'Hello World!'));
        
        This is only done by React so don't forget to import it.( and obviously export it wherever you want to use it)
  - - - Prefer stateless component as often as possible, because we should use state only when needed, as, having state in all the components and manipulating it from anywhere in your app, makes the app unpredictable and hard to manage, especially as it grows.
- - - - Creation
        
        constructor(props)
        
        Call super(props)
        
        DO : Set up State
        
        DON'T : Cause Side-Effects
        
        returns :- nothing
        
        static getDerivedStateFromProps(props, state)
        
        DO : Sync State
        
        DON'T : Cause Side-Effects
        
        returns :- state
        
        render()
        
        Prepare and Structure your JSX code
        
        returns :- JSX
        
        Render Child Components
        
        componentDidMount()
        
        DO : Cause Side-Effects
        
        DON'T : Update State Directly; only inside conditional blocks(as it causes infinite re-render)
      - Update
        
        static getDerivedStateFromProps(props, state)
        
        DO : Sync State
        
        DON'T : Cause Side-Effects
        
        returns :- state
        
        shouldComponentUpdate(nextProps, nextState)
        
        DO : Decide whether to continue update process or not
        
        DON'T : Cause Side-Effects
        
        returns :- boolean, depending on whether to update or not. (default is bold)
        
        render()
        
        Prepare and Structure your JSX code
        
        returns :- JSX
        
        Update Child Components Props
        
        getSnapshotBeforeUpdate(prevProps,prevState)
        
        DO : Last-minute DOM ops
        
        DON'T : Cause Side-Effects
        
        returns :- any value( primitive, or objects), which is further passed to componentDidUpdate in the 3rd argument
        
        1 more item...
        
        if you are checking all of the props and only then you want to re-render the DOM, then instead of extending to Component, React also has PureComponent
      - Unmounting
        
        componentWillUnmount()
    - - useEffect()
        
        componentDidMount() alternative
        useEffect(()=>{**code**},[])
        
        componentWillUnmount() alternative
        useEffect(()=>{code
        return ()=>{excuted while unmounting}},[])
        
        shouldComponentUpdate() alternative:-
        use React.memo() to wrap the functional component while exporting
  - - - You can create a wrapper component, which only return its child
        
        const aux = props => props.children
      - You can also use React.Fragment while using React 16 or above.
        
        just wrap the JSX component with <React.Fragment> component.
      - You can directly return array of JSX elements.
    - - import React from 'react';
        
        const WithClass = (WrappedComponent, className) => {
        
            return props => (
        
                <div className={className}>
        
                    <WrappedComponent {...props}/>
        
                </div>
        
            );
        
        };
        
        export default WithClass;
  - - - Creating context
        const AnyContext = React.createContext(default_context_object)
      - Providing Context
        
        use Provider wrapper
        
        <AuthContext.Provider value = {custom_context_object}>
        
        {all the child components, you want to let them subscribe to this context}
        
        </AuthContext.Provider>
      - Consuming Context
        
        inside render() function
        
        use Consumer wrapper which takes function as a child with context object as an argument
        
        <AuthContext.Consumer>
        
        {(context) =>{ use the context anywhere you want and return a JSX element}}
        
        </AuthContext.Consumer>
        
        inside component
        
        in class-based component, you can call the context by declaring static contextType = AuthContext; and use it using this.context anywhere you want.
        
        in functional component, you can call the context by declaring const authContext = useContext(AuthContext) and use it using authContext anywhere you want.
- - - - Passing
        
        If the path of <Route/> component contains colon ':' in it (for eg <Route path="/:id"), it is then stored inside match.params object as a key value pair which is then passed as a props to the Routed Component.
        
        <Route path="/:id" component={Post}/>:- Here the Post component will be routed whenever the url is anything concatinated with /.
      - Extracting
        
        Inside the Routed component, we can acces this param, using props.match.params.
        
        For eg, <Route path="/:id" component={Post}/>, on browsing to url: localhost:3000/12, will render <Post/> component with match.params having object as {id : "12"}
    - - Passing
        
        Query Params
        
        You can pass them like this:-
        
        <Link to="/my-path?start=5">Go to Start</Link>
        
        <Link to={‌{pathname: '/my-path', search: '?start=5'}}>Go to Start</Link>
      - Extracting
        
        React router makes it easy to get access to the search string: props.location.search. But that will only give you something like ?start=5
        
        You probably want to get the key-value pair, without the ? and the =, here is the snippet:-
        
        componentDidMount() {
        
              const query = new URLSearchParams(this.props.location.search);
        
              for (let param of query.entries()) {
        
                    console.log(param); // yields ['start', '5']
        
              }
        
        }
        
        URLSearchParams is a built-in object, shipping with vanilla JavaScript. It returns an object, which exposes the entries() method. entries() returns an Iterator - basically a construct which can be used in a for...of... loop (as shown above).
    - - Passing
        
        Query Params
        
        You can pass them like this:-
        
        <Link to="/my-path#start-position">Go to Start</Link>
        
        <Link to={‌{pathname: '/my-path', hash: 'start-position'}}>Go to Start</Link>
      - Extracting
        
        React router makes it easy to extract the fragment. You can simply access props.location.hash