{props.name}
{props.email}
{props.phone}
======================================================================================== 14) What are the types of Conditonal Rendering in JSX ======================================================================================== 1) if, else statement 2) Ternary operator 3) && operator 4) switch statement multiple statement ke liye use karte hai if, else if, else --------------------- 1) if, else statement --------------------- if (2 > 1) { return (abc) } else if(5>4) { return (xyz) } else { return (xyz) } --------------------- 2) Ternary operator --------------------- single statement ke liye use karte hai Ternary oprator data?ready to HIDE SHOW
: null myuser==1?&& operator run
======================================================================================== 15) What is TRANSPILER? What is the diffeence between COMPILER & TRANSPILER? ======================================================================================== ------------ TRANSPILER ------------ jab hum kisi code ko kisi language ko kisi dusri language me convert kare hai, transfor karte hai, jis tool ki help se hum ye karte hai useee TRANSPILER kahte hai LIKE JSX to Regular JavaScript by help of Bebal Bebal is TRANSPILER defination A Transpiler is a tool that convert source code from one high-level programming language (JSX) to another high-level programming language (JavaScript) Exaple: BABEL ------------ COMPILER ------------ A compiler is a tool that convert high-level programming language (java) into a lower-level programming language (machine code or bytecode). ======================================================================================== 16) Defference between function component and class component ======================================================================================== ------------------- function Component ------------------- 1) Synta: Define as a JavaScript function 2) state: Originally sateless but can now maintain state using hooks 3) Lifecycle methods: No 4) Readability: more radable & concise 5) This keyword: No 6) do not have render method ------------------- Class Component ------------------- 1) Define as a (es6) class 2) state: Can manage local state with this.state 3) Lifecycle methods: Yes 4) Readability: Verbose (Complex) 5) This keyword: Yes (Access props using this.props) 6) have render method ======================================================================================== 17) Whtat is ROUTING and ROUTER in React? ======================================================================================== ROUTING:- Routing allows you to create a single page web application with NAVIGATION without the need for a full-page refresh REACT ROUTER:- React Router is a library for handling routng and enables navigation and rendering of different complonents based on the url React Router is a JavaScript library that helps developers create single-page applications (SPAs) with dynamic routing ======================================================================================== 18) What are React Hooks? What are the Top React Hooks? ======================================================================================== React Hooks are inbuild functions provided by React that allow functional components to USE STATE and LIFECYCLE FEATURS ---------- TOP HOOKS ---------- 1) useState stae 2) useEffet; Side Effect 3) useContext Context 4) useReducer Complex state 5) useCallback Memoiztion 6) useMemo Performance 7) useRef Refs 8) useLayoutEffect Synchornous Dide Effects ======================================================================================== 19) What are State, Stateless, stateful and State management terms ======================================================================================== https://www.youtube.com/watch?v=qyUUxJhYp5Y 1) jo component state ko carry karte hai or state ko update karta hai wo = STATEFULL component hote hai 2) jo component state ko carry nahi karte hai wo = STATELESS component hote hai STATE:- state refer to the current data of he components STATEFUL:- Stateful or state management means, when a user performs some actions on the UI, then the React applicaton should be able to UPDATE AND RE-RENDER THAT DATA OR STATE on the UI ======================================================================================== 20) What is the role of useState() hook and how it works ======================================================================================== The useState hook enables functinal complonents to MANAGE STATE useState() working: usestate() function accept the initial state value as the parameter and returns an array with two elements 1) The first element is the current state value (count in this code) 2) Second element is the function that is used to update the state (setCount in this code) The concept of assign array elements to individual variables is called ARRAY DESTRUCTURING. ======================================================================================== 21) What is the role of useEffect(). How it works and what is its use? ======================================================================================== The useEffect hook in react is used to perform SIDE EFFECTS in fuctional components For example, data fetching from API, subscriptions or any other opration that needs to be performed after the component has been rendered jab hum API se data late hai to useEffect hooks ka use karte hai. useEffect component ke render hone ke baad, component ke load hone ke baad, call hota hai. useEffect ke 2 paremete hote hai 1) function => useEffect ke under ek function hota hai 2) array => [] useEffect(()=>{ fetch("") },[]) ======================================================================================== 22) What is Dependencyh Array in useEffect() hook ======================================================================================== Dependencies arrays (optonal) act as triggers for useEffect to rerun; meaning if any of dependencies values change, the code inside useEffect() will be executed again. useEffect(()=>{ fetch("") },[userId]) id change hone per useffect bar bar call hoga arrray isliye lete hai => multiple dependency hosakti hai, userid, username, ======================================================================================== 23) What is the meaning of the empty array [] in the useEffect() ======================================================================================== An empty array[] indicates that the effect function should only RUN ONCE. useEffect(()=>{ fetch("") },[]) ======================================================================================== 24) What is the role of useContxt() hook ======================================================================================== useContext in React provides a way to pass data from parent to child component without using props Drilling. ======================================================================================== 25) What is createContext() method? What are provider & Consumer properties? ======================================================================================== 1) createContext() function returns an object with PROVIDER and CONSUMER properties 2) The provider property is responsible for providing the context value to all its child components 3) useContext method or consumer property can be used to consume the context value in child components ======================================================================================== 26) component life cycle phases ======================================================================================== 3 phase of life cycle method 1) Mounting 2) Updating 3) Unmounting ======================================================================================== 27) What is the role of SUPER KEYWORD in constructor? ======================================================================================== 1) super keyword is used in the constructor of a class component to call the constructor of the parent class super keyword => parent class ke component ke constructor ko use karne ke liye hota hai ======================================================================================== 28) What are CONTROLLED COMPONENTS in React ======================================================================================== A controlled component is a component whose form elements (LIKE INPUT FIELDS OR CHECKBOXES) are CONTROLLED BY THE STATE of the application ======================================================================================== 29) What are the ADVANTAGES of using controlled components in React Forms? ======================================================================================== In controlled components form elements have their values managed by react state, ensuring a SINGLE SOURCE OF TRUTH ======================================================================================== 30) How to handle forms in React ======================================================================================== The preferred and recommended approach for hangling forms in React is BY USING CONTROLLED COMPONENTS forms ko controlled component ke sath use karna chahiye ======================================================================================== 31) How do you handle form validation in a controled component ======================================================================================== By using conditional rendering based on the state and validate input values before updating the stete. ======================================================================================== 32) What is CODE SPLITTING in React ======================================================================================== Code splitting is a technique to split the javaScript bundle into SMALLER CHUNKS, which are loaded on demand ======================================================================================== 33) How to Implement code splitting in React ======================================================================================== 3 setps for code splitting in react 1) use React.lazy() to lazilyh immport components 2) Wrap components with SUSPENSE to handle loading. 3) Configure your build tool (e.g. Webpack) for dynamic imports ======================================================================================== 34) What is a Higher-Order Component in React? ======================================================================================== A Higher-ordre Component is a component which takes ANOTHER COMPONENT AS AN ARGUMENT and adds extra features to another components ======================================================================================== 35) What are the 5 way to style React components? Explain inline styles ======================================================================================== 1) inline styles => style={{background: "#b1e6e9", padding: "15px"}} 2) normal styles => index.css, app.css 3) css-Modules => custome.modules.css 4) Global Stylesheet 5) Css Frameworks => like bootstrap ======================================================================================== 36) What are the difference between React and React Native ======================================================================================== -------- React -------- 1) React is a library 2) React is used for building web interfaces 3) Run on Web Browsers 4) HTML and css are used for UI 5) Deployed as web applications -------- React Native -------- 1) React Native is a framework 2) React Native is used for Building mobile applications 3) Run on iOS and Android platforms 4) Native UI components (e.g. view, Text) are used for UI 5) Deployed through app stores (e.g. App Store, Google Play) ======================================================================================== 37) What are the top 3 way to achive state management? When to use what in react ======================================================================================== 1) useState Hooks 2) Context API 3) Redux ---------------- useState Hooks ---------------- 1) When to use:- Simple component-level state 2) Reason: ideal for applications having small components and isolatd state because it is Lighweight and built into React only. ---------------- Context API ---------------- 1) When to use:- Props Drilling avoidance for sharing global data 2) Reason:- simplifies data passing through the component tree, recucing the need for manual props drilling ---------------- Redux ---------------- 1) When to use:- Large-scale applicatons with complex state. 2) Reason:- Centralized store and actions provide a predictable state menagement pattern aiding in debugging and scalablity. ======================================================================================== 38) What is the differnce between fetch & axios for api calls in React ======================================================================================== 1) https://www.youtube.com/watch?v=OFWATycG_Wc 2) https://www.youtube.com/watch?v=PKnd-DUaMxc ---------- fetch ---------- 1) fetch is a in-build javascript funciton, so it doesn't require any additional libraries. 2) fetch RETURN PROMISES, making it easy to work with asynchronous code using async/await syntax 3) if you want to keep HTTP REQUEST SIMPLE, fetch syntax a) Inbuild function b) Promise base Structure c) Manual JSON Transformation d) less Robust Error Handling e) No Timeout ---------- axios ---------- 1) Axios is a third-party library that simplifies the process of making HTTP reqests 2) Axios allows you to use interceptors, which can be good for tasks like request/response logging, authentication, and error handling 3) if you want to intercept multiple HTTP REQUEST/RESPONSE, or imporove error handling then Axios has more features to do it. a) External Library b) Simplified syntax c) Automatic JSON parsing d) Easyly Error Handling e) large bundle size ======================================================================================== 39) What are the populer TESTING LIBRARIES for React ======================================================================================== 1) jest 2) React Testing Library 3) Enzyme 4) Cypress 1) unit Testing = Testing individual units or components 2) intgegrated Testing = Testing between two unit or components/ multipule components 3) E-2-E Testing = Test start to end complete project ======================================================================================== 40) How can you OPTIMIZE PERFORMANCE in a Readt Application ======================================================================================== 1) use useMemo and useCallback 2) uee React.Fragment 3) Lazy Loading with React lazy 4) Code Splitting 5) optimizing Images and Assets ======================================================================================== 41) Async Await in JavaScript ======================================================================================== promise ko simple banane ke liye use hota hai Async/Await promise ke data ko get karte hai tab hum Async/Await ka use karte hai ASYNC == kisi function ke agge --async-- lagate hi to uska matlab hai ki hame PROMISE return karke do ye data mil raha hi ya data nahi mil raha hi AWAIT == thoda wait karo, jab tak DATA load nahi hota jab tak wait karo ======================================================================================== 42) useForm hook external === form validation ======================================================================================== npm i react-hook-form it is external react library for using form validation website like for demo https://www.react-hook-form.com/ ======================================================================================== 43) useQuery hook external === get api data ======================================================================================== 1) https://www.youtube.com/watch?v=zTbKVGKgJcs 2) https://www.youtube.com/watch?v=0tKtNZzdZic&t=7s 3) https://www.youtube.com/watch?v=CE4YIgaeAGs 4) https://www.youtube.com/watch?v=4gVgOHOqAnI&t=5s 5) https://www.youtube.com/watch?v=ZsdDrIl3OYw full course https://www.youtube.com/watch?v=KrruJTTwOgU DevTools https://www.youtube.com/watch?v=JjS8d85VOX4 ----------- DEFINATION ----------- It's a library that helps you manage the state of data you fecth from server, like APIs in your React applications TanStack Query, React Query, useQuery ARE SAME job bhi koi data fetch karte hai server/API se, usko handle or manage karne ka kaam react query ka hai data fetch karne ke liye use hota hia useQuery hook useQuery get mehtod ke liye use hota hai, data ko fetch karne ke liye useQuery me 2 argument hote hai, 1 (queryKey), 2(queryFn) queryKey me jo bhi data jayega agaer wo data change hoga to component render ho jayega const { data, isLoading, isError, error } = useQuery({ queryKey: ["posts"], // just like usestate queryFn: getAPIdata, // just like useeffect }); ---------------------- INSTALLATION ---------------------- https://tanstack.com/query/latest/docs/framework/react/installation npm i @tanstack/react-query // QueryClient import { QueryClient, QueryClientProvider } from '@tanstack/react-query' const queryClient = new QueryClient() // QueryClient