Reactjs notes

Github sponser link

https://github.com/sponsors/codingacharya?frequency=one-time&sponsor=codingacharya

 React file structure

my-react-app/

│

├── public/

│   └── index.html

│

├── src/

│   ├── assets/              # Images, fonts, icons, etc.

│   ├── components/          # Reusable UI components (Navbar, about section, service, testimonial,footer sections.)

│   ├── pages/               # Page components (HomePage, AboutPage, etc.)

│   ├── layouts/             # Common layout components (Navbar, Footer, Sidebar)

│   ├── routes/              # Route definitions (React Router)

│   ├── hooks/               # Custom React hooks

│   ├── services/            # API calls or external services (axios, fetch)

│   ├── context/             # React Contexts (AuthContext, ThemeContext)

│   ├── store/               # Redux or Zustand stores (if using)

│   ├── utils/               # Utility functions/helpers

│   ├── constants/           # Static values, enums, config variables

│   ├── App.js               # Root component

│   ├── main.jsx             # Entry point (or index.js)

│   └── index.css            # Global styles

│

├── .env                     # Environment variables

├── .gitignore

├── package.json

└── README.md

 

 

1. Arrow Function Components

jsx

CopyEdit

const Welcome = () => {

  return <h1>Hello, world!</h1>;

};

This is equivalent to a traditional function:

jsx

CopyEdit

function Welcome() {

  return <h1>Hello, world!</h1>;

}

 

2. Arrow Functions in Event Handlers

jsx

CopyEdit

const Button = () => {

  const handleClick = () => {

    console.log("Button clicked");

  };

 

  return <button onClick={handleClick}>Click Me</button>;

};

No need to bind this like in class components.

What is React?

React is a JavaScript library for building user interfaces, especially single-page applications. It helps create reusable UI components and manage state efficiently.

Here’s how the process works:

1. Actual DOM and Virtual DOM

·         Initially, there is an Actual DOM(Real DOM) containing a div with two child elements: h1 and h2.

·         React maintains a previous Virtual DOM to track the UI state before any updates.

2. Detecting Changes

·         When a change occurs (e.g., adding a new h3 element), React generates a New Virtual DOM.

·         React compares the previous Virtual DOM with the New Virtual DOM using a process called reconciliation.

3. Efficient DOM Update

·         React identifies the differences (in this case, the new h3 element).

·         Instead of updating the entire DOM, React updates only the changed part in the New Actual DOM, making the update process more efficient.

Key Features of React

React is one of the most demanding JavaScript libraries because it is equipped with a ton of features which makes it faster and production-ready. Below are the few features of React.

1. Virtual DOM

React uses a Virtual DOM to optimize UI rendering. Instead of updating the entire real DOM directly, React:

·         Creates a lightweight copy of the DOM (Virtual DOM).

·         Compares it with the previous version to detect changes (diffing).

·         Updates only the changed parts in the actual DOM (reconciliation), improving performance.

2. Component-Based Architecture

React follows a component-based approach, where the UI is broken down into reusable components. These components:

·         Can be functional or class-based.

·         It allows code reusability, maintainability, and scalability.

3. JSX (JavaScript XML)

React usesJSX, a syntax extension that allows developers to write HTML inside JavaScript. JSX makes the code:

·         More readable and expressive.

·         Easier to understand and debug.

4. One-Way Data Binding

React uses one-way data binding, meaning data flows in a single direction from parent components to child components via props. This provides better control over data and helps maintain predictable behavior.

5. State Management

React manages component state efficiently using the useState hook (for functional components) or this.state (for class components). State allows dynamic updates without reloading the page.

6. React Hooks

Hooks allow functional components to use state and lifecycle features without needing class components. Common hooks include:

·         useState: for managing local state.

·         useEffect: for handling side effects like API calls.

·         useContext: for global state management.

7. React Router

React provides React Router for managing navigation in single-page applications (SPAs). It enables dynamic routing without requiring full-page reloads.