watch?v=b8pAPWsWIE4&t=400s

The React useState Hook allows us to track state in a function component.

State generally refers to data or properties that need to be tracking in an application.

The useEffect Hook allows you to perform side effects in your components.

Some examples of side effects are: fetching data, directly updating the DOM, and timers.

useEffect accepts two arguments. The second argument is optional.

useEffect(<function>, <dependency>)

useContext

React Context is a way to manage state globally.

The useRef Hook allows you to persist values between renders.

The useReducer Hook is similar to the useState Hook.

The React useCallback Hook returns a memoized callback function.

The React useMemo Hook returns a memoized value.

Custom Hooks

When you have component logic that needs to be used by multiple components, we can extract that logic to a custom Hook.

npm ERR! code ERR_SOCKET_TIMEOUT npm ERR! network Socket timeout

npm config set fetch-retry-mintimeout 20000

npm config set fetch-retry-maxtimeout 120000

https://github.com/sudheerj/reactjs-interview-questions#what-is-react

https://www.youtube.com/watch?v=gFicda3xgKc

https://medium.com/zonayeds-diary/tagged/react-bangla

https://bn.reactjs.org/tutorial/tutorial.html#before-we-start-the-tutoria

'rafce' React.js shortcut

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

React Router

$ npm install react-router

clg (short cut)

rfc -functional

rfce

rcc-class

console.log(first)

https://reactrouter.com/docs/en/v6/getting-started/installation#create-react-app

extention

https://marketplace.visualstudio.com/

https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md

particular folder cmd code . npx create-react-app my-first-app --template typescript

npx create-react-app customer-frontend

cd my-first-app npm start npm i react-bootstrap npm i bootstrap npm install react-redux npm install react-router-dom

Redux State

Hook
useState

Props

getAllSections() {

return axios.get(API_URL + 'GetSections', { headers: authHeader() });

}

addStudent(data:any) {

return axios.post(API_URL + 'CreateStudent',data, { headers: authHeader() });

}

updateStudent(data:any) {

return axios.put(API_URL + 'UpdateStudent',data, { headers: authHeader() });

}

deleteStudent(data:any) {

return axios.delete(API_URL + 'DeleteStudent/'+data, { headers: authHeader()});

}

export default new StudentService();

---------------------------------------------------

export default function authHeader() {
    const user_token = JSON.parse(localStorage.getItem('user_token') as string);
    if (user_token && user_token.accessToken) {
      return { Authorization: 'Bearer ' + user_token.accessToken };
    } else {
      return undefined;
    }
  }

function StudentList() {

  const [rowData,setRowData] = useState([]);
  const [isLoading,setIsLoading] = useState(true);
  let selectedItemId:number =0;

  useEffect(()=>{

    studentService.getAllStudents().then(resp=>{
      if(resp && resp.status == 200)
      {
        setRowData(resp.data);
        setIsLoading(false);
      }
    })
    
  },[]);
 const deleteRow = () =>{
    studentService.deleteStudent(selectedItemId).then(resp=>{
   alert(resp.data)
    });
  }
---------------------------



  

useContext + useReducer

https://www.w3schools.com/react/react_usecontext.asp

Hooks are a feature in React that allow you use state and other React features without writing classes

Hooks allow function components to have access to state and other React features

------------------------------------------------------------------------------

A representation of a user interface that is kept in memory and is synced with the “real”
DOM is called what? Ans : virtual DOM
virtual DOM: Lightweight JS Object which is the copy of the real dom

React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM,