Professional ReactJS Development

Front-end Development with React.js is a complete introduction to modern front-end development. It covers the syntax, conventions, and best practices of modern JavaScript development while also teaching React. In the process, students learn about TDD and, specifically, how to test React and Redux applications using the Jest testing framework as they build a complete React/Redux application.

Categories: , Tags: , ,

Description

In this class, students learn the fundamental ideas behind React and then quickly move on to hands-on problem solving and some of the most advanced and up-to-date techniques and tools in React development, including: Redux, Redux thunk, Redux Saga, Hooks, micro services and micro frontends, and server-side react. The course teaches just enough about testing and tools for students to be productive, but is primarily focused on hands-on exercises in which students will build a real-world ecommerce shopping cart application. An optional introduction to modern JavaScript syntax (ES6+) and best practices is included and can be used for self-study or in-class lecture and demonstrations.

TARGET AUDIENCE

This course is designed for experienced professional developers (in any language) who want to learn how to quickly become productive with the latest version of React.

ABOUT THE AUTHOR

Chris Minnick has been a full stack developer for over 25 years, and a professional author and trainer for 15 years. He has been the lead front-end React developer for several startup companies, and has been building web and mobile user interfaces with React since 2015. Chris has produced online video courses for Pluralsight and O’Reilly Media and is the author of the forthcoming book for Wiley Publishing: React JS Foundations: Building User Interfaces with React JS (to be released in March 2022).

PRICING

This course is available for lease on a per seat / per day rate by trainers and training companies. The courseware includes slides, notes, assignments, and complete source code for all assignments.

OBJECTIVES

All students will:

  • Use Create-React-App to get started quickly with React
  • Learn to write unit tests for React, using Jest and Enzyme
  • Understand what React is and what problem it solves
  • Explore the basic architecture of a React application
  • Gain a deep knowledge of React components and JSX
  • Build a working application that uses React components
  • Learn about the Hooks API
  • Use Redux for maintaining state in a React.js application
  • Use the Context API to pass data in a component tree
  • Use Redux middleware
  • Make AJAX requests with React
  • Use server-side rendering
  • Learn React best practices
  • Build an application using Micro frontends

DURATION

This course can be taught as a 3-day course or a 5-day course. The 3-day version eliminates the sections covering advanced JavaScript and testing and has reduced Redux coverage.

