React.

js

Duration - 12(Half Days)

Day 1 & 2
● Introduction to Web Development
● History of Web pages/sites and webapps
● Introduction to Single Page applications
● What is React?
● Comparison to other Web frameworks such as Angular
● How React can be used in existing server side apps
● Introduction to Node.js
● Installing Node.js, create-react-app
● Why create-react-app and webpack
● Detailed walk-through of the react app’s boilerplate code
● Hello world application
● React’s Component Oriented approach
● What are components, Basics and Demo
● Why Component Oriented Approach and Benefits
● More on Node.js, npm, installing packages etc
● Basics of Javascript
● Object orientation in Javascript
● Functional Programming in Javascript
● Simple javascript demos in browser and Node.js
● Arrays and Utility methods such as find, filter, map
● Creating new React components
● Introduction to JSX, why JSX, syntactical differences
● Wrapping multiple html elements in a jsx syntax
● How to import and re-use components

Day 3 &4
● Component’s state architecture
● React’s Virtual DOM
● What is data binding?
● React unidirectional data flow, 1-way data binding
● How to maintain state in a component
● How React renders a component - render() method
● React re-rendering on state change
● How to set state in a component
● Restrictions on how and where to setState
 ● What are props
● How to pass props to components
● State vs props, when to use what
● What are stateless components
● How to create stateless components using functions
● What are stateful components
● Component Composition
● Define proptypes, uses
● Defining product model, list of products with seed data
● Creating Product List/ProductDetails Components
● Using Array map method to create product list html
● Passing props to ProductDetails component
● Using ui elements such as buttons in components
● Events and event handling (onClick, onChange etc)

Day 5 & 6
● Introduction to Routing in websites/web apps/spa
● Uses of url based routing
● Installing react router and setting up routing
● Router, Route, IndexRoute, Redirect
● Setting up path and component properties
● Clean urls using BrowserHistory
● Create multiple routes such as Products, About, Home
● Routes with dynamic url parameters
● Setting up child routes
● Accessing url params in components
● Accessing nested/child components in routed components
● Navigation using Link component
● Use of activeClassName attribute
● Installing React Devtools
● Monitor state and props using React devtools
● Http calls using 3rd party libraries such as Axios
● Testing the CRUD api using Postman Client, Browser
● Making Http get, put, post and delete in React apps
● Understanding the promise apis and promise based operations
● Making http calls while component mounting
● Handling success, error scenarios in http operations
● Intercept request and response
● Transforming request and response, Cancelling requests
Day 7 & 8
● reason to have Redux library
● other features to introduce like useContext, etc.
● set up of Redux in code
● understanding of actions, reducers, store
● Implement Code structure of redux in React project
● Developing project and use of redux in the project
● Introduction of MicroFront End
● Why MicroFront End is required and where it has benefits
● Setup of MicroFront End in projects
● Implement MicroFront End in real project

Day 9
● Introduction to Forms
● Handling button events in React
● Handling text inputs in React using onChange events
● Accessing user inputs with refs
● Submitting forms with onSubmit event
● Form validations
● Validations of individual fields vs overall forms
● Setting up error messages based on validation
● Installing and using classnames library
● Styling the errors in forms using appropriate css classes
● Redirecting a create form to other pages
● Setting up a login form
● Login process, authenticating using JWT from backend
● Storing the JWT in local storage
● Router redirects after login, or when not logged in
● Making calls to protected apis with JWTs

Day 10 & 11
● What is Event propagation?
● Child to parent communication through events
● Custom method bindings inside constructor
● Usage of arrow functions inside ES6 classes
● Introduction to css classes and className attribute
 ● Usage of css libraries such as semantic ui
● Simple semantic components
● Introduction to component lifecycle
● Various lifecycle methods such as ComponentDidMount
● ComponentWillUpdate, ComponentWillUnmount etc
● React.js final build and deployment
● Deployment options
● Using 3rd party libraries
● Modern React features (Hooks)
● Insight into State management libraries

Day 12
● set up of Unit Testing using Jest
● Idea of Snap-shot testing and purpose of the same
● How to write the snapshot testing
● How to check the code-coverage of the project
● to check whether any id is present on UI screen
● unit testing on click of button functionality
● Will be taking up any questions for the whole training part