DEV Community

Salman Asu
Salman Asu

Posted on

2 1 1 1 1

Full Guide For React Developer

this post will help to understand all concept need to start working with projects.

let's begin !

(DOM) is a programming interface for web documents(page).
so that programs can change the document structure, style, and content.
The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

A component's lifecycle?
has three main phases: the Mounting Phase, the Updating Phase, and the Unmounting Phase.
The MountingPhase begins when a component is first created and inserted into the DOM.
The UpdatingPhase occurs when a component's state or props change.
And the UnmountingPhase occurs when a component is removed from the DOM.

what is components ?
Components are independent and reusable bits of code.
They serve the same purpose as JavaScript functions, but work in isolation and return HTML.
Components come in two types, Class components and Function components.

Class components and Function components difference ?

  • class components is more usefull when we want more controlled over every stage of lifecyle methode.
  • class component is traditional way for creating component.
  • with the help of hooks even now functional component can managed state. hooks was released in react 13.
  • Function components were considered "state-less". With the addition of Hooks, Function components are now almost equivalent to Class components.

react condition ?

  • Logical && Operator: e.g
{cars.length > 0 &&
      <h2>
        You have {cars.length} cars in your garage.
      </h2>
    }
Enter fullscreen mode Exit fullscreen mode
  • Ternary Operator: e.g
condition ? true : false
Enter fullscreen mode Exit fullscreen mode

usestate() ?
it is similar to variable in programming language. where we can store and update data or state.

useeffect() ?
it execute once when the component is created. and excute when there any change state added in depencency injection.
allow you to perform side effects such fetching data from an API, updating the DOM, or subscribing to an event.

useLayoutEffect() ?
The useLayoutEffect hook is similar to useEffect, but it’s executed synchronously after all DOM mutations.
This makes it useful for manipulating the DOM immediately after a component is rendered.
e.g. use useLayoutEffect to measure the size of an element

useReducer() ?
The useReducer Hook is similar to the useState Hook.
use when we want to manage more complex state management.
The useReducer Hook returns the current state and a dispatch method.

usecontext() ?
This hook in React is used to consume values from a React context.
It allows functional components to access the value provided by a context provider higher up in the component tree without the need for prop drilling.
Create a context e.g.

const MyContext = React.createContext();
Enter fullscreen mode Exit fullscreen mode

Provide a value using Context Provider e.g.

<MyContext.Provider value={value}>
Enter fullscreen mode Exit fullscreen mode

Consume the context value using useContext e.g.

const contextValue = useContext(MyContext);
Enter fullscreen mode Exit fullscreen mode

e.g. React Context is a way to manage state globally.

useCallback() ?
Memoizes a function, preventing it from being recreated on every render if the dependencies remain unchanged.
Useful for optimizing performance by avoiding unnecessary re-renders of child components.

useMemo() ?
It memoizes a value, preventing it from being recomputed on every render if the dependencies remain unchanged.
It’s useful for optimizing expensive calculations or complex data transformations.

useref() ?
The useRef Hook allows you to persist values between renders.
It can be used to store a mutable value that does not cause a re-render when updated.
It can be used to access a DOM element directly.
Often used for accessing or manipulating DOM elements.

useimperativehandle() ?
hook allows you to customize the instance value that is exposed to parent components when using ref.
it's like certain adding interface to parenet components.

usedebugvalue() ?
that allows you to display custom debugging information for custom hooks in the React DevTools.

Explain the building blocks of React ?
Components: These are reusable blocks of code that return HTML.
JSX: It stands for JavaScript and XML and allows to write HTML in React.
Props and State: props are like function parameters and State is similar to variables.
Context: This allows data to be passed through components as props in a hierarchy.
Virtual DOM: It is a lightweight copy of actual DOM which makes DOM manipulation easier.

ReactJS Reconciliation ?
React Reconciliation is the process through which React updates the Browser DOM.
It updates the virtual DOM first and then uses the diffing algorithm to make efficient and optimized updates in the Real DOM.

React pure components ?
React pure components are the components that do not re-render when the value of props and state has been updated with the same values.

want to know more about me, just write sallbro on search engine...

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay