1 ES6 Primer
Learning Objective: Understand the features of ES6 and new syntaxes.
- History of Javascript
- What is ES6
- A word on babel
- 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
- Hands-on:
- Create variables using let and const, create multi line strings with template literals, use spread and rest operators with functions, pull values for arrays and objects using destructuring, create arrow functions, create promises and generators for better async programming.
2 Introduction to React
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
- Install create-react-app and create a new react project.
3 Templating using JSX
- 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
- Create JSX expressions with different javascript expression, apply css via className and styles, use conditionals.
4 It's all about components
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
- Create class based and functional components.
5 Working with state and props
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
- Create a stateful component and stateless component.
- Pass data from parent component to child component using props.
- Implement child to parent communication using callbacks.
6 Rendering lists
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
- Create component which renders lists iteratively using map function of array.
7 Event handling in React
Learning Objective: Learn about React's synthetic event system and its working.
- Understanding React event system
- Understanding Synthetic event
- Passing arguments to event handlers
Handle different synthetic events.
8 Understanding component lifecycle
Learning Objective: Understand the significance of lifecycle methods and application in realtime use cases.
Create a stateful component and implement lifecycle methods.
9 Working with forms
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
- Create a component that uses different form controls.
10 Routing with react router
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
- Install and setup router, configure routing rules, implement declarative and imperative navigation.
11 Just Redux
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
- Create actions, reducer and store. Dispatch actions and subscribe to store changes.
12 Immutablejs
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
- Create immutable List, map and set. Perform CRUD operations.
13 React Redux
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
- Install and setup react redux
- Configure Provider component as top level component
- Migrate react stateful component to connected component.
14 Redux middleware
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
- Install and setup logger and saga middleware
- Develop sagas use different side effects
- Code sagas to fetch data from remote API using fetch/axios.
15 Unit Testing
Learning Objective: Understand the 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
- Understand jest configuration
- Install and setup enzyme
- Write unit test to components and reducers.
16 New Features of React 16
Learning Objective: Learn how to handle exceptions in components.
- Understand error boundaries (new in react 16)
- Create an Error Boundary Component and integrate with existing components.
17 Webpack Primer
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
- Install and Setup webpack v4
- Create a react boilerplate from scratch.
18 Isomorphic React
Learning Objective: Understand the significance of isomorphic react and setup SSR.
- What is server-side rendering (SSR)?
- Why SSR
- Extend the react boilerplate to enable SSR
- Develop express JS app to serve SSR powered react app.
