ReactJS for Full Stack

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