React components are the building blocks of any React application. Components allow you to split the UI into independent, reusable pieces, and think about each piece in isolation. There are two main types of components in React: functional and class-based components.
Component Types
Functional Component: Functional components are simple JavaScript functions that return JSX (the UI structure). Since the release of React hooks, theyโve become the go-to method for creating components.
Class Component: Class components are older and more verbose than functional components. They were widely used before hooks were introduced. A class component extends React.Component and requires a render() method to return JSX.
To render a React component, use the ReactDOM.render() method to render components to the DOM. In index.js
Properties (known as Props in React) are arguments passed into React components. They are used to pass data from one component to another. In both functional and class components, props can be accessed as props.propName.
Please refer to the code to learn more about props!
State management is one of the most important concepts in React. The state allows components to keep track of dynamic data and render changes automatically when the state is updated. React provides two ways to manage state: using hooks (in functional components).
Definition of React Hooks
React Hooks are special functions introduced in React 16.8 that allow you to use state and other React features (like lifecycle methods) in functional components, which were previously only available in class components. Hooks simplify the way you manage state, handle side effects, and reuse logic across components. Built-in hooks include: useState, useEffect, and useContext.
Hooks follow a few key rules:
They must be called at the top level of a functional component.
They cannot be called inside loops, conditions, or nested functions.
They must be called inside React function components or custom hooks.
With the introduction of React hooks, functional components can now manage state using the useState hook. It allows you to add state to functional components without converting them to class components. Refer to the example below to learn more about useState.
The useEffect hook is used to handle side effects in React functional components. Side effects can include things like:
Fetching data from an API
Manually updating the DOM
Setting up subscriptions or timers
Cleaning up resources
useEffect Simplified:
Effect Logic : This is where the side effect is placed. This can be an API call, a subscription setup, or any other logic you want to run after rendering.
Cleanup : This optional function is used to clean up the effect (such as canceling a subscription or clearing a timer) when the component unmounts or before the effect runs again.
Dependencies Array : This array specifies which values useEffect depends on. When these values change, the effect re-runs. If the array is empty (), the effect runs only once, after the initial render.
Key Concepts ofuseEffect
Runs after every render by default: By default, useEffect will run after every render (initial render + re-renders).
Control when it runs: By adding a dependencies array, you can control when the effect runs. For example:
An empty array[] runs the effect only after the first render (like componentDidMount).
Specific dependencies like [count] ensure the effect runs only when count changes.
Cleanup logic: You can return a function from useEffect that will run when the component unmounts or before re-running the effect. This is useful for cleaning up side effects like subscriptions or timers.
useEffect is essential for managing side effects in functional components, making it a powerful tool in any React project!
Forms in React work similarly to regular HTML forms but require more management, particularly when handling form state and submissions. React provides a way to manage controlled components where the formโs input value is handled by React state.
Explanation :
State Management : The useState hook manages the form state. Here, name is the current state value and setName updates it.
Handling Input Changes : The onChange event handler listens for user input and updates the state accordingly.
Submitting the Form : The handleSubmit function is triggered when the form is submitted, and event.preventDefault() prevents the default form submission (i.e., prevents the page from refreshing).
React Router is a powerful library used for handling navigation and routing in React applications. It enables your app to have multiple views or pages and lets you navigate between them without reloading the page (client-side routing). This makes the app more dynamic and responsive, improving the user experience.
๐๐ฎ๐ ๐ด๐ฌ - ๐๐ฟ๐ฒ๐ฎ๐๐ถ๐ป๐ด & ๐ฅ๐ฒ๐ป๐ฑ๐ฒ๐ฟ๐ถ๐ป๐ด ๐ฅ๐ฒ๐ฎ๐ฐ๐ ๐๐ผ๐บ๐ฝ๐ผ๐ป๐ฒ๐ป๐๐ 
