If you want to grow fast as a developer, the best approach to take is by building projects. Thanks to frontend mentor, they have provided a platform for experienced and newbie developers to build projects that will grow and expand their skillsets and knowledge. In this article, I am sharing what I learnt while building the Easybank landing page on Frontend Mentor which helped me improve my knowledge about React and TypeScript.
To be honest, when I Initially started this project, I taught I won't learn anything in the end because building a landing page is not a hard thing for me to do with my current skill level, but it was not until I had a mindset shift that I shouldn't just be building projects for the sake of building them, but rather aim to learn something from what I am building in other to see results. Taking this approach to build projects has profound benefit and it makes the whole process more fun and encouraging.
Here are the lessons I learnt building this landing page
1. Estimating the time of a project
One thing I learnt when it comes to estimating the duration of a project is that life happens and things will definitely not go as planned, so it's important you learn how to adapt and still show up, no matter what. Anytime a deadline you fixed didn't work, instead of just giving up, try to understand why things didn't go as planned and work towards avoiding that mistake again in the future, that's how to improve.
2. Importing images in a React application
Since I learnt React, I have always struggled with understanding how images are used in a React application, it just seemed like a big deal to me, but while building this project and making some research, I learnt 2 things
- When an image doesn't change frequently e.g a logo, it's best to put that image in the public folder
- When an image is likely to change from time to time e.g an image for a blog article, it makes sense to put that image in the src folder, so it compiles with the code at build time.
This 2 lessons helped me understand where to put the images that came with this project, and how to import them in my code. I put my logo in the public folder and put the images for the blog articles in the src folder because the image for a blog article can always change (let me know if you have a different idea about this).
It was until I made research on the problem, thanks to ChatGPT that I was able to come up with a solution. A TypeScript declaration file tells TypeScript how to handle certain types of files when it sees them, so I created 2 TypeScript declaration files to tell TypeScript how to handle my images and css files
Note — If you use vite to create a React project, it comes with a TypeScript declaration file by default called vite-env.d.ts which has all the declaration needed for most file types, but I deleted mine by mistake 😂😂 because I didn't think it was necessary, but good thing I did because I wouldn't have learnt this lesson otherwise.
Conclusion
Learning these concepts have helped me improve my knowledge about React and how to use TypeScript in a React application which has given me confidence to build more complex web applications. Let me know if you found any of these lessons helpful, and what you have learnt recently from React that you didn't know before. If you would like to check the code for this project, here is the .
You can find out more about me on . The next project I am working on from frontend mentor is the Multistep-form, really looking forward to it!
SOCIAL SHARE CARD GENERATOR