Course outline
This comprehensive 40 hours course equips you with the knowledge and skills to build dynamic and interactive user interfaces using ReactJS. We'll cover the fundamentals of React, explore advanced concepts, and integrate essential tools to create robust web applications.
By the end of this course, you'll be able to: • Build reusable and maintainable React components • Manage component state effectively • Implement efficient data flow patterns •Style your applications with Styled Components • Integrate routing for navigation purposes • Write unit tests to ensure code quality
Upcoming meetings
There are no upcoming meetings for this course. Contact us to schedule this course, which will be customized specifically for your organization.
info@hackerupro.comModules
- React overview
- JSX, React DOM & vite
- Project setup with pnpm create vite
- Structure
- The render method
- Function components
- Props
- Conditional rendering
- Hands on exercise
- Motivation
- Inline styling vs global styles vs css-in-js
- Sass/Less vs Styled Components
- Basic Syntax and examples
- Styling props
- Extending styles
- Hands on exercises
- Managing component state in Function components
- Handling events
- Rendering tree Virtual dom diff algorithm behaviour
- Hands on exercise
- Overview
- Mounting and unmounting components
- Updating props
- Other phases usage
- Hands on exercise porting an external lib using lifecycle methods
- Parent / child relationship
- Unidirectional data flow
- Updating nested components
- Rendering Collections and lists
- Hands on exercises - filtering lists and master details
- Overview
- Routing Basics
- Router, Route & Link
- Histories
- Redirects
- Route parameters
- Query String Parameters
- TDD intro
- Unit testing tools overview – test runners, assertion libraries & utilities
- Jest features
- Installation & setup
- Matchers API
- Async tests
- Mocking
- Code coverage
Prerequisites
- 01 Solid understanding of HTML, CSS, and JavaScript (including ES6+)
- 02 Basic familiarity with the command line