Creating My First React Application on Codepen
Learning React and achieving short-term targets.
To be honest, I had decided to learn React, sometime way back in October 2019. I thought I had a decent idea of HTML/CSS and wanted to take my skills & knowledge a notch higher by learning React. I found this free course on Udemy on the Fundamentals of React and decided to give it a good shot.
However, I ran into trouble with the installation process and setting up the local development environment. Even after multiple trials, an error message kept popping up informing me that a dependency is missing. Soon, I left it midway. I am not proud of it, but it happened with the natural course of college, exams and other more pressing priorities at the time.
Once the lockdown started, and I had a lot more free time in my hands, I wanted to try learning React, but the inertia after multiple failures to even set up the environment kept deterring me.
Finally, sometime in May, I was talking to a close friend, about my general lack of productivity and how I wanted to do something more. He suggested I build something — it doesn’t have to be complex, a simple to-do list application would do. And he convinced me that in the process of building it, I would learn a lot more than I would have ever intended to. So he asked me to try out React for the front end of the application and then move on to Node.js for developing the back-end. (Spoiler alert — that’s not exactly the path I followed.)
Anyway, with a renewed sense of purpose, I set out to learn React again. I started looking at alternate options other than the Udemy course. One of the resources I found really useful is linked here. But again, from my track record, I knew this would be left hanging in the air if I don’t break down the goals and commit myself to it.
I considered taking the FCC tutorial, which was when I stumbled across a course on Scrimba. And, I found this course perfectly suited for me. The whole course is an interactive tutorial — where you can code on the platform while going through a lesson. This enabled me to have hands-on experience without letting the initial set-up overwhelm me again. After most of the lessons, there’s also a follow-up practice session, where you code on your own, and then continue with the video on the right way to do it in case you are stuck. I felt like I had found a gold mine, a course tailor-made for me. And guess what — one of their projects to build through the course was a To-Do application.
I followed the course thoroughly. I knew a bit of Javascript from before, by following a couple of tutorials on FCC. But, when I did feel like I needed to catch up on Javascript, I was able to do so from other references on Scrimba itself. And to practise on my Javascript a bit more, I did a couple of projects that FCC had mentioned too.
Once, I felt a bit more confident about Javascript, I continued with the Scrimba course. We started from the very basics, from the render method to functional components, moving to child components, styling using CSS classes. Then, I learnt of passing properties to modify the way a component acts. At this point, I created this, in one of the practice set-ups.
However, this really helped me realise the power of React over HTML/CSS, as I didn’t have to hard-code each of these jokes and the use of reusable components became pretty clear.
Continued with the course, used map functions, learned about Class-based components, converting functional components into class-based components, using state, the setState() method and noted down millions of points along the way. Also came across event-handlers, lifecycle methods and conditional rendering.
At this point, I decided to go ahead and do one of the projects mentioned in FCC Front-end library certification — Random Quote Generator. The idea behind the project is to click on a button to get random quotes. I tried it out on Codepen as mentioned in the challenge. And after a couple of hours of trying, failing, referring my notes, referring Google, retrying, failing again, going back to watch the video on event-handler, retrying multiple times, I was finally able to complete the project. It was a pretty simple project- I entered manual data with just 5 quotes or so, didn’t exactly meet all the criteria FCC had specified — like including the author’s name with the quote. But I accomplished what I had set out to do— create a simple working React application from scratch on Codepen.
I have a long way to go. To continue with the course, setting up my local development environment and creating an application, and to build more projects and learn more as I go on. But I managed to achieve the momentum, the first few wins I was hoping for since last October. So, I wanted to document my journey so far. If there’s someone who’s stuck like I was, I hope the resources I mentioned help you out. I hope this article gives you a bit of another perspective too.
