watch?v=b8pAPWsWIE4&t=400s

Hooks make it easier to manage state and side effects in functional components, promoting the use of functional programming patterns in React. React Hooks represent a significant shift in how developers can write and manage React components, simplifying the process and enhancing code readability and maintainability.

**Benefits**: - Hooks enable you to organize component logic in a more reusable way. - They can help you avoid the complexities of class components. - They make it easier to share stateful logic between components.

**Rules of Hooks**: There are a few important rules to keep in mind when using hooks: - Only call hooks at the top level of your React function. Don’t call them inside loops, conditions, or nested functions. - Only call hooks from React function components or custom hooks. Don’t call them from regular JavaScript functions.

Built-in Hooks**: React provides several built-in hooks, including: - `useState`: Allows you to add state to functional components. - `useEffect`: Lets you perform side effects in your components, such as data fetching, subscriptions, or manually changing the DOM. - `useContext`: Allows you to access context values without needing to use a Consumer component. - `useReducer`: A more advanced state management hook that works similarly to `useState` but is more suitable for managing complex state logic. - `useRef`: Allows you to create mutable refs that persist for the full lifetime of the component.

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,