React.js Training in Los Angeles-CA, United States

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

Topics:

• 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.     

Topics:

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

Hands-on: Create JSX expressions with different javascript expression, apply css via className and styles, use conditionals.

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

Topics:

• 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.

Topics:

• 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.

Topics:

• 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.

Topics:

• 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 real time use cases. Also learn how to handle errors declaratively.

• Understand the lifecycle methods
• Handle errors using error boundaries

Hands-on: Create a stateful component and implement lifecycle methods. Implement try catch mechanism using error boundaries.

Learning Objective: Understand how to handle forms in react.

Topics:

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

Hands-on: Create a component that uses different form controls.

Learning Objective: Understand how to work with global state using context API.

• What is context
• When to use context
• Create Context
• Context.Provider
• Context.Consumer
• Reading context in class

Hands-on: Create components that get applied with multiple themed styles using context to store theme info globally and apply to all components

Learning Objective: Understand the need of code splitting and implement the same on a component basis.

• What is code splitting
• Why do you need code splitting
• React.lazy
• Suspense
• Route-based code splitting

Hands-on: Create react application that implements code splitting and lazy load components using React.lazy and suspense features.

Learning Objective: Understand the need for hooks and implement hooks to access state and effects hook in functional components.

• What are hooks
• Why do you need hooks
• Different types of hooks
• Using state and effect hooks
• Rules of hooks

Hands-on: Create a functional component that uses the ability of state and life cycle features

Learning Objective: Understand the significance of routing, configure routing for SPA.

Topics:

• 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 how to manage state in just redux in plain vanilla JS app.

Topics:

• 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.

Topics:

• 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.

Topics:

• 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 component as top level component. Migrate react stateful component to connected component.

Learning Objective: Understand the significance of middleware and learn how saga middleware works.

Topics:

• 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.

Topics:

• 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: Understand the significance of Webpack and learn how to set up a react project from scratch.

Topics:

• 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

Hands-on: Install and Setup webpack v4. Create a react boilerplate from scratch.

Learning Objective:   Understand the significance of isomorphic react and setup SSR.

Topics:

• 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.