Building Web Applications with React 18

Leveraging JSX for UI design

• Creating a page with components
• Coding custom components
• Understanding the differences between JSX and HTML

Parameterising components

• Passing data from owner components to children
• Leveraging the children props to pass content dynamically
• Leveraging TypeScript to provide default values and data types
• Integrating stateless functional components

Manipulating component state

• Managing State with UseState
• Best practices for integrating components with TypeScript and props
• Introducing Hooks
• Managing activities with useEffect

Managing Complex UIs

• Composing a JSX component hierarchy with the Container/Presentational design pattern
• Centralising logic at the container level by passing functions as props
• Improving performance with useCallback
• Dynamically building the UI at runtime

Ensuring quality with automated testing

• Unit testing with Jest
• End-to-End testing with Enzyme
• Improving testing syntax with Testing Library

Exploiting Storybook

• Speeding development by prototyping in Storybook
• Generating documentation from components
• Ensuring accessibility with automated analysis
• Logging component interactions

Manipulating form input components

• Working with interactive properties
• Capturing form component updates with onChange
• Exploiting controlled components with one-way dataflow

Implementing data and event binding

• Applying the onChange / useState() convention
• Reducing onChange clutter for cleaner code
• Integrating functions with form events
• Improving performance with useTransition

Implementing navigation

• Exploiting the react-router for semantic URLs
• Mapping URL paths to components
• Enabling navigation with code and the Link component

Passing parameters in URLs

• Creating routes with multiple parameters
• Handling ambiguous routes
• Extracting parameters with useParams
• Sharing global data with useContext

Global State and Redux

• Making Ajax calls with Axios
• Mapping CRUD access to React components

Exploiting Axios

• Simplifying code with custom Axios objects
• Integrating asynchronous access
• Looking at Axios advanced features
• Reviewing alternatives

Global State and Redux

• Architecting loosely coupled applications for extensibility
• Managing state centrally with the Redux Toolkit
• Adding Web service updates to the global store

Coding a loosely coupled application

• Creating the central store
• Understanding React’s one-way data flow at the application level
• Segmenting the store with slicers

Managing application-wide data

• Creating the reducers and slices to manage application-wide state
• Exploiting useSelector and useDispatch to access the global store
• Reviewing alternatives

• Extending your components with Higher-Order Components
• Accessing HTML with useRef
• Externalising configuration with appsetting files
• Deploying your application to IIS