React

Course Number:

N/A

This course explores using the React and Redux frameworks to build client-side single-page applications. React is used to build the components that are rendered to build the user interface. The participant will learn about the component lifecycle, how to define components as classes in React and how to work with props and state.

Redux is the next generation framework to provide a uni-directional flow of information between the layers of the application. The course is fast-paced and relies on the participant having a firm grasp of HTML, CSS, and advanced JavaScript programming with ES6 additions.

Audience:

Course Duration:
2 days

Prerequisites:

  • Experience using HTML and CSS to build web pages
  • Mastery of advanced JavaScript features, including callbacks, constructors and prototypes
  • Exposure to JavaScript ES6 features, including arrow functions, classes, the spread operator, etc.
  • Exposure to Node.js and Express web services is a plus
Course Objectives:
Course Outline:
  • Chapter One – Getting Started
    • The client-side, single-page application
    • React ideology
    • Package management with Node.js and npm
    • Project Structure
    • JavaScript ES6 and transpilation
    • Development workflow
    • Bundling and Webpack
    • Debugging ES6
  • Chapter Two – Basic Components
    • React DOM elements and props
    • JSX expressions
    • Custom components
    • Functional components
    • Extending React.Component
    • Component hierarchy and nested components
    • Props and the flow of information
    • Building components
    • Rendering components
    • Reusable components
  • Chapter Three – 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 Four – DOM Abstraction
    • DOM events
    • HTML elements vs. React DOM elements
    • DOM Reconciliation
    • List keys
    • Referencing browser DOM elements
  • Chapter Five – 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 Six – Forms
    • Form validation strategies
  • Chapter Seven – Routing
    • The React router
    • Route parameters
    • Active links
    • Changing routes programmatically
    • Injecting data sources
    • JSON conversions
  • Chapter Eight – Redux – 90/120
    • Redux architecture
    • Store and reducers
    • Actions and action creators
    • Separating and combining reducers
    • Using Redux asynchronously
  • Chapter Nine – Deployment
    • Deploying Babel in production
    • Build tools and webpack
    • Appendix A Flux
    • Flux architecture
    • Stores
    • Actions and action creators
    • Dispatchers
    • Using Flux asynchronously

 

Related Posts

About Us
Ntier company logo

IT Training, Agile Ways of Working and High Impact Talent Development Strategies

Let Us Come to You!

Classes recently delivered in: Atlanta, Boston, Chicago, Columbus, Dallas, Detroit, Indianapolis, Jerusalem, London, Milan, New York, Palo Alto, Phoenix, Pittsburgh, Portland, Raleigh, San Antonio, San Diego, San Francisco, San Jose, Seattle, Springfield, Mass., St. Louis, Tampa and more!