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.
React is an open source library that is built on Javascript and allows you to develop user interfaces for mobile and web apps. Whilst it uses Javascript, the final output is rendered in HTML and so CSS still applies here in order to style your app. This was a lot for me to take in. Not only did I need to learn Javascript (so I could use React properly) I also needed to learn HTML (the building blocks for web) and CSS (styling these building blocks). Three new languages seemed a lot. Nevertheless, I was convinced that React was the way forward and Javascript is a hugely popular language in its own right so it would be worth learning.
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.
With the basics of HTML and CSS under my belt, I moved onto the next freeCodeCamp course: Javascript Algorithms and Data Structures. Again, the courses are listed as 300 hours but you can complete them in under two weeks if you apply yourself each day. React uses Javascript to dynamically render HTML and CSS. Ultimately, it means your web page can be interactive.
In the same way I used Dart to manipulate data in Flutter so I would need to use Javascript to manipulate data in React. With that in mind, I set about learning about Javascript algorithms and data structures even though it was tricky to see the immediate practical relevance at times. Nevertheless, you will reach for your Javascript skills sooner than you think especially if you are making a dynamic web app. For example, using RegEx to strip out certain words from a sentence or looping through a list/array to pick out the items that match a specific search term. This refined data can then be passed to the user interface and rendered into HTML so it can be displayed with a sprinkling of CSS so that it looks good.
Finally, freeCodeCamp has a course on Front End Development Libraries which covers Bootstrap, jQuery and React. Whilst I was most interested in React it didn’t hurt learning about Bootstrap (easily style components) and jQuery (another way to manipulate Javascript).
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.
Choose your code editor. Throughout various articles and tutorial videos I noticed many developers were using Microsoft’s Visual Studio (commonly referred to as VS Code) so I looked no further. With VS Code installed you have an editor with which to code with but you still need to configure it for your specific purposes because you can just as well use it for Flutter as well as React and many other cases. You’ll want to do some research into the extensions that are useful to you. For example, I have Babel Javascript (highlights syntax specific for Javascript and makes use of colour coding to make it easier to read the code) and ES Lint (compares your code to pre-established rules to ensure your coding style is uniform).
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.
Node.js has more wide-reaching uses other than simply allowing you to use npm. We know that React uses Javascript and this code is executed in the browser—otherwise referred to as client-side or the front-end. Sometimes we will want code to be executed outside of the browser and on the server-side or back-end. This is where Node.js comes in: it allows you to use Javascript and create server-side code. It gets complicated pretty quickly because the syntax you need to code in Node.js is slightly different and you need to get to grips with client-side vs server-side code but that’s for another time.
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 1: What I managed in 12 months with no coding experience
Part 2: Getting to grips with Flutter
Part 3: Beyond mobile apps and into the web
Part 4: Building on my React foundation
Part 5: Components and classes and hooks, oh my!
Part 6: Next.js vs Create-React-App. (Undercard: Persistent Data)
Part 7: Headless WordPress, WooCommerce and Stripe
