React fundamentals (4 days)
React is a framework used to build responsive, reactive and engaging user interfaces. In this course we introduce the framework and cover all the main aspects of building web based interfaces that interact with a back-end API. Through practical examples and exercises, developers will become confident with React and how to use it effectively.
Objectives
- Understand the principles of Single Page Applications (SPAs)
- Functional Programming in practice
- Components
- REST
- Forms
- Routing
- Testing
- Hooks
- Redux
Prerequisites
- Familiarity with HTML, CSS and JavaScript programming
Contents
What is ReactJS?
- Single Page Applications
- Node and node_modules
- Transpiling
Modern Javascript
- Arrow Functions
- The Spread Operator
- Destructuring
- Imports and exports
Elements and JSX
- The Virtual DOM
- Basics of JSX
Introducing Components
- What are components?
- Creating components
- Using components
- Component properties
- Component styling
Component Events and State
- HTML events within components
- Why state is needed
- The useState hook
Sharing data between components
- Passing stateful data to children
- Changing part of a stateful variable
- Changing a parent's stateful data
Loops and conditional rendering
- Working with arrays in JSX
- Conditional Rendering
Debugging
- The React Developer Tools plugin
- Debugging basics
Getting ready for REST
- HTTP verbs and status codes
- REST principles
- REST api standards
Making REST calls
- The fetch function
- Working with promises
- Axios
- Error handling
Forms
- Why we need state with forms
- Creating forms
- Form validation
Reducer functions
- The useReducer hook
- Reducer functions
- Reducer functions and state
Building React applications
- Building the application
- Using Envrionment variables
Routing
- The need for routing
- Internal links
- 404 pages
- URL parameters
- Query strings
Testing
- Testing libraries in React
- Creating test functions
- Rendering components
- Reading the screen
- Finding elements
- Assertions
- User actions and changing state
- Mocks
Global state
- The useContext hook
- Providing the context
Introduction to Redux
- What is Redux?
- Redux classic
- Action creators
- Thunks
- Redux toolkit
React Hooks and performance optimization
- The rules of hooks
- How useState works
- useRef
- memo, useCallback and useMemo
- useTransition
- creating custom hooks
