Please enable JavaScript.

Coggle requires JavaScript to display documents.

React - Coggle Diagram

- - - - h1, span, div, table, hr ...
    - - Field, Treanslate, Languages
    - - is this a DOM element?
        ↓
        Yes
        ↓
        OK show this div on the screen
  - - - npm install -g creat-react-app
        
        global installation for react
      - create-react-app <name-of-the-project>
        
        create a new project
    - - npx create-react-app <name-of-the-project>
        
        combin the two functions above
    - - npm start
    - - ctrl+c
  - - - that produces HTML to show the user
        Using JSX
        
        handles feedback from the user
        Using Event Handlers
- - - - Customuze or configure a child component
- - - - JSX
        
        <div style={{backgroundColor:'red'}}></div>
      - HTML
        
        <div style="background-color:red;"></div>
    - - HTML
        
        <labal for="name" class="label">enter name:</labal>
      - JSX
        
        <labal for="name" className="label">enter name:</labal>
  - - - Object As Text
- - - - Super is a reference to the parent's constructor function
  - - - state is a function that gets put on our app component automatically when
        we extended React.component.
      - Anytime that you want to update your state you're going to call set state.
- - - - Understanding
        useState
        
        const [
        
        activeIndex
        
        setActiveIndex
        
        ] = useState(
        
        null
        
        2 more items...
        
        Function to
        change this
        piece of state
        
        piece of
        state
        
        If we want to have multiple pieces of states, we call state multiple times. (unlike class)
      - when we call to the setActiveIndex the component is going to rerender with the value that we provided in the setActiveIndex
    - - useEffect(() => {}
        
        useEffect Second
        Arugment
        
        }
        
        []
        
        Run at initial render
        
        ...nothing...
        
        Run at initial render
        
        Run after every rerender
        
        [data]
        
        Run at initial render
        
        Run after every
        rerender IF data has
        changed since last render
      - Canot be an async function inside
        
        1) we can make a new variable and asine to it a async function inside the useEffect
        
        2) (async ()=>{}) ()
        it will make a function and ivoke it imidiatly
        
        3) use promise and .then.catch
      - The return cleanup function
        
        can return only function
        
        will invoke the function only befor the next useEffect will start
- - - - Can produce JSX to show content to the user
    - - Can produse JSX to show content to the user
      - can use the Lifecycle Method system to run code at specific in the time
      - Can use the 'state' system to update content on the screen
- - - - User clicks on something
    - - User change text in an input
    - - User submit a form
- - - - Navigation for dom-based apps (we want this)
    - - Navigation for react-native app
    - - code navigation lib - we dont install this manually
    - - Binding between Redux and react router
  - - - Extracted 'path'
        
        The function react do
        extractedPath.contains(path)
    - - <Route path="/" exact component={PageOne}/>
    - - <link to="url"/>
    - - BrowseRouter
        
        Uses everything after the TLD (com,net) or port as the 'path'
      - HashRouter
        
        Uses everything after a # as the 'path'
        add /#/ to the url
      - MemoryRouter
        
        Doesnt use URL to track navigation
        wont chage the url if we change page with link
- - - - render
        
        content visible on screen
        
        componentDidMount()
        
        Sit and wait for update
        
        componentDidUpdate()
        
        Sit and wait until this component is not longer shown
        
        1 more item...
        
        פונקציה שתופעל אחרי כל פעם
        שהקומפוננט עודכן
        
        Good place to more data-loading
        when state/props change
        
        פונקציה שתופעל פעם אחת אחרי
        שהקומפוננט יעלה על המסך
        
        Good place to data-loading
        
        Avoud doing anything besides return
      - good place to one time setup
    - - ShouldComponentUpdate()
      - getDerivedStateFromProps()
      - getSnapshotBeforeUpdate()
- - - - function built into modern browsers
    - - 3rd party package
      - installation
        
        npm install --save axios
        
        import axios from 'axios';