Skip to main content

Roadmap of Reactjs

why to Learn React js ?​

--> hype, job, trend , build UI.

--> Makes easy to manage & build complex UI.

When Should I Learn React js?​

--> After Mastering Javascript.

--> Most project Don't need React in Intial phase.

Why React was Created?​

--> Phantom message Problem.

  • Facebook created React to solve problems related to efficiently updating their news feed. At the time, the news feed was getting complex, with dynamic updates for posts, comments, and likes. Traditional DOM updates were slow and resource-intensive.

Key Problems:​

  1. Slow UI Updates: Updating the DOM was inefficient and impacted performance.
  2. Complex State Management: Managing and updating the state of dynamic content was difficult.
  3. Hard to Maintain Code: The growing codebase became harder to manage and maintain.

Solution:​

--> React introduced the Virtual DOM, which made UI updates faster and more efficient. This allowed Facebook to update their news feed seamlessly without reloading the entire page, improving performance and making the app easier to manage.

Don't Learn React if :​

  • you don't know how js works OR DOM work.

React Learning Process.​

  1. Go in depth --> buble, fibre, DOM, diffing algo , hydration.

  2. By making Projects (One topic At a Time) : TODO, Calculator, github API and other projects.

Topic To Learn Reactjs .​

  • Core of react ( State OR ui Manipulation , JSX).
  • Component Reausability.
  • Reusing of component (Props)
  • How to propogate change (using Hooks).

Additional Topics Addon to React :​

  • Router (React Don't have router) ==> basicaly router give from react-router-dom Library.

State Management ( React Don't have state management)​

  1. Redux
  2. Redux Toolkit
  3. Zustand
  4. Context API.

class Based Component.​

  • Legacy Code.

BAAS Apps :-​

  • Social Media clone , e-commers aap.

After React js ?​

--> React Is not a complete Solution in most case.

  • no SEO, Browser Render of js,NO Routing .

  • Framework :

  1. Next.js
  2. Remix

Thank You for watching our funny notebook ......🥰