ReactJS for Full Stack

Languages
English + Gujarati + Hindi + Marathi
Batch Size
10-40
Duration
152 hours
Investment
$$$$$
Request Training Proposal

Course Contents

Induction training for new hires to get them project ready.

  1. OOJS & ES6 - 8 hours

    1. Classes in JavaScript: this keyword, Constructor, Member Variables, Member Functions

    2. Inheritance & Encapsulation (Private variables (Using #), Private Functions (Using #))

    3. Arrow functions, Multi-line strings (using backticks), Destructuring Assignment

    4. Promises & Async/Await, Enhanced Object Literals

  2. Basics of React - 2 hours

    1. What is React? History of React.

    2. What is virtual DOM? What is SPA (Single Page Application)?

  3. Local Setup - 8 hours

    1. What is Package.json? What is Package-lock.json?

    2. Checking out contents of public folder

    3. Understanding the sample app

    4. What is npm? Introduction to npmjs.com

    5. How to install packages with npm?

    6. What is yarn? How to install packages with yarn?

  4. DOM & Virtual DOM - 2 hours

    1. What is DOM? How to use DOM with JavaScript?

    2. What is Virtual DOM?

  5. Introduction to JSX - 4 hours

    1. Demo (Manipulation of HTML with javascript)

    2. What is JSX? Advantages of JSX.

    3. JSX syntax & examples

  6. Rendering Elements - 2 hours

    1. ReactDOM.render method

  7. Components - 8 hours

    1. What are the Components? Types of Components; What are props?

  8. Class-based Components - 12 hours

    1. Component Class in React; Creating a component

    2. What is the render method? How to implement a constructor?
    3. What is State? How to create states? How to update states?
    4. React re-rendering; LifeCycle of Component
    5. Lifecycle Methods - componentDidMount, componentDidUpdate, shouldComponentUpdate, getDerivedStateFromProps, getSnapshotBeforeUpdate
  9. Conditional Rendering - 4 hours

    1. Using && operator, Using || operator, Using ternary operator

  10. Working with lists - 4 hours
    1. Using the map function to render list elements
    2. A unique key attribute for elements
  11. Event Listener - 4 hours

    1. What are event listeners? Signature of the event listener.

    2. Event argument, Working with Event argument

  12. Forms - 12 hours

    1. Textbox - Saving the user input in state + Updating the text value

    2. Checkbox - Saving the user input in state + Updating the text value

    3. Radio - Saving the user input in state + Updating the text value

    4. Select - Saving the user input in state + Updating the text value + Dynamic options

    5. File - Saving the file in states

    6. Button - Handling the click event

  13. Working with Images - 2 hours

    1. How to insert images in React? Working with URLs; Working with local images

  14. Making API Calls - 4 hours

    1. Install Axios, Importing Axios; Sending REST API calls

  15. Local Storage - 2 hours

    1. What is localStorage? How to use localStorage in React?

  16. Cookies - 2 hours

    1. What are Cookies? How to use cookies in React?

  17. Functional Components - 12 hours

    1. Why functional component? How to create functional components?

    2. How props are passed to a functional component?

    3. What are hooks? useState hook + useEffect hook + Custom hooks

  18. Nesting Components - 6 hours

    1. How to nest components?

    2. How to pass data from Parent to Child?

    3. How to pass data from Child to Parent?

  19. Routing - 4 hours

    1. What is routing? Installing React-router

    2. Configure routing in project; Creating routes, Switching routes

  20. Debugging - 6 hours

    1. Debugger; statement; How to debug in the browser? 

    2. Adding variable watch; Understanding the stack trace 

    3. Using the console to read & manipulate variables

  21. React UI Frameworks - 10 hours

    1. What are UI frameworks? Overview of following frameworks: Bootstrap + Antd + ElasticUI

  22. Optimizing React Project - 10 hours
    1. Performance Issues faced with React app; How to mitigate these issues
    2. Multiple Re-renders issues; Production Build
    3. Avoiding data mutation; Lazy Loading
    4. Using Import() for code splitting; Route-based code splitting
  23. Redux - 12 hours

    1. Why do we need Redux? How does Redux work?

    2. Adding Redux to your app.

    3. Creating Redux Actions, Creating Reducers 

    4. Connecting components to the store 

    5. Running React-Redux application 

    6. Persisting the Redux store 

    7. Redux DevTools; Best Practices 

  24. Middleware Thunk - 12 hours

    1. Why do you need Redux Thunk? How does Redux Thunk work?

    2. Adding Redux Thunk to React; Creating a thunk, Async thunks

    3. Refactoring the IMDb reducer; Using thunks to create server resources; Using thunks to delete server resources

  25. Live Project: IMDb

Assessment:

  • Frequency: Fortnightly reporting
  • Module-specific and Overall assessment
  • Parameters: Back End Architecture + Command on C# + Thinking in React + Component Creation + Integration back-end & front-end

Instructor Profile

instructor_image

Experienced developer and entrepreneur. Expert in React.Js, Node.Js, MERN Stack, DevOps, Microservices, Cloud, Blockchain, Flutter, etc. Trained students, freshers, and experienced professionals.

This course includes:

  • 100% Online Sessions
  • Instructor led
  • Customizable Syllabus
  • Customizable Schedule
  • Certificate of Completion
  • Training Recordings
  • Training Resources
  • Learner Assessment
Request Training Proposal

Related courses