Advanced React Challenge - Refactor a header to fit the existing codebase and test it with Cypress
In a previous video ( • React Coding Challenge - Build a head... ) I worked on a React coding challenge. I built a pixel-perfect header based on Figma designs. The implementation was rather simple though. In this video I refactor the header, extract components, use the existing styled-components theme, and add a Cypress test. I wouldn’t expect this of a Junior candidate but it might be interesting to watch.
All the challenges are part of the React Job Simulator. Check it out at https://profy.dev
00:00 - First Marker
00:45 - Extract header component to UI feature
03:16 - Create new feature branch
04:41 - Render header component on the page
06:12 - Refactoring from px to rem
06:43 - Using the styled-components theme
08:41 - Using custom theme utility functions
09:25 - The styleguide in Figma
12:54 - Creating the Cypress tests
20:36 - Commiting the changes
21:13 - Create a PR and request review
Watch video Advanced React Challenge - Refactor a header to fit the existing codebase and test it with Cypress online without registration, duration hours minute second in high quality. This video was added by user Profy dev 07 September 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 681 once and liked it 13 people.