REACT Foundations (GK840204)

1 Introduction to React

What is React and its history

• • Definition and differentiation
• • Key benefits and use cases
• • Component-based architecture for building UI

Virtual DOM

• • Definition of the virtual DOM
• • How React uses the virtual DOM (conceptually)
• • Simple comparison with traditional web development
• • Why this matters for modern web apps

React Development Setup

• • Development environment setup
• • Quick start with Create React App
• • Development tools associated with React (React Developer Tools)

Project Structure

• • Generating first React app with Create React App
• • Folder structure: Component organization and file name conventions

2 JSX

Getting Started

• • HTML entry point (root div)
• • createRoot and render
• • Basic React component structure with JSX
• • Understanding the relationship between files

Fundamentals

• • What is JSX and why do we use it?
• • Rules of JSX (parent element, closing tags)

Writing JSX

• • Basic syntax and attributes
• • Adding JavaScript expressions with {}

Exploring JSX use cases

• • Variables and props
• • Simple conditional rendering

3 React Components

Component Basics

• • What is a component?
• • Creating your first component
• • Single line and multiline JSX in a component
• • Importing and exporting components
• • Rendering a component

More about React Components

• • Logic in a React component
• • Conditions in a React component
• • Handling user interactions in components

Component Composition

• • Putting components in other components
• • Reusing components
• • Component organization

4 Props

Prop basics

• • What are props?
• • Passing data to components
• • Receiving props
• • Prop types and defaults
• • Children prop
• • Rendering a component's props
• • Passing props from component to component
• • Dynamic rendering with props

More complex prop patterns

• • Pass an event handler as a prop
• • Receive an event handler as a prop
• • Event handler naming conventions

6 State and Events

Understanding State

• • What is state?
• • "stateful" components
• • When to use state
• • When not to use state
• • Component re-rendering basics

useState Hook

• • What is a hook?
• • Initializing state
• • State updates
• • Multiple state values

Brief recap of content covered in Day 1, focusing on creating components and state

1 Component Patterns

Component Architecture

• • Container vs Presentational Components
• • When to separate components
• • Rendering presentational components in containers

React Data Flow

• • One-way data flow concept
• • Parent/Child communication patterns
• • Sibling/Sibling communication
• • Understanding prop drilling
• • Lifting state up as a solution

2 Styling in React

• • Regular CSS with className
• • CSS modules basics
• • Styling organization
• • Component-specific styling

3 Effects and Lifecycle

Working with Effects

• • What are side effects in React?
• • Why we need to manage effects
• • Basic syntax and usage of useEffect hook
• • When effects run
• • Effect dependencies
• • What is cleaning up an effect?
• • How to write cleanup functions

Lifecycles

• • Component phases (initial, updates, cleanup)
• • Using effects for lifecycle needs

4 Forms

Form Fundamentals

• • HTML forms vs React forms
• • React's two approaches: Controlled vs Uncontrolled
• • When to use each approach

Uncontrolled Forms

• • useRef hook with forms
• • Accessing input values
• • Creating a basic uncontrolled form
• • Handling submit events
• • Getting form values
• • Use cases for uncontrolled forms

Controlled Forms

• • Basic form elements
• • useState with single inputs
• • Managing multiple form fields
• • Handling different input types
• • Handling form submission
• • Preventing default behavior
• • Gathering form data
• • Basic validation
• • Success/error states

5 Debugging React Applications

React Developer Tools

• • Components tab
• • Props and state inspection
• • Component tree navigation

Debugging React Applications

• • Common React errors and solutions