[go: up one dir, main page]
Scribd
Upload
5 views5 pages

react

The document provides a comprehensive Q&A format covering various aspects of React, including its pros and cons, comparison with Angular, and methods to create React apps. It explains key concepts like virtual DOM, JSX, components, state management, and Redux, using real-life analogies for better understanding. Each section is structured to give concise answers, examples, and relatable analogies to clarify complex topics.

Uploaded by

aumkarjagtap
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views5 pages

react

The document provides a comprehensive Q&A format covering various aspects of React, including its pros and cons, comparison with Angular, and methods to create React apps. It explains key concepts like virtual DOM, JSX, components, state management, and Redux, using real-life analogies for better understanding. Each section is structured to give concise answers, examples, and relatable analogies to clarify complex topics.

Uploaded by

aumkarjagtap
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Here’s a concise answer set for all your questions—each with a short sentence, real-life analogy, and

example:

Section 1: Introduction

Q1: Pros and Cons of React


Answer: Pros – reusable components, virtual DOM, fast updates; Cons – steep learning curve, JSX
complexity.
Example: Like LEGO blocks – reusable but need instruction manual.
Real-life: Building a house with modular bricks (easy to reuse, hard to master at first).

Q2: React vs Angular


Answer: React is a library focused on UI; Angular is a full-fledged framework.
Example: React is like a custom-built car engine; Angular is the full car.
Real-life: Choose React if you want flexibility; Angular for an all-in-one package.

How to Create React App

Q1: Preferred way to generate React app


Answer: Using create-react-app for quick setup.
Example: npx create-react-app my-app
Real-life: Like using a starter kit to build a model airplane.

Q2: Other ways


Answer: Manual setup with Webpack, or tools like Vite or Next.js.
Example: npm init vite@latest
Real-life: Building furniture with or without IKEA's manual.

Section 2: Basic Knowledge

Virtual DOM

Q1: What makes React powerful?


Answer: React uses virtual DOM to update UI efficiently.
Example: Only re-renders changed parts like a smart photo editor.
Real-life: Updating one light bulb instead of rewiring the whole room.

Q2: What is virtual DOM?


Answer: It’s a lightweight copy of the real DOM.
Example: It compares changes and updates only what’s needed.
Real-life: Reviewing a draft before printing the final report.

Q3: Virtual DOM vs Shadow DOM


Answer: Virtual DOM improves re-rendering; Shadow DOM isolates styles.
Example: Virtual DOM is about efficiency; Shadow DOM is about encapsulation.
Real-life: One is editing content fast, other is keeping rooms (styles) private.
JSX

Q1: What is JSX?


Answer: JSX lets you write HTML inside JavaScript.
Example: <h1>Hello</h1> in JS
Real-life: Speaking Hinglish – mixing two languages.

Q2: Is JSX part of React?


Answer: It’s not required but makes React easier to write.
Real-life: Like using emojis – not mandatory, but expressive.

Why className in JSX

Q1: Why not use class in JSX?


Answer: class is a reserved keyword in JavaScript.
Example: Use className="btn" instead.
Real-life: Like not naming a variable if – reserved word.

Functional Components and Props

Q1: Create functional components


Answer: A JS function returning JSX.
Example: function Hello() { return <h1>Hi</h1>; }
Real-life: Like a vending machine – input (props), output (UI).

Q2: Pass props


Answer: Props are passed like attributes.
Example: <Hello name="Aumkar" />
Real-life: Giving ingredients to a chef.

Class Components, Props, and State

Q1: Create class component


Answer: Use class MyComponent extends React.Component
Example:

class MyComponent extends React.Component {

render() {

return <h1>Hello</h1>;

Real-life: Like a traditional office worker – formal but detailed.


Q2: Pass props
Answer: Same as functional – via attributes.
Example: <MyComponent name="React" />

Q3: How state works


Answer: State stores local component data.
Example: this.state = { count: 0 };
Real-life: Like a calculator keeping your last result.

Dumb vs Smart Components

Q1: What are they?


Answer: Dumb = presentational; Smart = logic + data.
Example: Dumb shows UI; Smart fetches data.
Real-life: Dumb is actor, Smart is director.

Q2: Presentational vs Container


Answer: Same as above – one displays, the other manages.

Key Index Map

Q1: Render list


Answer: Use map() in JSX.
Example: items.map(item => <li>{item}</li>)
Real-life: Like printing each student’s name from a list.

Q2: Why avoid index as key


Answer: It breaks re-rendering when list changes.
Real-life: Like mixing up roll numbers – causes confusion.

React.Fragment

Q1: What is it?


Answer: A wrapper that doesn’t render extra DOM nodes.
Example: <React.Fragment>...</React.Fragment>
Real-life: Like packing lunch without a box – just wrapping it.

Q2: Short version


Answer: Use <>...</> shorthand.

Conditional Rendering

Q1: Conditional rendering


Answer: Show elements based on conditions.
Example: {isLoggedIn ? <Logout /> : <Login />}
Real-life: Like a door saying "Push" or "Pull" based on inside/outside.
Styling in React

Q1: Apply styles


Answer: Inline, CSS files, or CSS-in-JS.
Example: style={{ color: 'red' }}
Real-life: Dressing up with ready clothes or designing your outfit.

Q2: Multiple classes conditionally


Answer: Use template strings or libraries like clsx.
Example: className={isActive ? "btn active" : "btn"}

Parent-Child Communication

Q1: How they communicate


Answer: Parent passes props, child calls callback functions.
Example: Child gets data via props, sends info via onClick.
Real-life: Mom gives you food (prop), you say thanks (callback).

Q2: Can we mutate props?


Answer: No, props are read-only.
Real-life: Like borrowing a book – read but don’t write in it.

React Query

Q1: React Query


Answer: Tool to fetch, cache, and sync server state in React.
Example: useQuery("todos", fetchTodos)
Real-life: Like Swiggy tracking your order live.

Redux with Vanilla JS

Q1: Redux in plain JS


Answer: Create store, actions, and reducers manually.
Example:

const store = createStore(reducer);

store.dispatch({ type: "INCREMENT" });

Real-life: Like managing a logbook with handwritten updates.

Redux with React (without toolkit)


Q1: Redux in React (no toolkit)
Answer: Use react-redux with manual reducers.
Example:

<Provider store={store}><App /></Provider>

Real-life: Like manually wiring switches in a circuit.

Redux with Toolkit

Q1: Redux Toolkit


Answer: Simplifies Redux setup with createSlice and configureStore.
Example:

const counterSlice = createSlice({

name: "counter",

initialState: 0,

reducers: {

increment: state => state + 1

});

Real-life: Like using a toolkit instead of building each tool from scratch.

You might also like