React project tutorial | Ego | Inspired by Addy Osmani
Code Repository:
https://github.com/AhsanAyaz/ego-issu...
This video is inspired by Addy Osmani's following LinkedIn Post:
/ addyosmani_motivation-productivity-growth-...
The video covers creating a grid of different elements in a fresh React app, created with Vite. The elements are rendered using the useState() hook in React and the business logic of the app for whenever the ego is selected, the rest of the elements should be unchecked is handled using a useEffect. In this video, not only we see how to work with React in terms of problem solving, but also how to create a really good user experience including CSS animations using animista, and making the app mobile responsive.
In the video you'll also learn how to deploy a React app to GitHub Pages using GitHub Actions!
Timeline:
0:00:00 - Introduction
0:00:08 - Creating the React App
0:01:22 - Creating the items array
0:06:51 - Conditionally render checkmark
0:07:48 - Toggle items functionality
0:11:49 - Unselecting checkboxes when ego is selected
0:13:40 - Better UX with CSS Animations and Animista
0:16:00 - Deploying React app to GitHub Pages
0:19:20 - Adding a heading
0:20:46 - SEO and social preview
0:22:26 - Fix mobile responsiveness
Hashtags:
#react #reactproject #reactprojects #reacttutorial #reactapp #reactgithub #reactdeployment #reactgithubpages
Watch video React project tutorial | Ego | Inspired by Addy Osmani online without registration, duration hours minute second in high quality. This video was added by user Code with Ahsan 11 April 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,014 once and liked it 33 people.