REACT.JS WITH REDUX

Description: 

The course is structured over five days, covering essential topics such as JavaScript frameworks, React fundamentals, component lifecycle, React Hooks, Redux state management, server communication, and security considerations. Participants will also explore new features in React 18, utilize component libraries like Material UI, and learn deployment strategies for React applications. With a blend of lectures, hands-on exercises, and real-world examples, participants will emerge proficient in building robust React.js applications with Redux integration.

This comprehensive course offers a deep dive into React.js and Redux, covering fundamental concepts to advanced techniques. Participants will gain hands-on experience with React development, including state management, component creation, integration with REST APIs, debugging, and unit testing.

Level:

• Basic to advanced

Prerequisites:

• Working experience on JavaScript, HTML and CSS
• A good understating of Web Technologies like Servlet/JSP/PHP/ASP.Net/PHP

Reference

Objectives:

• Learning the new features of ES6 and ES7
• Understanding the building blocks of the React framework
• Exploring the various Toolchains
• Creating a React application using create-react-app tool
• Creating React Components 
• Building Form based applications
• Deep dive into React Components
• Building Data-driven applications
• Integrating with REST API’s
• Debugging and Error handling
• State Management with Redux and React Context
• Creating Single page applications
• Unit Testing
• Securing react applications.

Duration: 5 days

COURSE OUTLINE

DAY 1

• Introduction 
  • JavaScript Frameworks
  • What is ReactJS
  • Features of React 
• ES6 (Features for React)
  • JavaScript Execution Context
  • Scopes
  • Blocked Scopes
  • Functions and Arrow Function
  • Classes
  • Modules
  • Spread operator
• React Introduction
  • Understating React fundamentals
  • Components and JSX
  • The Babel compiler
  • Configuring and using Babel

• Creating ReactJS Applications 
  • The build process
  • Exploring the different Toolchains
  • React Project Setup with Create React App CLI Tool
  • Understanding the folder structure and Bootstrapping the Application
• Components
  • Creating Components
  • Functional and Class Components
  • Understanding and using Props
  • TypeChecking with PropTypes
  • Using Internal State
  • Using setState
  • Initializing States from properties
  • Accessing DOM nodes using refs
  • Forwarding refs
• Event Handling
  • Handling events in Components
  • Synthetic Events
  • Supported events

• JSX
  • JSX Syntax
  • Using JSX to create view classes
  • Creating views without using JSX
  • JavaScript Expressions in JSX
  • Accessing props and state in JSX

DAY 2

• Forms
  • Controlled Components
  • Uncontrolled Components
  • Validation options
• Components in-depth
  • Lifecycle
  • Implementing the lifecycle hooks
  • Legacy methods
  • Component Compositions
  • Communication Between Components
  • Subscribing to external State
  • Subscribing to State from Child components
  • Context
  • Higher-order components
  • Fragments
  • Server-side rendering
  • React Context
  • Hooks
  • React Lazy and Suspense

• Components and Performance
  • Understanding shouldComponenttUpdate and componentWillUpdate
  • PureComponents
  • Profiling components with Chrome
  • Immutable Data Structures

DAY 3

• React Hooks
  • Understanding the need for React Hooks
  • useState and useEffect
  • useRef, useImperativeHandle, useReducer,useCallabck, useId
  • Creating a custom hook

• Errors and Debugging
  • React Error messages
  • Using React Chrome Developer Tool
  • Error Boundaries
  • Debugging using Visual Studio Code and Chrome
• Server Communication
  • Understanding HTTP Requests in React
  • AJAX libraries for Server Communications
  • Installing and using Axios
  • CRUD operations with Axios
  • Understanding the Promise API
  • Intercepting request and responses
  • Transforming request and response data
  • Client-side support for protecting against XSRF

• • Redux
    • Understanding State and complexity of Managing State
    • Understand Redux Data Flow
    • Setting up Reducer and Store
    • Dispatching Actions, Adding Subscriptions
    • Connecting React to Redux, Store to React
    • Accessing state in a Component
    • Dispatching Actions from the Component

• Action Creators

• Combining Multiple Reducers

• Async Library options

• Using Thunk

• • Asynchronous Operations
  • Redux Toolkit

DAY 4

• React Libraries
  • Toolchains for creating React Libraries
  • Using the Create React Library toolchain
  • Linking and using libraries

• React Context
  • React Context to store data
  • The APIS’s
  • useContext Hook
  • Comparing with Redux

• Building Single Page Application
  • Routing and SPAs
  • Routing Libraries for React
  • Installing and using React Router
  • Basic Components
  • Rendering Routes, Switching between pages, Links to Switch Pages
  • Passing Route Parameters
  • Understanding Nested Routes
  • Redux Integration

• Unit Testing React.js Components
  • Understanding the Testing Libraries
  • Testing with Jest
  • Installing
  • Running Tests
  • Jest Globals
  • Async Testing
  • Mocking
  • Testing React Component
  • Testing React Redux Components

DAY 5

• New Features in React 18

• Component Libraries
  • Exploring various component libraries
  • Material UI
    • Installing and Usage
    • Using Components

• React and Security
  • Understating common security concerns
  • Authentication with JWT(JSON Web Tokens)
  • Authentication in React using Auth0 (overview & Demos)
• Deployment
  • Building a react applications for production
  • Deployment steps