React Programming with Advanced JavaScript for Frameworks Training

This course is a composite of the Advance JavaScript for Frameworks and React Programming classes. It starts with the advanced features of JavaScript 2015/2016 (ES6 and ES7) for object-oriented programming. It focuses only on the features that are leveraged heavily in the React programming world.

The course then explores using the React and Redux frameworks to build client-side, single-page applications. React is used to build the JavaScript components that then are rendered to build the user interface. The participant will learn about the component lifecycle, how to define components as classes in React, and work with props and state. Redux is leveraged as the next generation framework to provide a unidirectional flow of information between the layers of the application.

• Experience using HTML and CSS.
• Basic experience with JavaScript programming.
• Exposure to JavaScript (ES6) features, Node.js, and Express is beneficial.

Part 1 – Advanced JavaScript for Frameworks

Chapter 1 – Quick JavaScript Review

• Data types
• Operators
• Conditional Statements
• Arrays and Loops
• Functions and scope
• Debugging

Chapter 2 – Strings

• Strings and methods
• Literal strings and special characters
• Equality and caching
• Template Strings and expressions

Chapter 3 – Functions

• Callbacks
• Arrow functions
• Closures, scope, and binding variables

Chapter 4 – Objects

• Literal objects, dot and subscript notation, enumerating properties
• Function references as properties
• Duck typing and polymorphism

Chapter 5 – Classes

• Class definitions and prototypal programming
• Methods and static methods
• Property definitions and access
• JSON import and export
• Extending classes and inheritance

Chapter 6 – Modules

• Module standards: CommonJS and ES6
• Defining modules and exporting entities
• Importing entities

Chapter 7 – Promises

• Promises provide multiple handlers and delayed handler registration
• Defining promises
• Consuming promises
• Error handling in promise chains
• Class methods returning promises

Chapter 8 – Async and Await

• Defining async functions
• Using await to mimic synchronous programming
• Generating and consuming errors in async functions
• Async class methods

Part 2 – React Programming

Chapter 1 - Getting Started

• The client-side, single-page application
• React ideology
• Package management with Node.js and the Node Package Manager
• Creating a React project with create-react-app
• Project Structure
• JavaScript ES6 and compilation
• Debugging ES6 using source maps

Chapter 2 - Basic Components

• React DOM elements and props
• JSX expressions
• Custom components
• Functional components
• Extending the React Component class
• Component hierarchy and nested components
• Props and the flow of information
• Building components
• Rendering components
• Reusable components

Chapter 3 – State

• Input fields
• Uncontrolled components
• Callback functions and class methods as callbacks
• Controlled components and state
• Uncontrolled vs. controlled components
• Working with state: toggling component presentation

Chapter 4 - DOM Abstraction

• DOM events
• HTML elements vs. React DOM elements
• DOM Reconciliation
• List keys
• Referencing browser DOM elements

Chapter 5 – Unit Testing

• Jasmine and Jest frameworks
• Building basic unit tests
• Testing strategies & testing edge cases
• Testing asynchronous code
• Mocking functions, classes, and other resources
• Capturing and testing React snapshots

Chapter 6 - Architecture with Components

• Prop validation
• Built-in and custom validators
• Data flow
• State vs. props
• Pure and stateful components
• Container components
• Component composition strategies
• Immutability
• Lifecycle
• Fetch and AJAX requests

Chapter 7 – Forms

• Form validation strategies

Chapter 8 – Routing

• The React router
• Route parameters
• Active links
• Changing routes programmatically
• Injecting data sources
• JSON conversions

Chapter 9 – Redux

• Redux architecture
• Store and reducers
• Actions and action creators
• Separating and combining reducers
• Using Redux asynchronously

Appendix A - Flux

• Flux architecture
• Stores
• Actions and action creators
• Dispatchers
• Using Flux asynchronously