Course duration
- 5 days
Course Benefits
Course Outline
- Setup
- Verifying Node.js and either NPM or yarn
- Verifying class libraries
- Verifying class files
- Verifying TypeScript setup
- IDE (WebStorm or Visual Studio Code preferred)
- Introduction to React
- What problem(s) does React solve?
- Traditional, pre-JS web applications
- Late-model, MV* and JS web applications
- React's solutions
- Single-page apps
- View libraries
- Helper libraries
- React and TypeScript development environment
- Simplicity: create-react-app with TypeScript built in
- Hello world
- Your first React component
- Using React within a page
- Making some basic changes
- React and JSX and TypeScript
- What problem(s) does React solve?
- Components
- Two types of components
- Functional components
- Functional component types
- Class-based components
- Class component types
- Why use one or the other?
- Important distinctions before version 16.8
- Class-based components for state and lifecycle
- Functional components for simplicity and purity
- Important distinctions before version 16.8
- Currently, prefer functional components with hooks
- Functional components
- Testing basic components
- Testing libraries: Enzyme vs Testing Library (sic)
- Jest
- Testing with Testing Library
- Testing with TypeScript
- Props and state
- Properties and types
- Passing in properties
- Limitations of properties
- State and types
- Using state and the useState() hook
- When to use state, when to use props
- Testing state and prop changes
- Event handling
- React event handling
- Event types
- Synthetic events
- React vs DOM event handling
- Testing events
- Children
- Component types
- Components within components
- Known children and unknown children
- Testing child components
- Parent-child component communication
- Communication from parent to child
- Communication from child to parent
- Container vs presentational components
- Using types to validate communication
- Two types of components
- React Component Lifecycle
- Lifecycle overview
- Startup and mounting
- Rendering
- Updating
- Unmounting
- Using useEffect() for lifecycle methods
- Run once
- Run every render
- Run on specific changes / updates
- Lifecycle methods in tests
- Error handling and error boundaries
- Lifecycle overview
- Intermediate component usage
- Asynchronous dat
- When should asynchronous fetching be done?
- What challenges does async offer?
- Working with Promises and generic types
- Asynchronous best practices
- Testing against async fetches
- Lists of data
- Iterating over a list
- The key property
- Sorting data
- Testing component interactions
- Asynchronous dat
- Forms
- Controlled vs uncontrolled components
- Form field types
- What does React know about your form field?
- Does React control your form field?
- When does React find out about changes to your form field?
- Form field types
- Controlling a text field
- ther form fields
- Getting data out of a form
- Working with form data in tests
- Controlled vs uncontrolled components
- Introduction to Redux
- What problems does Redux solve?
- How does it solve them?
- Basic Redux pattern
- Store
- Reducers
- Actions
- Redux types
- Modern Redux with the Redux Toolkit
- What is the Redux toolkit
- What does it provide?
- The ducks pattern
- Testing Redux
- React and Redux
- Plugging into React
- State as props
- Events as dispatch
- Introducing higher-order components
- Types with React-Redux
- Too many variations
- Using Generics
- Solving TypeScript issues with React-Redux
- Turning our standalone Redux program into a component
- Middleware
- Provided by the toolkit
- ther middleware
- Building a real-world React-Redux component
- Testing React-Redux components
- Higher-order components in detail
- What do higher-order components do?
- Why would I use a higher-order component?
- Plugging into React
- Asynchronous Redux
- The difficulties of asynchronous Redux
- Asynchronous middleware
- Depending on your needs, we can use either thunks, sagas, or survey both techniques for asynchronous interactions
- Types as appropriate
- Dispatching async actions
- Typing async results
- Catching results
- Handling errors
- Testing asynchronous Redux
- Setup
- Verifying Node.js and either NPM or yarn
- Verifying class libraries
- Verifying class files
- Verifying TypeScript setup
- IDE (WebStorm or Visual Studio Code preferred)
- Context
- What is the Context API?
- How to use the Context API
- Hooks-based Context: the useContext() hook
- Class-based Context
- Testing while using Context
- Advanced Redux
- Using reselect to minimize re-rendering
- Reselect, types, and function types
- Normalizing state
- Using types to help normalize state
- Higher-order reducers
- Helper libraries
- Using reselect to minimize re-rendering
- Introduction to routing
- What problem is routing trying to solve?
- How does routing solve this problem?
- Tying components to URLs
- Passing parameters via the URL
- Routing software: React Router
- Simple router example
- Routing types
- Testing routing
- More complex routing
- Top-level routing
- Routing at the top of your application
- Allowing other parts of the application to manage routing
- Redirects
- React-router objects and their types
- match
- history
- location
- Routing organizational techniques
- Testing advanced routing
- Top-level routing
- Advanced React
- Understanding and optimizing reconciliation
- Best practices for React reconciliation
- Recognizing common issues
- Making improvements
- Refs
- What's a ref?
- What problem does it solve?
- Ref types
- How can I use refs?
- Hooks: the useRef() hook
- Classes and createRef()
- The challenges of testing refs
- Render props
- Rendering in depth
- Rendering a function instead of a prop
- Using the render prop pattern
- Render props, function signatures, and types
- Testing render props
- Understanding and optimizing reconciliation
Class Materials
Each student will receive a comprehensive set of materials, including course notes and all the class examples.
Experience in the following is required for this JavaScript class:
- 1-2 years of JavaScript experience.
- Advanced understanding of JavaScript, including prototypes and functions as first class citizens.
Instructor-led courses are offered via a live Web connection, at client sites throughout Europe, and at our Geneva Training Center.