A demo to learn the basics of React
- Fork this repository
- Using GitHub Desktop (or any other Git tool), pull your forked repository locally
- Open the local repository in the IDE of your choice, I recommend Visual Studio Code
- Make sure you have Prettier installed on your IDE
- Install Node.js (which should install npm as well) and insure the
npm
command works in the terminal - Run
npm install
, thennpm start
to run in development in your IDE - Follow the prompt given below. This exercise is quite autodidactic.
You are given a barebones React project, a mockup and a technical sheet.
Your job is to:
- Recreate the mockup as authentically as possible (should be identical)
- Try to use flexbox in your CSS as much as possible
- Avoid absolute positioning or use of margin for positioning
- Use components! Create at least a component for the buttons
- Implement the stopwatch functionality (Advanced)
Technical Sheet (open in new tab):
Figma: https://www.figma.com/file/TsbW82b20aQxsK7fjIwXCG/React-Demo
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:5173 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Builds the app for production to the dist
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
You can learn more in the Vite documentation.
To learn React, check out the React documentation.