← Courses
IND 514 · 3 credits
Course Outline
React
Learn React from the ground up: components, JSX, props, state, lists, forms, effects, and how to structure a real app. You already know JavaScript and how the DOM works. This course shows you why React exists, builds a precise mental model of rendering, and finishes with a complete task tracker walkthrough.
What you will learn
- ✓Explain what problem React solves compared to manual DOM manipulation
- ✓Write function components with JSX and compose them into a UI tree
- ✓Pass data down with props and manage changing data with useState
- ✓Render lists with stable keys and show or hide UI conditionally
- ✓Build controlled forms where React state is the single source of truth
- ✓Use useEffect correctly for data fetching, subscriptions, and cleanup
- ✓Decide where state should live and lift it when components share data
- ✓Read and reason through a complete React app end to end
Course outline
Unit 1Why React
- 1-1The pain of manual DOM updates3 checks · 10 min
- 1-2UI as a function of data3 checks · 10 min
Unit 2Components and JSX
- 2-1Your first component3 checks · 9 min
- 2-2JSX rules4 checks · 13 min
- 2-3Composing components2 checks · 10 min
- 2-4Running React for real: Vite2 checks · 10 min
Unit 3Props: Passing Data Down
- 3-1Passing data with props3 checks · 10 min
- 3-2The children prop3 checks · 11 min
- 3-3Props are read-only: component contracts2 checks · 10 min
Unit 4State with useState
- 4-1Why components need state3 checks · 13 min
- 4-2Events and the state snapshot3 checks · 12 min
- 4-3Objects and arrays in state4 checks · 15 min
Unit 5Lists and Conditional Rendering
- 5-1Rendering lists with map4 checks · 10 min
- 5-2Keys: how React tracks list items4 checks · 12 min
- 5-3Conditional rendering3 checks · 11 min
Unit 6Forms and Controlled Inputs
- 6-1Controlled inputs3 checks · 11 min
- 6-2Multi-field forms and submit3 checks · 12 min
- 6-3Checkboxes, selects, and textareas3 checks · 11 min
Unit 7useEffect and Data Fetching
- 7-1Side effects and the dependency array3 checks · 12 min
- 7-2Cleanup functions3 checks · 12 min
- 7-3Fetching data4 checks · 15 min
Unit 8Lifting State and Component Design
- 8-1Lifting state up4 checks · 14 min
- 8-2Derived state: compute, don't store3 checks · 11 min
- 8-3Thinking in React: a design walkthrough3 checks · 13 min
Unit 9Capstone: A Task Tracker
- 9-1Designing the task tracker3 checks · 11 min
- 9-2Add, toggle, delete2 checks · 13 min
- 9-3Filters, summary, ship it3 checks · 13 min
- 9-4Persistence: saving tasks across refreshes4 checks · 12 min
Practice while you learn
Use Hack University's public online code editor when you want to run code online before committing to the full curriculum. The browser compilers are free for quick syntax checks, exercises, and interview practice in an isolated sandbox environment.