- It enables you to create modern-looking user interfaces.
- You can easily share it with the whole world via the Internet.
React is the popular kid right now
I recommend that you start learning with React, but if this feels like a major life decision to you, as it did for me, try the following video. You can get started with React quickly using the official create-react-app.
I find it challenging to learn something new without applying it right away. It’s good to have a project in mind as you’re learning. It should not be anything too complicated, but something simple that also motivates you. I can share my first few projects which will hopefully inspire you to find your own pet project.
My first and second apps were elementary things that I made while working at Rolls-Royce. I cannot share them with you as they were internal, but I can describe them to you. Following the fourth app, I got my first job as a web developer and haven’t worked on any personal web apps since.
I had started a lecture series on Python, and I needed a website to record previous lectures. I made a React app whose main feature was a table listing previous lectures with hyperlinks to the lecture resources. It also had a few other pages with instructions for presenters and viewers. Since it was my very first app, it took me something like a week to put together.
There was an old piece of software at work that had an unintuitive UI. The documentation ran for hundreds of pages, and I hated it. Therefore, I created a web app to act as a guide. It had a navigation bar on the left. The user could select a particular workflow using the navigation bar. The right-hand side contained a video demoing the workflow. Beneath the video, written instructions were also provided. I made most of this in one weekend with very little sleep.
I had a major argument with one of my friends. He believed that it was stupid of me not to buy a house and waste my money renting. I build renting vs. buying a house to both put that hypothesis to test and to learn more about React. It was my first significant web app and took several weekends of effort, on and off.
I wanted to make a desktop app using Electron and React and see how difficult it would be. I made a ssh key manager, which to be fair, doesn’t have much practical use. However, I found this very easy to make.
Tools you need
The Chrome browser has an excellent developer console. It’s got a significant slice of the browser market share, over 65%, at the time of writing this article. As you develop your app, you will be checking how it looks and behaves on the browser. The browser is also handy for debugging.
VS Code is a free, open-source editor by Microsoft that’s pure awesomeness - rather uncharacteristic of Microsoft :P. It is the most popular developer environment, according to the 2019 stackoverflow survey.
git is a Version Control System (VCS) that lets you keep track of changes in your code. It gives you the freedom of editing your code without worrying about losing it. Being a Distributed Version Control System (DVCS), it also lets you collaborate with other developers to develop a solution to a mutually shared problem. It was created by the living legend, Linus Torvalds, in 2005 for the development of the Linux kernel.
- Harvard CS50 - This is the best series of lectures I’ve ever seen in my life. I recommend this course to both beginner and intermediate programmers who want to brush up on the basics.
- Introduction to git at Treehouse – This course is a modest introduction to git. It takes some time to build confidence with git, so don’t worry if you find it hard at first. Everyone starts that way.
- Testing React Applications - I enjoy testing so much now, thanks to Kent C. Dodds. He is a very opinionated person with terrific opinions. I hope I’m at least half as cool as this guy one day!
- Mastering Chrome Developer Tools v2 - A lot of beginner developers don’t appreciate how useful the browser dev tools can be. Until I did this course, I was one of them!
- Visual Studio Code Can Do That? - Learn how to use your editor and I promise programming will be so much more fun.
- Internet/browser - HTTP, DNS, HTML, CSS, Document Object Model (DOM)
- Basics - operators, arrays and array iteration (map, filter, reduce, find, forEach), objects, conditions, loops, JSON, template literals/strings, array and object destructuring
- More interesting stuff - hoisting, object literals vs constructors, this keyword, scope, functions, fat arrow/lambda/anonymous functions, closures, higher-order functions, classes, prototypes & inheritance, events, error handling
- Asynchronous JS - event loop, call stack, message queue, job queue, promises, async/await
- React - hooks, JSX, React Developer Tools
- Redux - actions, reducers, store, data flow, Redux DevTools
- Dev tools - package management with npm, version control with git, testing with jest and react-testing-library, linting with eslint, formatting with prettier, Chrome debugging, VSCode React debugging
I also use this Front-end Developer roadmap to understand what my learning gaps are.
- stack overflow – This is where programmers spend most of their lives (sadly :P). I highly encourage you to ask questions yourself if you cannot find an answer. Not only will you be helping yourself, but also the community out there!
- Udemy - I rely heavily on Udemy to learn about various subjects, and I’m a very happy student. :)
- Github - Github is a place where developers collaborate on code development. Why not check out the source code for one of your favourite packages?
- CodeSandbox is an amazing online IDE for web development. It can be useful when you want to share/collaborate with someone. I don’t use CodeSandbox much because I feel much more at home with VSCode on my Mac.
- Conferences - You don’t know what you don’t know. You don’t have to be an expert in everything, but it’s good to be aware of what’s out there and what’s up and coming. This is why it’s important for programmers to attend conferences. Thankfully, most of these conferences upload their videos to YouTube so that you can watch them for free! It’s okay if you don’t understand everything, as long as you can follow its gist. Over time, this will help you expand your knowledge, and you’ll find yourself capable of following lectures on more advanced topics.