Reactjs notes

What is React?

React (aka React.js or ReactJS) is an open-source front-end JavaScript library

What is JSX?
JSX stands for JavaScript XML
JSX allows you to write tags and elements that look like HTML but are converted to JavaScript objects behind the scenes.
What is the difference between Element and Component?

Aspect React Element React Component

Definition A plain JavaScript object representing a part of the UI. A function or class that returns React elements.
Purpose Describes what to render on the UI. Encapsulates logic and UI for reusable pieces of functionality.
Nature Immutable and lightweight. Reusable and dynamic, with logic to manage state and props.
Creation Created with JSX or React.createElement(). Defined as a function or class.
Usage Basic building blocks of the UI. Used to organize and structure the app.
Example <h1>Hello, World!</h1> function Greeting() { return <h1>Hello, World!</h1>; }
Reusability Not reusable. Reusable wherever needed.
Interaction Static, cannot manage state or accept props. Can manage state, accept props, and implement lifecycle methods (class components).
How to create components in React?

Aspect Functional Component Class Component

Definition A JavaScript function returning JSX. A class that extends React.Component.
State Management Uses React Hooks (useState, useEffect, etc.). Uses this.state and lifecycle methods.
Preferred Use Modern React development. Legacy React applications.
Props

Key Features of Props

1. Read-Only: Props are immutable; they cannot be modified by the receiving component.
2. Parent-to-Child Communication: Props allow data to flow from parent to child components.
3. Reusable Components: By passing different props, you can reuse components with varying data or behavior.

How Props Work

1. Passing Props: You pass props to a component by adding attributes to the component tag.
2. Accessing Props: In the child component, you access props through the props object.

What is the difference between state and props?

Aspect State Props

Definition Managed internally by the component itself. Passed from a parent component to a child component.
Mutability Mutable (can be updated using setState or useState). Immutable (read-only).
Scope Local to the component; not accessible outside. Accessible from parent components; used to pass data to child
components.
Purpose Used to manage internal, dynamic data of a component. Used to pass data and configure child components.
Triggers Re- Yes, changes to state trigger a re-render of the component and its No, changes to props in the parent trigger a re-render in the child.
render children.
Reusability Cannot make components reusable on its own. Enables component reusability by customizing behavior through props.
Analogy Component's memory — stores its internal data. Function arguments — passed by the parent to configure the child.
In short:

State: Local, mutable, and internal to the component.

Props: External, read-only, and passed from parent to child for customization.

What are synthetic events in React?

Synthetic Events in React are a wrapper around the browser's native events, ensuring consistent behavior across different browsers. They have the same API as native
events (e.g., stopPropagation(), preventDefault()) but provide a unified interface that works identically in all browsers.

Key Points in Short:

1. Cross-Browser Compatibility: Synthetic events normalize event behavior across browsers.

2. Unified API: Same methods as native events, such as preventDefault() and stopPropagation().
3. Access to Native Events: The native browser event can still be accessed using the nativeEvent property.

4. Event Pooling: Synthetic events are pooled and reused to improve performance, meaning the event is nullified after the handler executes.

Example

jsx

Copy code

function BookStore() { function handleTitleChange(e) { console.log("The new title is:", e.target.value); // Synthetic event console.log

Output

When the input value changes, the handler logs:

1. The updated value (e.target.value).

2. The native browser event (e.nativeEvent).

Why Use Synthetic Events?They abstract browser differences and make event handling predictable in React applications.

Inline Conditional Expressions in React

Inline conditional expressions allow you to conditionally render content directly within JSX, without requiring separate functions or statements. React supports JavaScript
expressions, enabling conditions to be embedded in JSX using syntax like ternary operators or logical operators (&&, ||).

Why fragments are better than container divs?

Below are the list of reasons to prefer fragments over container DOM elements,

1. Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees.
2. Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationships, and adding divs in the middle makes it hard to keep the desired layout.
3. The DOM Inspector is less cluttered.

4. What are the limitations of React?

Apart from the advantages, there are few limitations of React too,
1. React is just a view library, not a full framework.
2. There is a learning curve for beginners who are new to web development.
3. Integrating React into a traditional MVC framework requires some additional configuration.
4. The code complexity increases with inline templating and JSX.
5. Too many smaller components leading to over engineering or boilerplate.

Explain the use of render method in React?

React renders HTML to the web page by using a function called render(). The purpose of the function is to display the specified HTML code inside the specified HTML
element. In the render() method, we can read props and state and return our JSX code to the root component of our app.

Explain the difference between functional and class component in React?

 Functional Components Class Components
A functional component is just a plain JavaScript pure function that accepts props as A class component requires you to extend from React. Component and create a
an argument render function
No render method used It must have the render() method returning JSX
Also known as Stateless components Also known as Stateful components
React lifecycle methods (for example, componentDidMount) cannot be used in React lifecycle methods can be used inside class components (for example,
functional components. componentDidMount).
Constructors are not used. Constructor is used as it needs to store state.

Explain the components of a react-router

1. Router(usually imported as BrowserRouter): It is the parent component that is used to store all of the other components. Everything within this will be part of
the routing functionality
2. Switch: The switch component is used to render only the first route that matches the location rather than rendering all matching routes.
3. Route: This component checks the current URL and displays the component associated with that exact path. All routes are placed within the switch components.
4. Link: The Link component is used to create links to different routes.

Explain the lifecycle methods of components

A React Component can go through four stages of its life as follows.

Initialization: This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.
Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.
Updating: Updating is the stage when the state of a component is updated and the application is repainted.
Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

What is prop drilling and its disadvantages?

Prop drilling is basically a situation when the same data is being sent at almost every level due to requirements in the final level. The problem with Prop Drilling is that
whenever data from the Parent component will be needed, it would have to come from each level, Regardless of the fact that it is not needed there and simply needed in
last.

Component Purpose Example Usage

Router Top-level wrapper for routing context. <BrowserRouter>
Routes Container for multiple Route components (renders the first match). <Routes>
Route Defines the path and corresponding component to render. <Route path="/" element={<Home />} />