ReactJavaScriptTypescript

Reactjs

Props

💡

import ReactNode

State & Handling Events (React Hooks)

React Router

React Hooks

Features of class based components hooks into function

useState

useEffect

useContext

useRef

useLocation

Context API

The React Context API is a way to share state between components without having to pass props down through the component tree. This can be useful for sharing data that is needed by many components, such as the current user or the current theme.

To use the Context API, you first need to create a context object. This can be done using the createContext() function. The context object will store the data that you want to share.

Once you have created a context object, you can provide it to any component in your app using the Provider component. The Provider component will make the context data available to all of its child components.

To access the context data in a child component, you can use the useContext() hook. The useContext() hook will return the context data for the current context.

NoteContext.js

NoteState.js

About.js

App.js

useLocation Hook

Use ref

it is an object that used to access a DOM element directly

its never re render element , just store current state of element

Lists & Key

Key - A string attribute that identifies items in lists of elements.

Key & value

Important

<React.Fragment> component is used as a wrapper to group multiple elements together without adding an extra DOM element.

The key prop is used to uniquely identify each element in the list, which is important for React to efficiently update the list when changes occur.

The <Project {...Project}/> component is likely rendering a single project based on the data provided in the Project object.

The spread operator (...) is used to pass all the properties of the Project object as separate props to the <Project> component.

react-intersection-observer

The react-intersection-observer package is a React implementation of the Intersection Observer API. It provides a way to monitor the visibility of different sections on a webpage and dynamically execute actions on the page header. The package has three main implementations: Hooks, render props, and plain children.