React JS Training in Dubai, United Arab Emirates

Learning Objective:

Understand how react makes things perform, learn how to set up, run and debug a react app.

• 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

Hands-on:

Install create-react-app and create a new react project.

Learning Objective:

Understand the significance of JSX and know its syntax and features.

• Working with React.createElement
• Expressions
• Using logical operators
• Specifying attributes
• Specifying children

Hands-on:

Create JSX expressions with different javascript expression, apply css via className and styles, use conditonals.

Learning Objective:

Understand the significance of component architecture and learn how to decompose UI into components and compose them back to make UI.

• Significance of component architecture
• Types of components
• Functional
• Class based
• Pure
• Component Composition

Hands-on:

Create class based and functional components.

Learning Objective:

Learn how to manage state in class based react components and how to make communication between components using 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

Hands-on:

Create a stateful component and stateless component.
Pass data from parent component to child component using props.
Implement child to parent communication using callbacks.

Learning Objective:

Learn how to render lists and use key prop.

• Using react key prop
• Using map function to iterate on arrays to generate elements

Hands-on:

Create component which renders lists iteratively using map function of array.

Learning Objective:

Learn about React's synthetic event system and its working.

• Understanding React event system
• Understanding Synthetic event
• Passing arguments to event handlers

Hands-on:

Handle different synthetic events.

Learning Objective:

Understand the significance of lifecycle methods and application in realtime use cases.

Hands-on:

Create a stateful component and implement lifecycle methods.

Learning Objective:

Understand how to handle forms in react.

• Controlled components
• Uncontrolled components
• Understand the significance to defaultValue prop
• Using react ref prop to get access to DOM element

Hands-on:

Create a component that uses different form controls.

Learning Objective:

Understand the significance of routing, configure routing for SPA.

• 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

Hands-on:

Install and setup router, configure routing rules, implement declarative and imperative navigation.

Learning Objective:

Understand the how to manage state in just redux in plain vanilla JS app.

• What is redux
• Why redux
• Redux principles
• Install and setup redux
• Creating actions, reducer and store

Hands-on:

Create actions, reducer and store. Dispatch actions and subscribe to store changes.

Learning Objective:

Understand the challenges of mutability and how immutable js helps over the mutability challenges.

• What is Immutable.js?
• Immutable collections
• Lists
• Maps
• Sets

Hands-on:

Create immutable List, map and set. Perform CRUD operations.

Learning Objective:

Understand how to integrate redux into react application.

• What is React Redux
• Why React Redux
• Install and setup
• Presentational vs Container components
• Understand high order component
• Understanding mapStateToProps and mapDispatchtToProps usage

Hands-on:

Install and setup react redux
Configure Provider componet as top level component
Migrate react stateful component to connected component.

Learning Objective:

Understand the significance of middleware and learn how saga middleware works.

• Why redux middleware
• Available redux middleware choices
• What is redux saga
• Install and setup redux saga
• Working with Saga helpers
• Sagas vs promises

Hands-on:

Install and setup logger and saga middleware
Develop sagas use different side effects
Code sagas to fetch data from remote API using fetch/axios.

Learning Objective:

Understand significance of UI testing and learn how to unit test components, reducers using jest and enzyme.

• Understand the significance of unit testing
• Understand unit testing jargon and tools
• Unit testing react components with Jest
• Unit testing react components with enzyme

Hands-on:

Understand jest configuration
Install and setup enzyme
Write unit test to components and reducers.

Learning Objective:

Learn how to handle exceptions in components.

• Understand error boundaries (new in react 16)

Hands-on:

Create a Error Boundary Component and integrate with existing components.

Learning Objective:

Understand the significance of Webpack and learn how to set up a react project from scratch.

• What is webpack
• Why webpack
• Install and setup webpack
• Working with webpack configuration file
• Working with loaders
• Quick word on code splitting, lazy loading, tree shaking
• Setting up Hot Module Replacement

Hands-on:

Install and Setup webpack v4
Create a react boilerplate from scratch.

Learning Objective:

Understand the significance of isomorphic react and setup SSR.

• What is server-side rendering (SSR)?
• Why SSR
• Working with renderToString and renderToStaticMarkup methods

Hands-on:

Extend the react boilerplate to enable SSR
Develop express JS app to serve SSR powered react app.