📘 Study Material for ReactJS/Ember Developer (Jaipur Role)

1. Core JavaScript (Must-Have)

Since both React & Ember are built on top of JavaScript, strong JS fundamentals are critical.

Topics to Cover:

ES6+ features: let/const, arrow functions, template literals, destructuring, spread/rest operators.
DOM manipulation (querySelector, events, delegation).
Scope, closures, hoisting, lexical environment.
Event loop, microtasks vs macrotasks.
this keyword, bind/call/apply.
Async programming (Promises, async/await, fetch).
Array & Object methods (map, filter, reduce, find, some, every).
Error handling (try/catch, custom errors).

Quick Practice:

Build a function that debounces an API call.
Write a deep clone function for objects/arrays.
Explain event loop with setTimeout and Promise.

2. ReactJS

Since React is explicitly required, prepare deeply.

Topics to Cover:

JSX & Virtual DOM
Functional Components vs Class Components
React Hooks: useState, useEffect, useContext, useReducer, useMemo, useCallback
Custom hooks
Controlled vs Uncontrolled Components
Props vs State
Context API vs Redux vs Zustand (state management basics)
React Router (v6+)
Error Boundaries
Performance optimization (React.memo, code splitting, lazy loading)
Testing basics (Jest, React Testing Library)

Quick Practice:

Create a todo app with useReducer and useContext.
Implement infinite scroll with API calls.
Optimize a component using useMemo and useCallback.

3. Ember.js (if required by project)

Many companies mention Ember but focus is mostly on React. Still, know basics.

Topics to Cover:

Ember CLI & Project Structure
Ember Components & Templates (Handlebars)
Ember Data (Models, Store, Adapters, Serializers)
Ember Routing
Services in Ember
Ember Addons & Testing

Quick Practice:

Build a small Ember app that fetches and lists users.
Create an Ember component with two-way data binding.

4. APIs & Integration

REST APIs (CRUD operations)
Fetching data with fetch / axios
Error handling & retries
Basic GraphQL knowledge (bonus)

5. Version Control (Git)

Git basics (clone, commit, branch, merge, rebase, pull, push)
Handling conflicts
Writing good commit messages

6. UI/UX Collaboration

Convert a Figma/Adobe XD design into pixel-perfect code
CSS frameworks: Tailwind CSS, Bootstrap, Sass
Responsive design (media queries, flexbox, grid)
Accessibility (ARIA roles, alt tags, keyboard navigation)

7. System & Best Practices

Code reviews: identifying anti-patterns
Writing clean code & comments
Component reusability
Performance debugging (React DevTools, Lighthouse)

8. Interview Prep (Likely Questions)

React:

Explain Virtual DOM and how React updates UI.
What are hooks? How does useEffect differ from lifecycle methods?
Difference between Redux and Context API.
How do you optimize React performance?
Controlled vs uncontrolled components.

JavaScript:

Event loop with example.
Difference between == and ===.
Explain closure with example.
Promise vs async/await.
Deep copy vs shallow copy.

Ember:

Ember Data & Routing.
How Ember differs from React.
What is Ember CLI?

9. Mini Projects for Practice

React Todo App (with useReducer and API integration)
Weather App (fetch data from OpenWeather API, add loading/error states)
E-commerce Product Listing (filter, sort, pagination, cart using Context/Redux)
Ember Blog App (basic CRUD using Ember Data)

Tip: Since your experience is mostly React, focus 70% on React + JavaScript, 20% APIs & UI/UX, 10% Ember basics (just in case).

🗓️ 7-Day Crash Study Plan

Day 1 – Core JavaScript Refresher

ES6+ features (let/const, arrow functions, destructuring, spread/rest)
Closures, lexical scope, hoisting
Event loop (microtask vs macrotask)
this, bind/call/apply
Array & Object methods

Tasks:

Write a debounce and throttle function.
Explain closure with a live coding example.
Sort an array of objects (by age, by name).

Day 2 – React Basics

JSX & Virtual DOM
Functional vs Class Components
Props & State
Lists & Keys
Controlled vs Uncontrolled Components

Tasks:

Build a counter app with increment/decrement.
Create a form with validation (controlled inputs).
Explain difference between props and state.

Day 3 – React Hooks Deep Dive

useState, useEffect (dependencies array tricks)
useRef, useMemo, useCallback
useContext and custom hooks
Lifecycle mapping (componentDidMount → useEffect)

Tasks:

Create a todo app with useReducer + useContext.
Build a stopwatch with useRef.
Optimize a component using useMemo and useCallback.

Day 4 – Advanced React & State Management

React Router (v6)
Error Boundaries
Redux basics (actions, reducers, middleware)
Zustand (lightweight state management)
Performance: React.memo, lazy loading, code splitting

