WEB-203
React: Practical Front End Application Development
Course Overview
React JS is a powerful front-end Javascript framework, but with great power comes great responsibility! Unlike Angular JS, React JS is not particularly prescriptive in terms of how applications should be structured.
This course presents a battle-tested, practical approach to building front end applications with React JS that are extensible, maintainable, and readily testable.
Through progressive elaboration of worked code examples, course participants will create a full front-end application using React JS, integrated with a fully functioning REST API. Note: a runnable server-side API application is provided as part of course materials; development of such an API is not in scope for this particular course.
Adopting a Component-based development approach, we next demonstrate how to structure user interface elements according to the Atomic Design methodology. Participants will learn how to iterate UI designs within a cross-functional team using Storybook, for ease of visual testing (ie. designer/developer workflow).
Ultimately, these techniques are combined in detailed, practical lessons in correct usage of React JS to produce a working front-end application, integrated with a typical REST API.
Learning Outcomes
- Create a full front-end application using React JS, integrated with a fully functioning REST API
Suitable For
Experienced developers who want to learn how to build readily testable front-end applications with React JS
Course Outline
React
- Components
- JSX
- Component Props
- Conditional Rendering
- Rendering Lists
- Pure Components
- Events
- States
- Rendering
- State Management
- Sharing State Between Components
- Consolidating State Logic
- Context API
- Hooks
Component-based UI Development
- Introduction to Design Systems
- Atomic Design concepts
- Implementing Atomic Design using Storybook
Putting it All Together
- Mini-capstone Project