React JS
=====
—–
* Course Id : JSPT-REAC
* Duration : 24 Hours
Overview
—–
* React has become one among the most popular and efficient JavaScript front end libraries recently
* Developed by Facebook
* React helps build apps with more ease, scalability and robustness
Prerequisites
—–
* The participants should have the basic knowledge of web development, HTML, and JavaScript
Objectives
—–
* Hands-on training on react 16.8
* Learn concepts of modern JS (ES6+)
* JSX UI
* UI and components in React
* Code splitting and lazy loading
* Hooks and context
* Routing with react-router
Course Structure
—–
* We provide more focus on hands-on in our technical courses (typically 80% hands-on/20% theory)
* Students get the capability to apply the material they learn to real-world problems
Materials Provided
—–
* All participants receive
* PDF of slides
* PDF of handson
* Access to instance with lab environment
Software Requirements
—–
Any of the following
* Any current internet browser
* vnc client
* rdp client
Hardware Requirements
—–
* Processor: 1.2 GHz+
* RAM: 512 MB+
* Disk space: 1 GB+
* Network Connection with low latency (<250ms) to Internet
Course Outline
## Daywise Course Outline
—–
## Day 1
—–
* Unit 1 : ES6 Refresher
* Unit 2 : Introduction to React
* Unit 3 : Templating using JSX
* Unit 4 : Components
## Day 2
—–
* Unit 5 : State and props
* Unit 6 : Rendering lists
* Unit 7 : Event handling in React
* Unit 8 : Component lifecycle
## Day 3
—–
* Unit 9 : Working with forms in React
* Unit 10 : Context
* Unit 11 : Code-Splitting
* Unit 12 : Hooks
## Day 4
—–
* Unit 13 : Routing with react router
* Unit 14 : Redux
* Unit 15 : Immutable.js
* Unit 16 : React Redux
## Day 5
—–
* Unit 17 : Redux middleware
* Unit 18 : Unit Testing
* Unit 19 : Webpack Primer
* Unit 20 : Isomorphic React
## Detailed Outline
—–
Unit 1 : ES6 Refresher
* History of Javascript
* What is ES6
* A word on bable
* Block scope, let & const
* Template literals
* Arrow functions
* Spread and Rest operators
* Object literal improvements
* Destructuring
* Classes
* Inheritance
* Static properties and methods
* Promises
* Iterators and Iterables
* Generators
* Modules
Unit 2 : Introduction to React
* What is React?
* Why React?
* React version history
* React 16 vs React 15
* Just React – Hello World
* Using create-react-app
* Anatomy of react project
* Running the app
* Debugging first react app
Unit 3 : Templating using JSX
* Working with React. createElement
* Expressions
* Using logical operators
* Specifying attributes
* Specifying children
* Fragments
Unit 4 : Components
* Significance of component architecture
* Types of components
* Functional
* Class based
* Pure
* Component Composition
Unit 5 : State and props
* What is state and it significance
* Read state and set state
* Passing data to component using props
* Validating props using propTypes
* Supplying default values to props using defaultProps
Unit 6 : Rendering lists
* Using react key prop
* Using map function to iterate on arrays to generate elements
Unit 7 : Event handling in React
* Understanding React event system
* Understanding Synthetic event
* Passing arguments to event handlers
Unit 8 : Component lifecycle
* Understand the lifecycle methods
* Handle errors using error boundaries
Unit 9 : Working with forms in React
* Controlled components
* Uncontrolled components
* Understand the significance to default Value prop
* Using react ref prop to get access to DOM element
Unit 10 : Context
* What is context
* When to use context
* Create Context
* Context.Provider
* Context.Consumer
* Reading context in class
Unit 11 : Code-Splitting
* What is code splitting
* Why do you need code splitting
* React.lazy
* Suspense
* Route-based code splitting
Unit 12 : Hooks
* What are hooks
* Why do you need hooks
* Different types of hooks
* Using state and effect hooks
* Rules of hooks
Unit 13 : Routing with react router
* Setting up react router
* Understand routing in single page applications
* Working with BrowserRouter and HashRouter components
* Configuring route with Route component
* Using Switch component to define routing rules
* Making routes dynamic using route params
* Working with nested routes
* Navigating to pages using Link and NavLink component
* Redirect routes using Redirect Component
* Using Prompt component to get consent of user for navigation
* Path less Route to handle failed matches
Unit 14 : Redux
* What is redux
* Why redux
* Redux principles
* Install and setup redux
* Creating actions, reducer and store
Unit 15 : Immutable.js
* What is Immutable.js?
* Immutable collections
* Lists
* Maps
* Sets
Unit 16 : React Redux
* What is React Redux
* Why React Redux
* Install and setup
* Presentational vs Container components
* Understand high order component
* Understanding mapStateToProps and mapDispatchtToProps usage
Unit 17 : Redux middleware
* Why redux middleware
* Available redux middleware choices
* What is redux saga
* Install and setup redux saga
* Working with Saga helpers
* Sagas vs promises
Unit 18 : Unit Testing
* Understand the significance of unit testing
* Understand unit testing jargon and tools
* Unit testing react components with Jest
* Unit testing react components with enzyme
Unit 19 : Webpack Primer
* What is webpack
* Why webpack
* Install and setup webpack
* Working with webpack configuration file
* Working with loaders
* Working with plugins
* Setting up Hot Module Replacement
Unit 20 : Isomorphic React
* What is server-side rendering (SSR)?
* Why SSR
* Working with renderToString and renderToStaticMarkup methods