Tasks:

Create a multi-page app (Home, About, Contact).
Add Redux to manage global state (like cart items).
Implement lazy loading for a page.

Day 5 – APIs, Git & Collaboration

REST API integration (fetch, axios)
Error handling & retries
Git basics (branching, merging, rebasing)
Writing clean commits

Tasks:

Fetch data from an API (e.g., JSONPlaceholder).
Display with loading and error states.
Push project to GitHub and practice PR.

Day 6 – Ember.js Fundamentals

Ember CLI & Project Structure
Ember Components & Handlebars Templates
Ember Routing
Ember Data (Models, Store)
Services & Addons

Tasks:

Create an Ember project with CLI.
Build a users list from API.
Create a reusable Ember component.

Day 7 – Mock Interview & Mini Project

Mini Project (choose one):

React E-commerce Listing: Fetch products from API, Add to Cart (use Context/Redux), Search & Filter
Ember Blog App: CRUD posts with Ember Data

Mock Interview Prep:

Practice 5 React questions, 5 JS questions, 2 Ember questions
Review past projects → be ready to explain decisions, challenges, optimizations.

🎯 20 Mock Interview Questions & Answers

JavaScript (6 Qs)

Q1. What is the difference between == and === in JavaScript?
== checks value equality after type coercion, while === checks strict equality (value + type).

Q2. Explain closure with an example.
A closure is when an inner function remembers variables from its outer scope even after the outer function has finished.

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

Q3. What is the event loop in JavaScript?
The event loop manages async tasks. It picks tasks from the callback queue (macrotasks) and microtask queue (Promises, MutationObservers) and pushes them to the call stack when empty.
Q4. Difference between var, let, and const?
- var: function-scoped, hoisted, can be redeclared.
- let: block-scoped, not hoisted the same way, reassignable.
- const: block-scoped, cannot be reassigned.
Q5. What is the difference between shallow copy and deep copy?
- Shallow copy → copies only references for nested objects (e.g., Object.assign, spread).
- Deep copy → copies everything (e.g., structuredClone, lodash.cloneDeep).
Q6. Explain this keyword in JavaScript. this refers to the execution context:
In global scope → window (or undefined in strict mode).
In object → the object itself.
In arrow functions → lexical scope (does not bind its own this).

React (10 Qs)

Q7. What is the Virtual DOM?
A lightweight representation of the real DOM in memory. React updates the Virtual DOM first, then efficiently updates only the changed parts in the real DOM (reconciliation).
Q8. Difference between functional components and class components?
- Class → lifecycle methods (componentDidMount, etc.), this.state.
- Function → use hooks (useState, useEffect) for state and lifecycle.
Functional components are simpler, cleaner, and preferred in modern React.

Q9. Explain useEffect hook with dependency array.

useEffect(() => { ... }, [deps])
// [] → runs once after mount.
// [x] → runs when x changes.
// No deps → runs after every render.

Q10. Difference between useMemo and useCallback?
- useMemo(fn, deps) → memoizes computed value.
- useCallback(fn, deps) → memoizes function reference.
Q11. How do you handle state management in React? Local state (useState), Context API (for prop drilling), or external libraries (Redux, Zustand, MobX) depending on complexity.
Q12. What is the difference between controlled and uncontrolled components?
- Controlled → React manages the state of input (value comes from state).
- Uncontrolled → DOM manages state (ref to access value).
Q13. What are Error Boundaries in React? Special class components with componentDidCatch to catch errors in child components and prevent app crash.
Q14. How does React Router v6 differ from v5? Uses <Routes> instead of <Switch>, nested routing is simplified, hooks like useNavigate, useParams.
Q15. How do you optimize React performance?
- React.memo to prevent unnecessary re-renders
- useMemo & useCallback for expensive computations/functions
- Code splitting & lazy loading
- Avoiding inline functions in JSX unnecessarily
Q16. Explain Redux flow. UI dispatches an action → reducer updates store → store notifies components → UI updates.

Ember.js (3 Qs)

Q17. What is Ember CLI? A command-line tool for creating, building, testing, and serving Ember applications. Provides project structure and conventions.
Q18. What is Ember Data? Ember’s data persistence library. It provides a store that manages records via models, adapters, and serializers.
Q19. Explain Ember’s routing system. Ember has a powerful router where each route maps to a URL, a model hook, and a template. Nested routes allow complex UIs.

General / Best Practices (1 Q)

Q20. How do you ensure code quality in front-end projects?
- Writing clean, modular, and reusable components
- Using ESLint/Prettier for consistency
- Writing unit tests (Jest/RTL)
- Code reviews & pair programming
- Performance monitoring (Lighthouse, React DevTools)