React.
js Master Guide
[Link] Syllabus
1. Introduction to React
- What is React?
- Key Features
- SPA Concept
- Setup (CRA/Vite)
2. JSX (JavaScript XML)
- JSX Syntax & Babel
- Embedding Expressions
3. Components
- Functional Components
- Props
- Composition & Reusability
4. State Management
- useState
- Event Handling
5. Conditional Rendering
- if-else, Ternary, &&
6. Lists and Keys
- map(), key usage
7. Forms in React
- Controlled Components
- Validation Basics
[Link] Master Guide
8. useEffect Hook
- Side Effects & Cleanup
9. React Router
- BrowserRouter, Routes, Route
- useParams, useNavigate
10. API Integration
- fetch(), axios
- Loading/Error Handling
11. Lifting State Up
- Prop Drilling Concept
12. Context API
- createContext, useContext
13. useRef Hook
- DOM Access, Persistent Values
14. Memoization
- [Link], useMemo
15. Custom Hooks
- Reusable Logic
16. Project Structure
- Folder Setup, Env Vars
17. Styling
- CSS Modules, Tailwind, Styled Components
[Link] Master Guide
18. Deployment
- Netlify/Vercel
Bonus:
- Error Boundaries
- [Link] & Suspense
- Redux (Intro)
- Testing with Jest
14-Day React Study Plan
Week 1 - Core Fundamentals
Day 1: Intro & JSX | Setup project, understand JSX
Day 2: Components | Props and nesting
Day 3: State & Events | useState, event handling
Day 4: Lists & Conditionals | map(), ternary, && ops
Day 5: useEffect | Timers, logs
Day 6: Forms | Controlled inputs, login form
Day 7: Mini Project | Task manager/weather app
Week 2 - Advanced React
Day 8: Routing | react-router-dom basics
Day 9: API Calls | fetch(), axios, useEffect
Day 10: Reusability | Lift state, reusable components
Day 11: Context API | Global state with useContext
Day 12: Hooks Practice | Custom hook + useRef
Day 13-14: Final Project | Build, style & deploy
[Link] Cheat Sheets
JSX:
[Link] Master Guide
- Use {} to embed JS in JSX
- Class becomes className
useState:
const [count, setCount] = useState(0);
useEffect:
useEffect(() => { [Link]("Mounted"); return () => {}; }, []);
Props:
<Component name="React" />
function Component({ name }) { return <h1>{name}</h1>; }
Conditional Rendering:
{isLoggedIn ? <Dashboard /> : <Login />}
Lists:
[Link](item => <li key={[Link]}>{[Link]}</li>)
Router:
<BrowserRouter><Routes><Route path="/" element={<Home />} /></Routes></BrowserRouter>
API Fetch:
useEffect(() => {
fetch(url).then(res => [Link]()).then(data => setData(data));
}, []);
Top [Link] Interview Questions
1. What is the Virtual DOM?
2. What are React components?
[Link] Master Guide
3. Difference between state and props?
4. How does useState work?
5. What is useEffect used for?
6. Explain the Context API.
7. What is JSX?
8. What are controlled components?
9. How do you handle forms in React?
10. What is prop drilling and how to avoid it?
11. How does React Router work?
12. What is the significance of keys in lists?
13. What is memoization in React?
14. How to optimize performance in React apps?
15. How would you deploy a React application?