Two months into my coding journey and I had built several apps using Flutter and was getting more comfortable with how to build mobile apps. However, I felt there was still a space for modern-day websites to thrive and, in particular, the term PWA caught my attention. It stands for Progressive Web App and essentially turns your website into an app that people can use on their phones. It has its own icon on your phone and works in full screen yet you don’t need to install it like an app — it’s basically an enhanced shortcut, although that’s doing it an injustice. It’s fast, reliable and can even be configured to run when you’re offline. It sounds like the best of both worlds to me. So how do I get started?
Starting over again with React, HTML and CSS
Frustratingly, it meant having to press the reset button and start learning from scratch again. There are many platforms that will help you build a PWA and popular ones include Vue, Angular and React. I decided to go with React as it seemed like the most popular one and is backed by Facebook so it ought to be around for some time and has good community support.
It was a case of one step forward and two steps back it seemed. In order to learn React I needed to go back another step and learn the fundamentals of HTML and CSS. Like many beginners before me I turned to freeCodeCamp.com for their impressive free courses. The courses are well designed and sequenced and I liked how the website made it easy for you to code along in the browser itself with minimal hassle. I started with their Responsive Web Design course (it says 300 hours but I managed to complete it in under two dedicated weeks). This course covered basic HTML and CSS. In the last section of the course, you are to develop five projects using the knowledge you acquired and this was a useful way of applying the learning. The course also recommends using CodePen for these projects, which I hadn’t heard of before, and it’s a free online code editor that is essentially a sandbox to practice your code in without needing to install anything on your computer.
I now know React. Now, how do I even install it?
The freeCodeCamp courses gave me a sound foundation from which to serve my React education. However, I became so dependent on using the online code editors that when it came to coding for myself I wasn’t even sure how to download and install everything. The exercises in freeCodeCamp were somewhat in isolation and the libraries were easy to set up in CodePen so I didn’t have to think about how to get anything set up for myself.
Next, you’ll need to download and install Node.js — things are never straightforward. In this instance, we need Node.js installed because it gives us access to npm. With npm we have access to a huge collection of public, open source packages that other developers have created and which you can bring straight into your own app. For example, if you need to convert a datetime object into a more user-friendly readable date you could either code it yourself or use a package like moment which does the heavy lifting for you. It is always worth checking npm to see if another developer has a ready-made solution for you.
With npm now available to us through Node.js, we can use VS Code’s terminal to access whatever we need. At this stage, we still don’t have a React app we can start working on. The most straightforward way to achieve this is to use Create-React-App. In the terminal, navigate to your directory of choice and simply type ‘npx create-react-app my-project’ to create a single page React app called ‘my-project’. If you then go into your new project directory (‘cd my-project’) you can type ‘npm start’ to see your app in a browser (usually on http://localhost:3000). Now you’re ready to build.
Part 3: Beyond mobile apps and into the web