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 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
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
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,
----------------------------------------------------------------------------------------
Routing
Comments
Post a Comment