May 8th, 2021
At the start of the year, I decided that it was time to finally learn a JavaScript framework, more specifically, React. For me, the popularity of React and increasing job opportunities for myself were the obvious reasons to start learning it. However, what sparked my curiosity the most was embracing a component-based approach to building front-end applications as fast as possible in turn saving time and hours of frustration that may occur when developing complex apps with only vanilla JavaScript.
In this post, I will share with you how I started my journey learning React, some of the technologies I have discovered along the way and the applications I have built that have helped me solidify what I have learned thus far.
The first approach I usually take when learning any web technology is to read the official documentation. They are a great source of information especially when you want to understand how something works and how you can implement it into a project.
The React documentation covers everything from initializing a new project, the main concepts, advanced concepts, introduction to Hooks, testing, and many more. The React docs provided me with enough information to understand the purpose of the framework (building frontend UI’s) and how to get started.
After reading the documentation and doing further background research, I discovered that ES6 is commonly used to create React applications. The main benefit of ES6 is that it makes your JavaScript code more modern and readable. Before diving head-first into the world of React, I decided that it would be best for me to brush up on the main features and syntax that ES6 provides.
The main ES6 features I covered were;
Let & Const
Arrow functions
Destructuring
Import and export
Classes
The For/Of Loop
Promises
Template strings
I believe I did well in setting myself up to now begin learning React. Reading the React docs and brushing up on ES6 helped me with my confidence. However, I still needed something more comprehensive and structured. Udemy has always been a good friend to me when it came to learning new web technologies and it was here I discovered the React Complete Guide course by Maximilian Schwarzmüller.
This course covered everything starting from why you should use React, the main features & concepts, building a React application, state management, hooks, testing, etc. I was impressed with how detailed, well-structured, and beginner-friendly this course was especially for a beginner like myself.
I made sure I fully understood the fundamentals of React, such as initiating a new react app from the command line, components, JSX, props, state, hooks, testing, and the various ways in which you can style a React app. The most important thing I took away from the course was the concept of creating React apps with a component-based approach. Before you sit down and create an app, it is best to plan out how the app will be laid out by splitting the app into various components. This got me excited as I always struggled to build complex apps with just vanilla JavaScript alone as I never really created a blueprint on how I would go about creating an application. It was only when I started learning React that I adopted a component-based approach where I would create the various components of the app first before developing the functionality of the application.
This is probably the best course I’ve purchased. To this day, I still use this course as a reference point whenever I've found myself stuck whilst working on a React project or whenever I need to learn a new concept.
A goal I set before learning React was to build a new portfolio site. I found myself caught in a dilemma on what to use to build a new portfolio. It was whilst I was learning React when I discovered GatsbyJS. This is a React-based framework and a static site generator for building modern websites and applications.
Gatsby is perfect in ensuring your site has good SEO, performance, and accessibility. After reading the docs I realised that already knowing the fundamentals of React was enough for me to get started in using Gatsby to build my portfolio site. I was already familiar with creating components using JSX and then importing & exporting them to the main app component. I also decided to create a blog section for the site so I could share posts like the one you are reading now and share my knowledge in order to help others.
I picked Contentful for the CMS, and whilst I was building the blog section I discovered GraphQL. This is a query language for APIs and I used it to query the data from Contentful in order to access the contents from the blog posts and display it onto the page. I also used the Gatsby Image API which is known for image optimization to display the image for each of my portfolio projects. To style the site I used Sass along with CSS modules to ensure the styling was scoped locally to a specific component rather than overriding the styling of another component.
I absolutely enjoyed building my portfolio site with Gatsby and knowing the fundamentals of React helped me create it to the best of my ability.
After building my portfolio site, I continued to use the React course that I had purchased from Udemy to further develop my knowledge. In order to solidify what I have learned, I decided to build several self-initiated projects.
With the help of some online tutorials, I created various apps. I developed an image uploader app that uses Firebase to store each uploaded image onto a database and I used Framer Motion to add subtle animation effects to the app.
I also built an app where users can search for different countries and view a page that contained the information of the searched country using React Router. I used a package called Axios to make HTTP requests to a third-party API to get and display data.
I took a components-first approach when building a game app and an expense tracker app. This is where I built the components of the app first before adding in the different functionalities. I also built a job-search app that uses the GitHub API to show and filter tech-related jobs from various locations in the world.
I believe the best way to learn is to build things. The more projects I build the better I observe and understand what I’ve learned. My advice to anyone learning a framework is to just build projects rather than spending endless amounts of hours watching tutorials.
To conclude, I am super happy with the progression I have made thus far. To go from knowing nothing about React to then using it to build my portfolio site along with building some cool projects has made me realise how much more I can learn. React is now my chosen JavaScript framework and I will therefore be continuing on this journey and developing my knowledge so I can create even more complex applications.