Overview
React is a second generation web framework, created by Meta to simplify the creation of complex, browser-based UIs (aka. Single Page Applications). It offers a declarative, component-based approach that enables the rapid creation of SPAs without resorting to the custom attributes and dirty checking used by Angular.
The React component model is excellent when combined with modern ECMAScript. If you want to take React to the next level, and see React at its best, then you can use it with TypeScript and add safe coding practices. We can level set delegates as part of this delivery to use the latest features of TypeScript effectively with React.
As React is solely a UI framework, it needs to be combined with libraries for accessing remote services, routing and state management (such as Redux). We can customise this course to your needs to include the pieces that you want to focus on.
Outline
Introducing React
- How Angular and React evolved from earlier frameworks
- Overview of the React architecture and the Virtual DOM
- The trade-offs between a Virtual DOM and dirty checking
- Using the JSX syntax to create and initialise React Elements
- Comparing coding in React to Angular and using other frameworks
- Setting up a project for React development
Modern TypeScript (Optional)
- TypeScript basics: types, interfaces and type inference
- Union and intersection types for flexible design
- Generics for reusable, type-safe code
- Type guards and narrowing for runtime type safety
- Utility types (Record, Partial, Readonly, Pick, etc)
- Template literal types for string manipulation
- Const type parameters for literal inference
- Using the ‘as const’ assertion for immutable objects
- Mapped and conditional types for advanced transformations
- The satisfies operator for better type checking
Getting Started with React
- Creating basic components that use JSX
- Using properties to pass data to components
- Nesting and managing parent-child relationships
- Transpiling JSX and modern ECMAScript using bundlers
- Choosing a build tool and setting up a development environment
- Understanding the component lifecycle
- Working with the latest JSX transformations
- Designing hierarchies of components for complex UIs
- Interacting with RESTful services
- Modularising your design for unit and integration testing
- Adding Routing to your application
React Hooks
- Functional Components vs (Legacy) Class Components
- Reselects evolution into React Hooks
- Managing state with useState
- Adding side effects with useEffect
- The importance of memoisation to performance
- Leveraging useMemo and useCallback
- Writing custom hooks
- Using built-in hooks (useContext, useReducer, useRef)
React v19 Features
- Enhanced Suspense for data fetching
- Transitions for smother UI updates
- Improved server components integration
- Enhanced form handling with useFormState and useFormStatus
- Asset loading optimisations
- Reading the value of a resource with use
- Compiler improvements for better performance
- Actions API for server interactions
- Streaming rendering optimisations
- New debugging tools and developer experience
Testing React Applications
- Setting up Jest for component testing
- Writing meaningful component tests
- Snapshot testing with Jest
- Using React Testing Library for behaviour-driven tests
- Mocking API calls and external dependencies
- Component integration testing
- Using Vitest as an alternative testing framework
- Performance benefits of Vitest
- Test watching and debugging
- Coverage reporting and analysis
Styling React Applications
- Identifying styling options
- Global styles and avoiding name collisions
- Encapsulating styles using CSS Modules
- Inline styles for dynamic styles
- Using styled-components for dynamic styles
- CSS-in-JS alternatives
- Tailwind CSS integration
Server Components and Server Functions (Optional)
- Understand the React Server Component model
- Differences between Client and Server Components
- Data fetching patterns with Server Components
- Server-only code and client boundaries
- Using Server functions for secure operations
- Integrating with build systems
- Streaming and progressive rendering
- Hydration strategies
- Integration points with Next.js and similar frameworks
GraphQL with React (Optional)
- Introduction to GraphQL v REST
- Setting up client (e.g. Apollo)
- Queries and mutations with hooks
- Handling loading and error states
- Caching strategies
- Optimistic UI updates
- Subscription-based real-time updates
- Authentication and authorisation
- Testing GraphQL interactions
Combining React with Redux (Optional)
- Problems when managing complex state in SPAs
- Using a framework to centralise and manage state
- Creating and using Stores, Actions and Reducers
- Manipulating your data as a sequence of transitions
- Using Redux Toolkit to reduce boilerplate
- Grouping state, actions and reducers into Slices
- Asynchronous actions, thunks and Redux middleware
- Adopting Redux Thunk as your default Redux middleware
- Advantages of Redux Saga for more complex scenarios
- Redux dev tools
Other Advanced Topics (Optional)
- Lazy loading components and code-splitting
- Accessing references to HTML elements
- Internalisation using react-intl
- End-to-End testing with Cypress
- Performance optimisation techniques
- Advanced patterns for state management
- Error boundaries and fallback UIs
Requirements
Delegates must be proficient JavaScript or TypeScript developers. A primer in the languages can be provided to level set all delegates to the latest language features.