[go: up one dir, main page]
Scribd
Upload
79 views4 pages

React - Js Duration - 12 (Half Days)

The 12-day training course provides comprehensive coverage of React.js including introductions to core React concepts like components, props, state, and JSX; setting up a React environment; making HTTP requests; routing; forms; Redux state management; lifecycles; deployment; and unit testing. The course progresses from basic Hello World apps to building full-featured products with routing, APIs, and Redux while also covering more advanced topics like hooks and microfrontends.

Uploaded by

Srinivasa Helavar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
79 views4 pages

React - Js Duration - 12 (Half Days)

The 12-day training course provides comprehensive coverage of React.js including introductions to core React concepts like components, props, state, and JSX; setting up a React environment; making HTTP requests; routing; forms; Redux state management; lifecycles; deployment; and unit testing. The course progresses from basic Hello World apps to building full-featured products with routing, APIs, and Redux while also covering more advanced topics like hooks and microfrontends.

Uploaded by

Srinivasa Helavar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like