React with Hooks and the Redux ToolKit Training

Leveraging JSX for UI design

• Coding custom component classes
• Composing a JSX component hierarchy
• Extending the hierarchy with the Container/Presentational design pattern
• Understanding the differences between JSX and HTML

Parameterizing 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

Managing Complex UIs

• Centralizing logic at the container level by passing functions as props
• Integrating stateless functional components
• Improving performance with useCallback
• Dynamically building the UI at runtime

Manipulating component state

• Managing State with UseState
• Best practices for integrating components with TypeScript and props
• Managing activities with useEffect
• Sharing global data with useContext

Routing between components

• Exploiting the react-router for semantic URLs
• Mapping URL paths and parameters to components
• Creating routes with multiple parameters

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

Ensuring quality with automated testing

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

Global State and Redux

• Architecting loosely-coupled applications for extensibility
• Managing state centrally

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: Mbox, alt, Relay, Flux, and Reflux

• Making Ajax calls with isomorphic-fetch
• Mapping CRUD access to React components
• Adding Web service updates to the global store
• Reviewing alternatives

• Extending your components with Higher-Order Components
• Accessing HTML with useRef
• Externalizing configuration with appsetting files
• Creating a deployment package
• Deploying your application to IIS

Introducing React Native

• Building native apps with TypeScript
• Integrating core, community, and custom components
• The toolkit: React Native, TypeScript, and Expo

Creating UIs in Reactive Native

• Fundamental building blocks: View, Stylesheet, Text, Pressable
• More advanced components: Flatlist, Picker, Switch

Accepting Input

• Integrating TextInput with change and value events
• Simplifying the input process

Navigation in React Native

• Navigation options
• Navigating the application Stack
• Defining routes and passing parameters

Deploying

• Options for platform-specific functionality
• Reviewing the deployment paths