notes.md

Chapter-05 Let's get hooked

1. File structure in React

• structure on the bases of types (i.e based on features & type of file)

• Created folder structure

  • src -> all code
  • components -> all components

  src 
   |-- components
   |   |-- Header.js
   |   |-- Body.js
   |   |--RestaurantCard.js
   |-- App.js
   |-- config.js
   
  

2 Different ways to export:

• export default Component - only one component can be exported in default - then in import we use default import

• export by name - then in import we use named import

• Eg: there can be many components in the same file. So,

  • Named export :

    import {Title, Header} from './components/Header';
    

  • Default export :

    import Header from './components/Header';
    

  • Using both Default export & named export :

    import Header, {Title} from './components/Header';
    

  • Using * as "anyname"

    import * as Obj from './components/Header';
    
    Obj.Title
    

• Note: name can be different when exporting component. Eg: exporting Header component using default export

  import NewHeader from './components/Header';
  

• file name can be .js or .jsx (but generally .js is prefered.) Eg: Header.js or Header.jsx

  • without using extention

    import Header, {Title} from './components/Header';
    

  • using .js extention

    import Header, {Title} from './components/Header.js';
    

  • using .jsx extention

    import Header, {Title} from './components/Header,jsx';
    

• Best convention :

  • export default ComponentName
  • import Component from '/Path'

• Create config.js (or constant.js) file & put all "hard coded" values & data in it using export.

• In App

  • Search box [but can't change value in input box]

• One way binding in react

• If we need to change the value,

  • Every componenet in react maintains a state
  • So, You can put all variables in the state. Everytime you use local variable you should use state.

• Hook: just like normal function.

  • Eg: useState(): is used to create state variable

• Why hooks ?

  • Hooks allow you to reuse stateful logic without changing your component hierarchy.
  • Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data)

• useState() hook:

  • returns as array
    • and first element is a variable name (which is local state variable)
    • second arg is function to modify the state variable
    • Syntax:
      [variable name, function to update the variable] = useState()

• Every component in react maintains a state

• In Javascript	In React
  - Local Variable let searchText	- Local State Variable const [seacrhText, setSearchText] = useState()
  - Local Variable using default value let searchText = "Burger"	- Local State Variable using default value const [searchText, setSearchText] = useState("Burger")
  - In HTML <input type="text" onchange="fun()"/> <script> fun(e){ searchText = e.target.value} </script>	- InJSX <input type="text" onChange={e => setSearch(e.target.value)}/>

• Syntactic events in React Eg: e in `(e) => e.target.value

• get { useState() } from 'react';

  const [searchText] = useState(value);
  const [searchText, setSearchText] = useState(value);
  
  const searchVariable = useState(value);
  const [searchText, setSearchText] = searchVariable;
  
  setSearchText(e.target.value)
  value = { searchText }
  

• Why do we need state ? [Interview question]

• Two way binding Eg: updating state & displaying updated data on the fly (reading and writing )

• when useState() is used React re-renders the whole component (i.e reconciliation happens & only that small portion is updated where data has changed)

• const [restaurants, setRestaurants] = useState(restaurantList);
  
  onclick()
  const data = filterData(searchText, restaurants)
  
  setRestaurants(data);
  
  funciton filterData(searchText, restaurants) 
  {
    restaurants.filter (res => {
      res.data.name
    })
  }
  

• Note: In react we are using useState like this const [searchText, setSearchText] = useState("") isn't is against javascript rule as we are able to change the value of searchText which is of type const

• When we change this state variable using setSearchText it forces the component to re-render. Every time the component re-renders, the const is a new version of const with updated value.