React Basics

Get comfortable with React by understanding components, props, state, and hooks from first principles.

4 hours

From HTML to React components. Learn React fundamentals, tooling, and master core concepts like props, state, and hooks.

Book this workshop

Starting with HTML and vanilla JavaScript, we build up to React components and learn how React's declarative model makes UI development more predictable.

This workshop covers the fundamentals you need: components, props, state management with hooks, and essential React tooling. We work hands-on so concepts stick.

What your team walks away with

  • Understand React components and how props flow through component trees.
  • Master state management with useState, useEffect, and other core hooks.
  • Set up React tooling including Create React App or Vite for development.
  • Build interactive UIs by combining components, props, and state effectively.

Workshop flow

1

From HTML to React components

Learn how React transforms HTML into components and the component model.

60 min
  • Understanding JSX and how it maps to HTML
  • Component composition and reusability
  • Props: passing data to components
  • Setting up React development environment
2

State and hooks fundamentals

Master state management with useState, useEffect, and core React hooks.

90 min
  • useState for component state
  • useEffect for side effects and data fetching
  • useRef and useMemo for optimization
  • Common hooks patterns and best practices
3

React tooling and hands-on build

Set up React tooling and build a complete feature using all fundamentals.

90 min
  • React DevTools and debugging
  • Using Create React App or Vite
  • Building a complete feature: list, forms, and interactions
  • Applying all concepts together in a real project

Ready to run React Basics?

Let me tailor the agenda to your stack, team size, and delivery goals so you get immediate impact. Share a bit of context and we will ship a plan within a day.

Book this workshop