Live link: https://react-tab-challenge.netlify.com/
For this code challenge, I will create a section of a landing page that displays the offerings from . It will include 3 tabbed sections that automatically switches tabs until the user navigates to a tab on their own. On mobile, it simply provides 3 sections with horizontal scrolling.
- Matches Design
- Responsive
- Automatically swaps tabs
- Progress bar shows time until swap
- Pauses when the links are not in the viewport
- Clicking a tab link swaps to the tab
- This also stops the auto swapping
- Mobile shows all 3 sections with horizontal scrolling
This project was bootstrapped with Create React App.
You can find the most recent version of this guide here.
-
Change directory into the directory of the project and install the node modules with
npm ioryarn -
To run the project locally with react-scritps type:
npm run startoryarn startThe dev webpage will open automatically or otherwise can be found at
localhost:3000 -
To serve the built folder type:
npm i -g serve(if not installed)serve -s buildYou will then be able to visit it on
localhost:5000
I always try to visualize where the components will be in the Design, and make sure they make sense for the app and logic.
I always have a starter template which I created and updated every time I found some new and better ways to do things in code.
It contains improvements, performance tweaks and several components that I might need.
In this case I used some of those improvements (ie. .env file for styles alias) that I found.
Once that's in place, I make sure I only keep what's really needed and try to scrap the rest (console logs, useless comments and TODOs that I have completed).
It won't be compiled, but it would pollute the repository.
From here on, you can see the commits in the repo I will share via e-mail (or pull request).
Alex