React & Modern Front-End Development

Weeks 1–2 — the mental model. Once a screen is a tree of functions, everything else is detail.

1. A component is just a function

   A React component is a function that returns markup. Its name starts with a capital letter, and it returns JSX — HTML that looks like JavaScript because it is.

   Example function Card() { return <h3>Hello</h3>; } is a complete component. Everything else in React — state, effects, routing — is a tool you attach to functions like this one.

   Practice Take a static page you already have and split it into four components: header, list, list item and footer. Nothing else changes yet.

2. Props, children and composition

   Props are the arguments of a component; children is a special prop holding whatever you put between the tags. Composition — a component that accepts other components — is what keeps a codebase readable.

   Example One <Panel title="Fees"> containing different content each time beats three near-identical Panel components. The prop carries the difference; the component carries the shape.

   Practice Turn your four components into reusable ones: one Card used in three places with different props, and one Layout that takes children.

3. Lists, keys and conditional rendering

   Rendering a list means mapping an array to components, and React needs a stable key to know which row changed. An index as a key is the classic bug that only shows up when the list reorders.

   Example items.map((it) => <Row key={it.id} item={it} />) is correct. key={index} looks identical on screen and produces the wrong row updating once you sort or delete — exactly the defect you do not want to explain in an interview.

   Practice Render a list of twenty items, add a delete button on each row, and fix the keys so deleting the second row deletes the second row.

Weeks 3–5 — the interactive half. Forms that work, data that loads, and the three states every screen needs.

1. useState and controlled forms

   State is a value that survives a re-render. A controlled input keeps the value in state and re-renders on every keystroke — more code than an uncontrolled input, and the version you can validate and reset.

   Example const [q, setQ] = useState("") with value={q} onChange={(e) => setQ(e.target.value)} is the whole pattern. Removing value makes the input uncontrolled and its text invisible to your validation code.

   Practice Build a search box with a clear button and a character counter, then a four-field form that refuses to submit while one field is empty.

2. useEffect and fetching an API

   An effect runs after render, which is where fetching belongs. The empty dependency array means "once when the component appears" — and the cleanup function is what stops a request from writing into a screen that is gone.

   Example A fetch inside useEffect with an array dependency of [] loads once. Dropping the array reloads on every render, which is how a free API quota disappears in two minutes.

   Practice Fetch a public list of jobs or films, render it, and add a search box that filters what you already have instead of refetching.

3. Loading, error and empty states

   Every network screen has four states: loading, error, empty and loaded. A fresher portfolio shows only the fourth, and interviewers notice immediately.

   Example if (loading) return <Spinner />; if (error) return <ErrorBox message={error} />; if (!items.length) return <EmptyState />; — four lines that turn a demo into something a team could ship.

   Practice Switch your phone to flight mode and reload your app, then make sure the error state explains what happened and offers a retry.

Weeks 6–7 — routing, looks and a live link. A project nobody can open is not a project.

1. Routing with react-router

   Two screens and a shared layout are enough to justify a router. Routes map a URL to a component, and useParams reads the id out of the URL so a detail page can be linked to directly.

   Example A route /jobs/:id that reads id and renders the matching job is what makes a link shareable — which is also what makes it worth putting on a resume.

   Practice Add a list page, a detail page and a not-found page, then paste a detail URL into a new tab and make sure it still works.

2. Styling that looks deliberate

   One spacing scale, one type scale and two or three colours is the whole secret. Most fresher projects fail the look test because every element chose its own margin.

   Example Pick 8px and 16px for all padding, one accent colour for actions only, and remove the third font. Consistency reads as competence, and it takes an afternoon.

   Practice Restyle your app with one spacing scale and one accent colour, then view it at 390px wide and fix whatever overflows.

3. Deploying and writing the README

   Netlify, Vercel and GitHub Pages all host a free React build. The last ten minutes — repository, README, live link — are what convert finished code into something a recruiter can check.

   Example A README with what the app does, a screenshot, the live link, how to run it locally, and one paragraph on a bug you fixed is more convincing than a long feature list.

   Practice Deploy it, write the README, put the live link at the top of your resume under Projects, and open it on your phone to confirm it works there.

useReducer, Context and your own hooks, so state does not turn into ten tangled useState calls.

1. useReducer for state with rules

   When several pieces of state change together, useReducer keeps the rules in one place: a function that takes the current state and an action and returns the next state. It is useState with a plan.

   Example dispatch({ type: 'added', item }) routes to one switch that decides how the list changes, instead of five scattered setState calls.

   Practice Convert a component with three related useState calls into one useReducer with three actions.

2. Context: sharing state without prop drilling

   Context lets a value be read by components far below without passing it down through every level. It is for the few things that are genuinely global: the signed-in user, the theme, the language.

   Example Wrap the app in a provider, then any component calls useContext(ThemeContext) and reads the current theme, however deep it sits.

   Practice Lift the current user into a Context and read it in a component three levels down without passing a prop.

3. Custom hooks: your own useSomething

   A custom hook is a function whose name starts with "use" and wraps stateful logic you want in more than one component. It is how fetching, forms and debouncing are shared without copy-paste.

   Example useJobs() in one file, called by a list and a detail component, so both get the same loading, error and data handling.

   Practice Turn the fetch logic from a component into a useFetch(url) hook and use it in two different components.

Forms with real validation, lists that stay smooth, and markup a keyboard can use.

1. Forms with validation and clear errors

   A form that validates on the client and shows one clear message per field is the difference between a sign-up and a bounce. Keep the values in state, validate on submit, show the error next to the input.

   Example errors.email = 'Enter a valid email' is set on submit, and the input renders aria-invalid and the message, so a screen reader hears it too.

   Practice Build a sign-up form with three fields, validate them on submit, and show the first error next to its field.

2. Lists at scale: keys, memo and windowing

   A list of a thousand rows re-renders every time any state changes. A stable key, React.memo on the row, and a windowing library that renders only visible rows turn a janky page into a smooth one.

   Example useMemo for the filtered array and memo(JobRow) mean the filter runs once and only the rows that changed re-render.

   Practice Render a 500-item list, add useMemo for the filter, and confirm with the React profiler that typing stays responsive.

3. Accessibility in a React app

   React makes accessible markup easy if you use the semantic element instead of a div with a click: a button is focusable and keyboard-pressable for free. Labels, alt text and a live region cover the rest.

   Example <button onClick={...}> is keyboard-operable; <div onClick={...}> is not, and adding role="button" plus key handlers to fix it is work you did not need.

   Practice Audit one component: replace two clickable divs with buttons and add a label to every input.