React JS Bootcamp

Learning Objectives:

By the end of this module, participants will be able to 

• Remember the history and core principles of React
• Understand the component-based architecture of React and how it compares to Angular architecture
• Apply knowledge of React’s principles to conceptualize how UI rendering works in React.
• Analyze the key differences and similarities between React and Angular
• Evaluate the advantages and disadvantages of using React
• Create a simple React component to demonstrate foundation understanding

Outline:

• Introduction to React
• History and Evaluation
• Response and Use Case
• React’s Philosophy and Component Based Architecture
• Declarative Programming Paradigm
• Component as building block
• Uni direction data flow
• The Virtual DOM
• Key differences between React and Angular
• Library vs Framework
• JSX vs Template
• Data binding
• Learning Curve vs Flexibility
• State Management
• Setting up the development environment
• Create React App (CRA)
• Vite

Activity:

• Hands-on Activity of Creating Simple Hello World program

Learning Objectives:

By the end of this module, participants will be able to:

• Understand what JSX is and its role in React development
• Difference between JSX and Angular Template
• Write JSX code to create React elements and components
• Utilize expression, attributes, and styling with JSX
• Rendering elements and components to the DOM
• Apply the best practices when writing JSX

Outline:

• Why Use JSX
• How JSX Works
• JSX vs Angular Template
• Angular Template
• JSX HTML-like Syntax
• Key Differences
• Pros and Cons
• Writing JSX Code
• Basic JSX Syntax
• Embedding Expressions
• JSX Attributes
• Conditional Rendering
• Styling Elements
• Rendering Elements and Components
• Rendering to DOM
• Updating Elements
• Component Returning JSX
• Best Practices in JSX

Activity:

• Creating JSX Element
• Converting Angular component into JSX
• Building a greeting component

Learning Objectives:

By the end of this module, participants will be able to:

• Understand the concept and significance of components in React
• Create the functional component
• Utilize props to pass data between components
• Implement component composition and nesting to build complex UI
• Apply best practices in component design and organization

Outline:

• Introduction to React Components
• What Are Components?
• Importance of Components
• Creating and Exporting Components
• Component Structure
• Exporting and Importing Components
• Props and Data Passing
• What Are Props?
• Default Props
• Component Composition and Nesting
• Component Composition
• Children Props

Activity:

• Expanding the Greeting Component with Props
• Creating a User Profile Component with component for personal, professional, and address components

Learning Objectives:

By the end of this module, participants will be able to:

• Understand how event handling works in React.
• Implement event handlers in React components.
• Differentiate between React Event and Browser Event.
• Compare event handling in React with Angular event binding.
• Use event binding and pass parameters to events.
• Apply best practices for managing events in React applications.

Outline:

• Introduction to Event Handling in React
• What are the events
• React’s Synthetic Event System
• Adding Event handler in React
• Syntax for event handling
• Defining Event handler function
• Handling event in functional component
• Using function define inside the component
• Using Arrow function for Event handlers
• Passing arguments to Event Handler
• Using arrow function in JSX
• Preventing Default Behavior and Event Propagation
• Preventing Default Action
• Stop event propagation
• Compare event handling with Angular
• Event binding syntax
• Event object
• Preventing default behavior
• Event propagation

Activity:

• Create a simple button component with event
• Activity: Create a nested component with event handlers at different levels

Learning Objectives:

By the end of this module, participants will be able to

• Understand the React component lifecycle and its significance
• Implement useEffect Hook in functional components to manage its side effects
• Use useState Hook to manage component state
• Handle common side effects such as data fetching
• Compare lifecycle management in React functional component with Angular lifecycle hook

Outline:

• Introduction to lifecycle in functional component
• What is component lifecycle
• Lifecycle phases in functional component
• Managing state with useState Hook
• Introduction to useState
• Multiple state variable
• Managing side effect with useEffect Hook
• Introduction to useEffect
• Handling different lifecycle phases
• Common usecases
• Cleaning up side effects
• Comparison with Angular lifecycle hook

