Zen Training
Academy

React Js

Course Objectives

  • Understand the new JavaScript language features, including classes, modules, and arrow functions
  • Articulate what React is and why it is useful
  • Explore the basic architecture of a React application
  • Gain a deep understanding of JSX and the Virtual DOM
  • Use React components to build interactive interfaces
  • Create and validate forms using controlled components
  • Make HTTP calls to read or change data
  • Explore the common component architecture patterns
  • Configure simple and complex routing
  • Test React project using JEST
  • Incorporate React best practices

Course Outcomes

  • You will have a strong understanding of the new JavaScript language
  •  You will be able to develop full-fledged web applications using react
  • You will build complex user interfaces with a unidirectional data flow with React. js
  • You will have the ability to architect a scalable react application
  • You will be able to develop high quality reusable react components
  • You will be able to write test cases for react components using JEST seamlessly
  • You will be able to avoid anti-patterns and write high-quality code
  • You will be equipped with industry knowledge to appear for the interview confidently and achieve career acceleration.

15

Modules

225

Hours

1

Project

Course Structure

1. Introduction and Foundation

15 hours

  • Overview of frameworks, and libraries for client-side Web applications
  • Bit of history Environment
  • Setup for React Application
  • Understanding NPM commands
  • VS Code extensions for ES6, React
  • Start Hello-World and Hands-on
  • Add CSS to your Hello World
  • Quiz

2. React Essential Features and Syntax

15 hours

  • React App Project Directory Structure
  • Overview of Webpack
  • Overview of Babel

3. Component Basics

15 hours

  • Component creation
  • Quiz

4. JSX

15 hours

  • Understanding JSX
  • Limitations of JSX
  • Working with Components and Reusing Components
  • Quiz & Assignment

5. React Components, Props and State, Hooks

15 hours

  • Understanding and using Props and State
  • Handling Events with methods
  • Two way data-binding
  • Functional (Stateless) VS Class (Stateful) Components
  • Parent–Child Communication
  • Manipulating the State
  • Dynamically rendering contents
  • Showing Lists, List and keys
  • React Hooks
  • Quiz & Assignment

6. Styling Components

15 hours

  • CSS Styling
  • Scoping Styles using Inline Styles
  • Limitations of inline styles
  • Inline Styles with Radium
  • Using Pseudo classes/media queries with inline styles
  • CSS Modules, importing CSS classes
  • Adding Bootstrap, and Semantic UI to React apps
  • Using react-bootstrap, reactstrap packages
  • Quiz & Assignment

7. React Component life cycle

15 hours

  • Updating life cycle hooks
  • PureComponents
  • React’s DOM Updating Strategy
  • Returning adjacent elements
  • Fragments
  • Quiz & Assignment

8. Debugging React Apps

15 hours

  • Understanding React Error Messages
  • Handling Logical Errors
  • Debugging React apps using google developer tools and FB React DevTool
  • Understanding Error Boundaries
  • Quiz & Assignment

9. React Component in Details

15 hours

  • Higher-Order Components
  • Passing unknown Props
  • Validating Props
  • Using References
  • React Context API
  • Updated LifeCycle hooks (16.3)
  • Best practices for React Projects
  • Quiz & Assignment

10. HTTP Requests/Ajax Calls

15 hours

  • HTTP Requests in React
  • Introduction of Axios package
  • Using Fetch
  • GET Request – fetching & transforming data
  • POST Request
  • Delete, UPDATE Handling Errors Adding/Removing Interceptors
  • Quiz & Assignment

11. React Routing

15 hours

  • Routing and SPAs
  • Setting Up the Router Package
  • React-router vs react-router-dom
  • Preparing the Project For Routing
  • Switching Between Pages, Routing-Related Props
  • The “withRouter” HOC & Route Props
  • Passing & extracting route/query parameters
  • Using Switch to Load a Single Route
  • Navigating Programmatically
  • Handling Not Found (404) Quiz & Assignment

12. React Forms and Form Validation

15 hours

  • Creating a Custom Dynamic Input Component
  • Setting Up a JS Config for the Form
  • Dynamically Create Inputs based on JS Config
  • Adding a Dropdown Component
  • Handling User Input
  • Handling Form Submission
  • Adding Custom Form Validation
  • Fixing a Common Validation
  • Adding Validation Feedback
  • Handling Overall Form Validity
  • Showing Error Messages
  • Quiz & Assignment

13.  Deploying React App to the Web

15 hours

  • Deployment Options and VS Code options
  • Quiz & Assignment

14. Testing React apps with JEST

15 hours

  • What is JEST
  • Snapshot Testing
  • Snapshot Testing with Mocks, Enzyme and React 16
  • Quiz & Assignment

15. Project

15 hours

  • Real-time Project involving most of the above concepts with details to implement will be provided
Join Now
Download React Js Curriculum (34 downloads)

Zen Training
Academy

Courses

Java

Node Js

React Js

Company

All Courses

About Us

Contact Us

Contact

zentrainacademy@gmail.com

+91 75300 01564

Copyright © 2022 Zen Training Academy, All Rights Reserved.