OUTLINE

  1. Introduction
    1. What is React.js?
    2. When can you use React?
    3. Who Uses React?
  2. React Quick Start
    1. Test and Run a React App with CRA
    2. Adding React to an HTML File
    3. Lab 0: Using the UMD Build
    4. React with a Toolchain
    5. Lab 01: Get Started with Create React App
  3. Introduction to ReactJS
    1. Explore the Virtual DOM
    2. React Philosophy
    3. Understanding Components
    4. Composition vs. Inheritance
    5. React is Idiomatic
    6. Lab 02: Your First Component
    7. How React Works
    8. Virtual DOM
    9. State Machines
    10. React.render()
    11. Lab 03: Create More Components
    12. ReactDOM
    13. Other Rendering Engines
      1. React Native
      2. ReactDOMServer
      3. React Konsul
      4. react-pdf
    14. Lab 04: Testing React
  4. Advanced JavaScript
    1. Use arrow functions and block-scoped variables
    2. Create generator functions
    3. Use classes and modules
    4. Variable Scoping with const and let
    5. Arrow Functions
    6. Rest Parameter
    7. Template Literals
    8. Enhanced Object Properties
    9. Method notation in object property definitions
    10. Array Matching
    11. Object Matching
    12. Symbol Primitive
    13. User-defined Iterators
    14. Customizable iteration behavior for objects
    15. For-Of Operator
    16. Creating and Consuming Generator Functions
    17. Class Definition
    18. Class Inheritance
    19. Understanding this
      1. Implicit Binding
      2. Explicit Binding
      3. New Binding
      4. Window Binding
    20. Array.map()
    21. Array.filter()
    22. Array.reduce()
    23. Promises
    24. Async / Await
  5.  Modularity
    1. Why is Modularity Important?
    2. CommonJS
    3. RequireJS
    4. ES6 Modules
  6. The Document Object Model
    1. What is the DOM?
    2. Understanding Nodes
    3. EventTarget
    4. DOM Events
    5. Manipulating HTML with the DOM
    6. Manipulating HTML with JQuery
    7. Manipulating HTML with React
  7. Using JSX
    1. What is JSX?
    2. Children in JSX
    3. Using Literal JavaScript in JSX
    4. Using React with JSX
    5. Conditional Rendering with Element Variables
    6. Conditional Rendering with the && Logical Operator
    7. Conditional Rendering with the Conditional Operator
    8. React.Fragment
  8. React Components
    1. What are components?
    2. React Development Process
    3. Creating a Component Hierarchy
    4. Single Responsibility
    5. Pure Functions
    6. super()
    7. React.PureComponent
    8. Function Components
    9. Component Children
    10. Goals of a Static Version
    11. Lab 05: Static Version
  9. Styles in React
    1. Inline Styles
    2. Style Objects
    3. Style Modules
    4. CSS-in-JS
    5. Styled Components
    6. Lab 06: Styling React
  10. React Data Flow
    1. One-way Data Flow
    2. props
    3. Lab 07: Props and Containers
    4. State
    5. What is State?
    6. How State Affects render()
    7. How to Know if it Should Be State
    8. Props vs. State
    9. Setting Initial State
    10. Updating State
    11. setState
    12. useState setter function
    13. What to Put in State
    14. JavaScript Lesson: Shallow Copy
    15. Where Should Your State Live?
    16. Lab 08: Adding State
    17. Events
    18. SyntheticEvent
    19. Event Listener Attributes
    20. The Event Object
    21. Binding Event Handlers
    22. Passing Data to Event Handlers
    23. Important Event Properties
  11.  Forms
    1. What is “Inverse Data Flow”?
    2. Properties of Form components
    3. Form Events
    4. Controlled Components
    5. Uncontrolled Components
    6. Preventing Default Actions
    7. Using refs
    8. Ref Callback
    9. Communicating Parent > Child with Ref
    10. When to Use Refs
    11. Lab 09: Interactions, Events, Callbacks
    12. Component Life-Cycle Events
    13. Life-Cycle Methods
    14. Mount/Unmount
    15. Data Life-Cycle Methods
    16. Component Life Cycle
    17. AJAX and Browser Storage
    18. Fetch vs. Axios
    19. AJAX in class components
    20. AJAX in function components
    21. Fetch vs. Axios
    22. Suspense
    23. Lab 10: Component Life-Cycle and AJAX
  12.  Hooks
    1. What are Hooks?
    2. Built-in Hooks
    3. useState
    4. useEffect
    5. Rules of Hooks
    6. useContext
    7. useReducer
    8. useCallback
    9. useMemo
    10. useRef
    11. useImperativeHandle
    12. useLayoutEffect
    13. useDebugValue
    14. Custom Hooks
    15. Why Use Custom Hooks
    16. Making Custom Hooks
    17. Lab 11: Converting a Class Component to a Function Component
    18. PropType
    19. Using PropTypes
    20. Lab 12: PropTypes and Default Props
  13. React Patterns and Best Practices
    1. Composition
    2. Container Components
    3. Presentational Components
    4. Higher Order Functions
    5. Higher Order Components
    6. Render Props
    7. Reusable Components
    8. Communication Between Components
  14. Test-Driven Development
    1. Goal of TDD
    2. The TDD Cycle
    3. TDD Steps
    4. Assertions
    5. Assertion Libraries
    6. Jest
    7. Jest Overview
    8. Write test suites
    9. Create specs
    10. Use matchers
    11. How Jest Works
    12. Mocking
    13. Manual Mock
    14. Automocking
    15. Snapshot Testing
    16. Shallow Rendering
    17. Lab 13: Testing with Jest and Enzyme
  15. Flux and Redux
    1. Flux Flow
    2. Redux
    3. Stores & Immutable State Tree
    4. Redux Actions
    5. Reducers
    6. Reducer Composition
    7. Reducer Composition Example
    8. Higher Order Reducer
    9. Redux Store
    10. Redux Store Design
    11. Benefits of Normalizing Store
    12. Redux Pros and Cons
    13. Lab 14: Implementing Redux
    14. What is Redux Middleware?
    15. React AJAX Best Practices
    16. Redux Middleware
    17. Using React with Other Libraries
    18. Redux Thunk
    19. Redux Saga
    20. Lab 15: Redux Thunk
    21. Lab 16: Persisting Data in localStorage with Redux
    22. Lab 17: Refactoring
  16.  Routing
    1. React Router
    2. Using React Router
    3. Router Rendering Example
    4. Route Matching
    5. Lab 18: React Router
  17. Deploying React
    1. Development vs. Production
    2. Optimization Techniques
    3. Building Your Project
    4. Deploying React
    5. Render Caching
    6. Lab 21: Deploy to Github Pages
  18. Advanced Topics
    1. Error Boundaries
    2. Implementing Error Boundaries
    3. Context API
    4. Relay and GraphQL
    5. Micro Frontends
    6. Shared State in React Micro Frontends
    7. Lab 20: Converting an App to a Micro Frontend
    8. Bonus Lab: Implement Shared State
  19. Microcourse: JavaScript Development Ecosystem and Tools
    1. Code Editors and IDEs
    2. Lab: Visual Studio Code
    3. Node.js
    4. Git
    5. Lab – Version Control With Git
    6. Reproducible Builds
    7. Configure and use npm
    8. Lab – Initialize npm
    9. node_modules
    10. Lab – Using npm as a Build Tool
    11. Static Code Analysis
    12. Configure ESLint
    13. Lab 7 – Automate Linting
    14. Building and Refactoring
    15. webpack
    16. Lab: Deploying with Webpack
Professional ReactJS Development

Related products