Scribd
Upload
14 views

React_Interview_Notes

This document provides comprehensive notes on React.js, covering its definition, core features, component types, props vs state, hooks, lifecycle methods, routing, state management, and testing. It also includes examples of Redux Toolkit, list and conditional rendering, form handling, styling options, performance optimization, deployment, and common interview questions. Additionally, it outlines best practices for effective React development.

Uploaded by

Vinit Yadav
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
14 views

React_Interview_Notes

This document provides comprehensive notes on React.js, covering its definition, core features, component types, props vs state, hooks, lifecycle methods, routing, state management, and testing. It also includes examples of Redux Toolkit, list and conditional rendering, form handling, styling options, performance optimization, deployment, and common interview questions. Additionally, it outlines best practices for effective React development.

Uploaded by

Vinit Yadav
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

Complete React.

js Notes for Interview Preparation

1. What is React?

- A JavaScript library for building user interfaces.

- Maintained by Meta (Facebook).

- Used to build Single Page Applications (SPAs).

2. Core Features

- JSX JavaScript + HTML syntax.

- Components Reusable UI blocks.

- Virtual DOM Optimized DOM manipulation.

- Unidirectional Data Flow One-way data binding.

- Declarative UI Describe what UI should look like.

3. Component Types

Functional Components (Modern)

function Hello({ name }) {

return <h1>Hello {name}</h1>;

Class Components (Legacy)

class Hello extends React.Component {

render() {

return <h1>Hello {this.props.name}</h1>;

}
4. Props vs State

Props: Passed from parent, Read-only, Available in Functional & Class components

State: Managed internally, Mutable, Only in stateful components

5. React Hooks (Functional Components)

useState:

const [count, setCount] = useState(0);

useEffect:

useEffect(() => {

console.log("Effect runs");

}, [dependency]);

useContext:

const value = useContext(MyContext);

Other Hooks: useRef, useMemo, useCallback, useReducer

6. Component Lifecycle (Class)

Mounting: constructor -> render -> componentDidMount

Updating: shouldComponentUpdate -> render -> componentDidUpdate

Unmounting: componentWillUnmount

7. React Router (v6)

Install: npm install react-router-dom

Usage:

<BrowserRouter>
<Routes>

<Route path="/" element={<Home />} />

<Route path="/about" element={<About />} />

</Routes>

</BrowserRouter>

8. State Management

Lifting State Up: Share via parent

Context API:

const MyContext = React.createContext();

Redux (with Toolkit Recommended):

- Centralized store

- Actions -> Reducers -> State

- useSelector, useDispatch

9. Redux Toolkit Example

createSlice:

const counterSlice = createSlice({

name: 'counter',

initialState: 0,

reducers: {

increment: state => state + 1,

decrement: state => state - 1

});
10. List Rendering

items.map(item => <li key={item.id}>{item.name}</li>)

11. Conditional Rendering

isLoggedIn ? <Dashboard /> : <Login />

12. Form Handling

const handleChange = (e) => setName(e.target.value);

13. Styling Options

CSS, CSS Modules, Styled Components, Tailwind, Inline styles

14. Testing

Jest, React Testing Library

test('renders header', () => {

render(<App />);

expect(screen.getByText(/Hello/i)).toBeInTheDocument();

});

15. Performance Optimization

React.memo, useMemo, useCallback, Code splitting

16. Deployment

Build: npm run build

Deploy: Vercel, Netlify, Firebase, GitHub Pages

17. Common Interview Questions


- Difference between props and state?

- Explain virtual DOM.

- useEffect hook use cases?

- React performance optimization?

- Context API vs Redux?

- What is React.memo?

- Handling forms in React?

- Importance of keys in lists?

Bonus: Best Practices

- Keep components small

- Lift state up

- Avoid unnecessary re-renders

- Use keys in lists

- Avoid mutating state directly

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy