Highlights
- Understand the fundamentals and architecture of React and its component lifecycle model
- Provide amazing user experience by leveraging the power of JavaScript (or TypeScript)
- Build components and applications with real-world applicability
- Learn to build components using the various ways data is used in React including props, state, context and Redux, plus gain an understanding of the best use case application for the different methods
- Understand the differences between older Class based React and the newer Hooks based React
- Build hooks based componets
- Learn React and Redux to build large data-driven applications
- Build powerful, fast, user-friendly and reactive web applications
Course Details
React Fundamentals
- React introduction & architecture
- Getting ready to write code – getting the environment set up
- Basic terminology
First look at React
- Building a functional component
- Rendering a component
- JSX or createElement
- Babel
Building and displaying a basic Component
- Functional components
- Class based components
Passing data to a component via immutable props
- Defining Components
- Passing Data to components
Dynamically generated React components
- Using array data
- The key property & performance
Style, React and CSS
- Using external and internal style in components
- Embedding style attributes for in-line style
Embedding HTML in data
- Reacts answer to innerHTML
More about properties
- Passing props around your components
- Default properties
- propTypes
Using props.children with components
- Using props.children to create more generic components
- Using props.children to create a factory style component
Using context with nested components
- Global, Provider, consumer in hooks and in class based components
JSX and the JIT transformer
- JSX and the pre-processor transformer (compile/build)
Modularising the code using import/export
Stateful components
- Building a stateful component
- Setting and using State with hooks and for class based components
- Components and pure component
- Presentational, container, higher order
Events
- Handling events with React components
- Using callbacks
Forms
- User interaction with Forms
Refs
- Referencing components or DOM elements
More component lifecycle & specification methods
- React component lifecycle
Error boundaries
- React Error Boundaries
More advanced Hooks
- Functional components instead of Classes
- Basic hooks and less common hooks
- useReducer and useEffect
- Creating your own hooks
React with Redux
- Flux – the original pattern
- Redux Overview
- Redux Actions
- Redux Reducers
- Redux Store
- Redux Data flow
- Redux with hooks
Who should attend
This course is designed for software developers who are interested in learning how to build scalable web applications by designing and building reusable components.
You should have good coding skills, and some skill with JavaScript. You will also need to understand HTML and CSS.
Feedback
4.8 out of 5 average
" I found the material on Redux extremely useful. There was a definite moment of clarity. The instructor was engaging + knowledgeable on topic." LB, Software Engineer, React, April 2021
“JBI did a great job of customizing their syllabus to suit our business needs and also bringing our team up to speed on the current best practices. Our teams varied widely in terms of experience and the Instructor handled this particularly well - very impressive”
Brian F, Team Lead, RBS, Data Analysis Course, 20 April 2022