Introduction

This article provides resources and experienced-based tips and advice for learning the necessary technologies to become a react developer in 2023. The materials cut mainly across the frontend and cover aspects like react, (custom) hooks, Context API, TypeScript, version control as well as testing.

This guide will lead you to the knowledge and skillset you need to become a Software Engineer on the frontend with React and TypeScript. You'll find material on the following:

• HTML

• CSS

• Git and GitHub

• JavaScript

• React

• TypeScript

• Testing with React Testing Library

HTML

HTML - Hypertext Markup Language - is the standard markup language for displaying documents in the browser. You could see HTML as the skeleton of web pages. This HTML course by freeCodeCamp covers all you need to know to be able to write HTML for the pages and applications you’ll be building. This course covers what you need to get started writing HTML:

Now after learning the fundamentals of HTML, practice building pages in it. Many tend to skip this but it allows you to see what you can do alone in HTML and what it has to offer. This freeCodeCamp tutorial walks you through building a simple page in HTML:

I'd recommend you build two more such websites that use other HTML elements that are not implemented in the above tutorial. And also look up the elements on MDN to get familiar with the documentation.

CSS

CSS stands for Cascading Style Sheets and it’s used to describe the documents displayed by HTML as regards size, layout (both on mobile and desktop), colour, font, etc. Many newbie developers tend to not spend enough time with CSS and quickly jump to JavaScript but this has a way of catching up later: that may be a project or a role that uses pure CSS or SCSS. So give CSS enough time. This course on freeCodeCamp teaches the basics of CSS:

After covering the CSS basics, get enough practice by building landing pages and multipage websites. A great resource for HTML/CSS practice projects is Frontend Mentor. But of course, you can use other resources or even come up with your own project ideas. And be sure to make the pages and websites mobile responsive. Don’t abandon any page for another til it’s fully responsive. You’ll be doing your technical skills a lot of good. This tutorial series builds a landing page from scratch:

Then be sure to build similar or even multipage websites independently and see how far you go. You'd need to do many - I'd recommend 10 - of such projects to be able to pull off most of the styles and layouts in real-world websites and applications.

Git And GitHub

Now you have a number of projects going on and some of the files probably are large. You might want to keep track of the changes you've made so far and future changes or updates you'll be making later. This is where git and GitHub come to play. Git is a version control software and GitHub is a platform where Git users build software together. Developers collaborate on GitHub to build open-source projects and share files. Get started with Git and GitHub with this tutorial:

One thing to keep in mind about Git is that you'll not write git commands (there are many of them by the way) as often as you may think. I could go a week or two without writing any commands on the job. I just look them up whenever I need them, which makes sense because it's not a programming language or framework. But having an understanding of the basics and why it's needed is important.

JavaScript

JavaScript is responsible for the logic and functionalities of web applications. It breathes life into the static pages that you build in HTML and CSS. Even though it's more likely that you'll work with frameworks nowadays, they are built on JavaScript and thus knowledge of plain JavaScript is important. This tutorial covers the basics of JavaScript that you need to start building projects:

Once you've covered the basics, start building projects because real learning happens when you work on projects independently. This tutorial walks you through building a simple vanilla JavaScript project, including HTML and CSS of course.

You could do a few more such walkthroughs where you code along. But don't do that for long because you really learn, as I've said earlier when you build projects by yourself from scratch. If you're always wanting to use tutorials for building projects, you run the risk of tutorial hell and you don't want that. Frontend Mentor has a bunch of vanilla JavaScript projects which you could do or could help come up with project ideas.

React

React is a JavaScript library for building user interfaces. It allows developers to build complex and interactive UIs with reusable components. This tutorial walks you through what you need to know about react. It covers setting it up the local environment through to basic react concepts like JSX, props, state, hooks etc.

You're also welcome to check out other tutorials but again start working on projects once you've understood the beginner concepts. You might want to look at some concepts in isolation too if necessary like the hooks and passing props. This tutorial for example builds a calculator with the useReducer hook.

You could do react versions of the vanilla JavaScript projects that you've worked on so far to get more practice.

React with TypeScript (plus Testing)

TypeScript is an extension of JavaScript. It provides optional static typing and other features on top of the language. TypeScript is designed to help developers write more scalable and maintainable code by providing features like interfaces, classes, and type annotations.

You might not want to immediately use TypeScript for your portfolio projects but you'll most likely need it on the job. This series covers TypeScript basics and then goes on to build a react app that covers important concepts in the language:

It also includes testing with react testing library. You don't have to do it for now but I'd recommend it anyway because you may be tasked with testing components on the job.

Conclusion

Some of these resources include material on HTML, CSS, JavaScript, React and TypeScript which helped me in becoming a Frontend Developer. There are lots of other great resources out there but you should spend most of your time building projects rather than watching tutorials and coding along. It's also important to know that your work project could decide what you'll be learning too: whether state management with the hooks, for example, or with a third party library like redux.

---

I hope that this article is helpful and you learned something from it. Being a technical writer and content creator I am passionate about sharing my knowledge (including tips and advice) and helping other people achieve their goals, especially those just starting out in tech. You can connect with me on my social media profiles and blogs here.