Activity:

• Use useState and useEffect to create counter
• Update User profile component to use useState

Learning Objectives:

By the end of this module, participants will be able to

• Understand how to implement conditional rendering
• Render list of data using .map() function
• Comprehend the importance of keys in list rendering
• Understand different methods of styling components in React
• Implement inline styles and apply CSS class to React
• Use CSS Modules for scoped styling in React application

Outline:

• Introduction to conditional rendering
• What is conditional rendering?
• Why conditional rendering is important?
• Implement conditional rendering
• Using if
• Using trinary operator within JSX
• Using logical && operator
• Preventing component rendering
• Compare with Angular *ngIf and *ngFor
• Rendering list in React
• Using .map() function
• Embedding map() directly in JSX
• Understanding keys in the list
• Why are keys important?
• Assigning unique keys
• Introduction to styling in React
• Importance of styling
• Applying inline-style
• Using CSS class
• CSS Modules
• What is CSS Modules?
• Implement CSS Modules
• Dynamic styling

Activity:

• Create a login button that displays login in or logout based on the user’s state
• Create a to-do list that displays multiple to-do items.
• Apply the inline style and CSS classes in the above components

Learning Objectives:

By the end of this module, participants will be able to

• Understand the concept and importance of client-side routing in single-page applications (SPA).
• Set up React router in a React application.
• Implement routing to navigate between different components using Route, Routes and Link
• Use route parameters to create dynamic routes and access route data
• Compare React route with Angular’s routing system, highlight similarities and differences

Outline:

• Introduction to Client-side routing
• What is Client-Side routing
• Why use React router?
• Setup React Router
• Installation React Router DOM package
• Basic Setup
• Implement Routes
• Navigate between Routes
• Using Route parameters
• Dynamic Routes
• Accessing Route Parameters
• Compare React Router with Angular Router
• Angular router overview
• @angular/router module
• React component and hooks vs Angular module and services

Activity:

• Create a simple routing application to route different components of the application
• Implement Route parameters in the previous application

Learning Objectives:

• By the end of this module, participants will be able to
• Understand the challenges of State management in React
• Understand the flux design pattern
• Explore the third party statement management libraries like Redux
• Integrate Redux into a React application
• Compare different stat management approaches

Outline:

• Introduction to Statement Management in React
• Why state management matters
• Challenges in state management
• Concept of lifting state up
• Flux design pattern
• Action, interface and dispatcher
• Introduction to Redux
• What is Redux
• Core Principals of Redux
• When to use Redux
• Setting up the Redux store
• Define reducer
• Providing the store to React
• Compare state management approaches
• State lifting
• Context API
• Redux

Activity:

• Create a dice simulation application using useReducer hook
• Create a dice simulation application using Redux

Learning Objectives:

By the end of this module, participants will be able to

• Understand how to handle forms and user input in the React application
• Handle form submission and prevent default browser behavior
• Validate user input and provide user feedback
• Compare form handling in React with Agular’s template-driven and reactive form

Outline:

• Introduction to Form in React
• Importance of form
• Challenges with form in React
• Controlled vs Uncontrolled components
• Handling form input
• Handling form submission
• Preventing default browser behavior
• Form validation
• Client-side validation
• Displaying validation messages
• Comparison with Angular form
• Template-driven form in Angular
• Reactive form in React
• Pros and Cons of Angular and React form

Activity:

• Create a component that takes input user profile and also performs data validation

Learning Objectives:

By the end of this module, participants will be able to

• Deepen the understanding of testing React applications with advanced techniques
• Setup the testing environment using Vitest and Reac Testing
• Write unit test for react component and custom hook
• Implement integration test

Outline:

• Why Testing Matters
• Type of tests
• Setting up testing environment
• Writing unit test with vitest and react testing library
• Understanding the test structure
• Simulating user event
• Mocking fetch calls
• Creating custom hooks

Activity:

• Create a simple component and write a snapshot test