Basics of React ¢ React is a JavaScript library for building user interfaces (Uls), specifically for single-page applications (SPA). It allows you to create reusable components that efficiently update and render based on data changes. ¢ React was created by developers at Facebook and is used by many top tech companies, including Fortune 500 companies like Airbnb, Netflix, and Uber. ¢ React is flexible, allowing you to write code according to your needs, unlike rigid frameworks.Why React? * Single Page Application (SPA): React doesn't work on Multi-page applications (MPA) but focuses on SPAs where refreshing and reloading from the server is avoided. ¢ No Reload After Initial Load: Once the page loads, React ensures that there is no need for reloading, making it faster. * Client-Side Rendering (CSR): React uses CSR, which can make SEO (Search Engine Optimization) challenging, but it provides a fast and smooth user experience.* Component-Based Architecture: React's architecture is based on components (which are essentially functions), making it reusable and modular. ¢ Virtual DOM: React maintains a virtual DOM, which tracks differences between two versions of the DOM and only re-renders the changed part, increasing performance. React Components: ¢ Components are like functions and are the building blocks of a React application. ¢ There are two types of components: ¢ Class-Based Components: Can handle dynamic changes. ¢ Functional Components: Generally handle static changes, but with Hooks, dynamic changes can also be implemented.Bundlers in React: Bundlers help to package multiple JavaScript files into a single file for better performance. ¢ Popular bundlers: o Webpack o Vite © Parcel Vite: Vite is a bundler used to build and serve applications faster, especially during development. Although Vite is technically a bundler, it is also considered a framework because it provides a structured environment for managing application dependencies and builds.¢ To install Vite, run the following command: npm create vite@latest. ¢ Then it will ask for folder selection if you want to give a name you can or if you want to run in the same folder press (.) ¢ Once installed, run the command: npm install ¢ This installs the basic dependencies such as React, React-DOM, Babel, etc.Running Vite and React ¢ Vite runs on port 5173. ¢ To start the development server, use the command: npm run dev. ¢ The main working folder in Vite is src, where all your coding happens. Main Files in React: ¢ Main.jsx is the main entry point for your application. You should never modify this file unless you need to. ¢ App.jsx contains the core components and logic for your app. Initially, you can clear the content of App.jsx and App.css to start fresh.Component Naming in React ¢ In React, component names should always start with capital letters. ¢ When you import a component, please make sure you also import it using a capital letter. import Header from './Header';Exporting Components: ¢ React supports two types of exports: ¢ Default Export: You can import it with any name, and no need for curly braces. export default Header; import Header from ‘./Header'; Named Export: Must be imported using the exact name and requires curly braces. export const Header = () => {}5 import { Header } from './Header';Props props are making our components reusable. component ko call krte argument dena is prop. Props are attributes or an argument, during function calling. Props help in transferring the data/info.import React from ‘react’ function Person(props) { console. 1log(props) ; return ( export default Person|Hooks ¢ Hooks are pre-defined functions. ¢ Rendering:- sbse pehli baar nazar ana. ¢ Rerendering:- dom me kuch change krna , uska reflect in main UI , that is called rerendering. ¢ In react i can't change the value directly. useState() hook: (Note: The state is a fancy name for the variable.) * useState is a hook. * useState is a function and it returns me an array with two elements. The first is the state (counter) and the second is a function (setCounter) (jiski madat se state change hoga).¢ We cannot change state directly we need a function for that. ¢ Any change in state done bt the setCounter is observed by the component and that component will rerender itself. ¢ When we run the useState function it accepts an initial value(it can be anything). > number, string, empty array, and object, etc. let [counter, setCounter] = useState(5useEffect() ¢ It is a hook ¢ that accepts two things > callback function and dependecy array. ¢ dependecy array [state/props]— vo chije daalte hai jinke change hone se hmara useeffect fir se chita hai. ¢ Fetching data from APIs. Why do we use UseEffect? ¢ It is used for running side effects that do not directly affect the DOM (e.g., fetching data, updating the document title, etc.). ¢ React ensures that we tell it what we depend on when using useEffect. If we are using any state or prop inside the effect, we must mention them in the dependency array.useEffect(() => { console.log("This will run when ‘count’ changes"); 3, [count]);