Learning Objectives : 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 Objectives : 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 Objectives : 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 Objectives : 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 Objectives- 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 Objectives- 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 Objectives- Understand the significance of lifecycle methods and application in real time use cases. Also learn how to handle errors declaratively.

Topics :

• 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 Objectives- 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 Objectives- Understand how to work with global state using context API.

Topics :

• 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