Main points addressed in the project:
- React Components;
- React properties;
- Conditional using ternary operator;
- Import/ Export;
- Destructuring;
- Styled Components;
- Add video to background in React;
- Aos AOS libray for animation;
- State react hook;
- Effects with the
transformcss property
The end result of this challenge should be something around:
- ReactJS - used to build the interfaces;
- JS - used to build all application logic;
- Styled Components - used for styling;
- AOS library - use for scroll animation;
- Git - responsible for performing code versioning;
- Vite - used to create a React environment;
- NPM - Used to install dependencies;
I recently took on a project that was originally built using HTML, CSS, and Vanilla JS. However, in order to hone my skills with ReactJS, I decided to rebuild the project using this powerful and popular framework.
As part of my efforts to become proficient in React, I made use of a variety of important techniques and features, including React components and properties. I also utilized conditional rendering, leveraging the ternary operator to create dynamic and responsive interfaces.
To manage dependencies and keep my code modular, I incorporated import/export functionality in my React code. Additionally, I used destructuring to simplify my code and make it more readable, making it easier to maintain over time.
To make the project visually appealing and engaging, I leveraged the power of Styled Components, a robust and flexible styling library for React. I also used the AOS library to add animations to the project, which created a more polished and interactive user experience.
One particularly noteworthy feature of the project is the use of video in the background, which I was able to achieve in React with relative ease. To create additional visual interest, I also used the transform CSS property, creating dynamic and eye-catching effects that are sure to impress.
In order to manage state within the project, I made use of the useState hook, a fundamental tool for working with React's state management system. This allowed me to create responsive and interactive interfaces that respond in real-time to user input and other events.
Overall, the experience of rebuilding this project in React was both challenging and rewarding. I learned a great deal about this powerful and flexible framework, and was able to create a project that is both functional and visually compelling. I look forward to continuing to develop my skills in React and to using this exciting technology to create innovative and engaging user experiences.
This is a project that, originally, was built in HTML, CSS, and Vanilla JS and I decided to build it in ReactJS to practice and test my skills with this framework. You can find the original project in the following:
📅 Início: 28.04.2023
📅 Conclusão: 30.04.2023
🕛 Status: Finished - fully responsive ✔
🌎 Result Preview: Link
