JeevanJourney of learning
← All courses

Beginner to advanced

React: Basic to Advanced

Build a practical mental model of React, then progress from components and state to data fetching, testing, performance, and production-ready UI architecture.

For Developers comfortable with JavaScript and basic HTML/CSS

What you will learn

  • Explain how React renders a component tree and updates the UI from state.
  • Design components with clear props, state ownership, and composition boundaries.
  • Handle events, forms, effects, shared state, and asynchronous data intentionally.
  • Test user-visible behavior and make interfaces accessible.
  • Identify common performance problems and choose an appropriate optimization.
  • Evaluate when React, a framework, or a simpler rendering approach fits a product.

Where to use React

  • Interactive interfaces with reusable components and frequently changing UI state.
  • Large applications where teams benefit from composing and testing UI in small pieces.
  • Client-side experiences that need to coordinate user input, remote data, and navigation.

When React may not be the right choice

  • A mostly static page that can be served as HTML with no meaningful client-side interaction.
  • A project whose team cannot support the JavaScript and client-runtime complexity React introduces.
  • Choosing a UI library before understanding the product, accessibility, rendering, and hosting requirements.

How to use this course

Work through the chapters in order, try the examples in your own editor, and adapt each exercise rather than only copying it. Chapters link to an external React sandbox; no code is sent to or run by this portfolio. Your highlights and notes are stored in this browser only, separately for each chapter.

You should know JavaScript functions, arrays, objects, modules, and basic HTML before starting. TypeScript is useful but not required; examples use JavaScript so the React concepts stay in focus.

The course introduces core React before discussing libraries and production choices. It does not prescribe one framework, state library, or project structure for every application. Check the current official documentation when working with a specific React version.

Course chapters

  1. 01The React mental modelUnderstand declarative UI, rendering, and the component tree before writing application code.
  2. 02Components, JSX, and compositionBreak a page into cohesive components and compose them through JSX.
  3. 03Props, lists, and conditional UIPass data into components and render collections and alternate states predictably.
  4. 04State, events, and formsModel changing UI with state and respond to user actions without mutating data.
  5. 05State ownership, context, and reducersPlace state near its users, share it deliberately, and model complex transitions with a reducer.
  6. 06Effects, refs, and data fetchingSynchronize with external systems when needed, and represent asynchronous UI states explicitly.
  7. 07Custom hooks and server stateReuse stateful behavior with hooks and distinguish remote server data from local UI state.
  8. 08Performance and renderingMeasure first, then choose targeted optimizations for expensive rendering work.
  9. 09Testing, accessibility, and errorsTest meaningful behavior, use semantic HTML, and make failures understandable to users.
  10. 10Production decisions and next stepsChoose architecture and framework features based on product needs, then plan what to learn next.

References and further reading