Why Learn React.js?

• Hype and Trend: React.js is widely used in the industry, making it a valuable skill.

• Job Opportunities: Proficiency in React can open doors to numerous job opportunities.

• Build UI: React simplifies the process of building and managing complex user interfaces.

• Ease of Management: React makes it easier to manage complex front-end architectures.

• Single Page Application: React is designed to create single-page applications (SPAs) which offer a seamless user experience.

When Should You Learn React?

• After Mastering JavaScript: It's essential to have a solid understanding of JavaScript before diving into React.

• Project Requirements: Not all projects require React in the initial phase. Start using React when your project complexity demands it.

Why Was React Created?

React was created to address a Facebook notification issue where phantom messages were generated. React.js was developed to solve this problem by providing a reliable way to manage UI state and updates.

Core Concepts

State and UI

• State Management: React handles the state using JavaScript.

• UI Rendering: React uses a virtual DOM to efficiently update the UI.

Learning React

• In-Depth Understanding: Go deep into React concepts by building projects.

• React is a Library: React offers flexibility compared to frameworks which enforce a strict set of rules.

• Framework: Military (Set of rules)

• Library: Cool dude (Freedom)

Key Topics to Learn

Core of React

• State and UI Manipulation: Manage the state and update the UI effectively.

• JSX: Write HTML within JavaScript for a more intuitive syntax.

Component Reusability

• Props: Pass data between components using properties (props).

• Hooks: Use hooks to manage state and side effects within functional components.

Advanced Add-ons

• Router: Use libraries like React Router for navigation.

• State Management: Use tools like Redux, Redux Toolkit, and Context API for state management.

• Class-Based Components: Understand legacy code that uses class components.

• Backend as a Service (BaaS): Integrate with services like Firebase, Appwrite, or Supabase.

React Ecosystem

Running JavaScript

• Browser Environment: JavaScript runs natively in browsers.

• Node.js: Provides a server-side environment for running JavaScript.

Package Management

• npm: Node package manager for installing and managing dependencies.

• web-vitals: Tool for measuring the performance of your website.

Types of React

• React-dom: For web applications.

• React-native: For mobile applications.

Installation

Create React App

• npx create-react-app appname

• npm run start

Vite

• npm create vite@latest

• npm i

• npm run dev

Tailwind CSS with Vite

ReactDOM

• Virtual DOM: Efficiently update the UI using a virtual DOM.

• React.StrictMode: Highlights potential problems in an application.

• React-Script: Links index.js to index.html.

Returning Elements

• Single Element: Always return a single element.

• Fragment: Use fragments (<></>) to return multiple elements.

Naming Conventions

• Function Names: Capitalize the first letter.

• File Names: Start with a capital letter for better organization.

JSX Syntax

• Variables: Use {variableName} to include evaluated expressions.

• Objects: Objects are also evaluated expressions.

• evaluated expression: you can not write directly if-else condition statement in object

• I can say that App.js is a method/function in a react and react convert it into Object in backend and then evaluate and after that give me page

• props: you can reuse the component (reusable)

• use key in loop for better performance

React Hooks

• React hooks handle UI updation

• React State update the UI

• Hooks is a function

useState

• const [state, setState] = useState(initialState)

• State: The current value.

• useState: A function to create state variables.

• Callback Function: Provided inside useState.

• store and update data

• Ex: counter update (Add, Remove), change bgcolor

useEffect

• Side Effects: Perform actions like data fetching, updating the document title, etc.

• useEffect(fn, dependencies?)

• Without dependencies: The effect runs after every render.

• With dependencies: The effect runs only when any of the dependencies change.

• With an empty array: The effect runs only once

useCallback

• Memoization: Optimize performance by memoizing functions.

• if change is available then change else no change needed

useId

• Unique IDs: Generate unique IDs for accessibility attributes.

Export Default vs. Export

• export default: Used for exporting a single default export from a module. It allows you to import this export with any name.

• export: Used for exporting multiple named exports from a module. The import must use the exact exported names.

Virtual DOM, Fiber, and Reconciliation

Virtual DOM

• createRoot: Create a virtual DOM.

• Reconciliation: Determine which parts of the DOM need to be changed.

React Router

Navigation

• Third-Party Library: Use for client-side navigation.

• useParams: Fetch data from the URL.

• Loader: Advanced alternative to useEffect for better performance.

Context API

Prop Drilling Solution

• Context Provider: Create and use providers to manage context.

• useContext: Fetch context data within components.

• **Ex:**change the theme (mode)

Redux

State Management

• react-redux: Official React bindings for Redux.

• redux-toolkit (RTK): Simplified Redux setup.

• zustand: Alternative state management solution.

Context API vs Redux

• Comparison of Redux and Context API for State Management and Prop Drilling

• Redux is our state management library which is used to manage your state

• Context API is just a dependency injection mechanism

• Redux keeps your state in central store. so, now you can access the state from the central store (global state).

• Redux offers middleware to help track and manage state effectively.

• Popular middleware includes Redux Thunk, Redux Saga, and RTK Query for handling asynchronous operations.

• In redux, loggers help us to track the state

• Using plugins you track the state in the browser

• Context API included with react while redux is an external library

• Context API easy to setup while redux hard to setup

• Context API is used for small apps while redux is used for complex apps

React Component Basics

NavLink and Link

• Link: Prevents full page reload.

• NavLink: Adds functionality for active links.

Outlet

• Dynamic Content: Change content dynamically within a layout.

Miscellaneous

• npx vs npm: npx runs packages without installing them globally.

• package.json: Lists dependencies installed in node_modules.

• App.js: Main application component.

• index.js: Entry point of the application.

• npm run build: Creates an optimized production build.

• React.js is a component based language. it divide the website into different component and we can reuse created component.

Component Types

Functional Components

• Modern, preferred approach.

Class Components

• Used in legacy code.

Memorize

Data Types

• Primitive: Numbers, strings, booleans, null, undefined (immutable).

• Non-Primitive: Objects, functions, arrays (mutable).

• Primitive Data Passing: Values are passed by value.

• Non-Primitive Data Passing: New value is created on each pass, causing re-renders.

By mastering these concepts, you'll be well-equipped to build robust and efficient applications using React.js.

---

Advanced React.js Concepts

Context API

Basics of Context API

• Context is an Object: Used to manage global state without prop drilling.

• Update State: Use .map() to update items within the context.

• Delete State: Use .filter() to remove items from the context.

JSON Handling

• JSON.parse(): Convert JSON strings to JavaScript objects.

Key Usage in Map

• Performance: Use unique keys when working with .map() to improve rendering performance.

Redux Toolkit

Overview

• State Management: Redux is an independent state management library.

• Integration with React: Use react-redux to connect Redux with React.

Core Principles

• Immutable State: Never modify/mutate your state directly in Redux.

• Complex Setup: Traditional Redux requires more setup compared to Redux Toolkit (RTK).

Redux Toolkit (RTK)

• Simplified Setup: RTK provides a streamlined setup process.

• Storage: RTK offers a built-in way to handle state storage.

Flux

• Data Flow: Redux is an enhanced version of the Flux architecture.

Store

• Single Source of Truth: Every app has a single store, which holds the entire state of the application.

Create Slice

• Properties: Requires name, initialState, and reducers.

• Reducers: Objects containing functions that define how to handle state changes.

Hooks

• useSelector: Access state from the Redux store.

• useDispatch: Dispatch actions to the Redux store.

Utility Functions

• nanoid: Generate unique IDs.

Slices

• Initial State: Every slice has an initial state.

• Reducers: Define state change logic.

• State and Action: Functions receive state and action parameters from RTK.

Payload

• Object: The payload is an object that carries data.

State

• access of current-state / initial-state

Action

• access of we pass the data / action.payload

Dispatch

• Reducers and Store: Dispatch actions to reducers to update the store.

• it use reducers and change value/data into store

By understanding and organizing these advanced React.js concepts, you can create efficient and maintainable applications.