31 steps to become a professional React developer
Tags: react
Published: 2019-11-02 15:28:53

---
title: 31 steps to become a professional React developer
published: true
description: 
tags: react
---

![Credit: [Matylda](https://www.flickr.com/photos/hackny/6890140478)](https://cdn-images-1.medium.com/max/7300/1*NskLSx0j_zz7fELmxbGydQ.jpeg)

### Every single project and course I took to reach a hireable level

Before I learned how to code, I used to ask developers how much time it took them to learn their craft — and how they managed to do it.

They would answer stuff like *1.5 years*, *a bachelor's degree* or *I just started playing around with it* - none of which really satisfied my curiosity. I wanted to know specifically how much work they had put in, as I was wondering if I could ever possibly do it myself (which I doubted, as it seemed close to impossible).

Fast forward a few years, and I had done the transition from a hobby coder to a professional React developer myself. Now, I think I’m able to give the answer I was looking for.

> # So if you’re an amateur wondering how much effort it takes to become a professional front-end developer: this post is for you.

However, I'm not claiming that my path is the most efficient one. It took me a long time to realize I wanted to work with React, and I wasn't determined to reach a hirable level until I started one a coding bootcamp.

If you're looking for the _absolutely_ fastest route, I'll be bold enough to recommend our [intro course on React](https://scrimba.com/g/glearnreact?utm_source=dev.to&utm_medium=referral&utm_campaign=31_steps_article), and our [upcoming advanced course](https://scrimba.com/g/greact?utm_source=dev.to&utm_medium=referral&utm_campaign=31_steps_article), as they are built with this goal in mind.

Now, let's have a look at all the courses and projects I’ve done since I got started, along with some advice I picked up on the way.


## PHASE ONE: INTRODUCTION

I’ve divided my learning path into three phases; **introduction**, **hobby** and **bootcamp**.

My introductory phase started in 2012 and lasted for about two years. The progress was slow and it all happened quite sporadically, without proper structure or goals. In hindsight, I wish I had started off more seriously, I wish I had committed to code for e.g. 30 minutes a day. This brings me to my first advice for aspiring developers:

>  Remember that it’s never too early to start being serious about your learning. Your future self will thank you for this.

## **Codecademy**

As many others I started off with Codecademy, completing four of their tracks: Javascript, HTML&CSS, jQuery, PHP. This gave me a mental model of what coding was. If you’ve never written a single line of code before, Codecademy is an excellent starting point. It's almost as good as Scrimba ;)

![](https://cdn-images-1.medium.com/max/4828/1*csNv80BARrWTiDKcZXLPNg.png)

## Interactivity For Kids Apps

After Codecademy, I knew just enough to do simple interactivity for a few kids book apps my startup created. It consisted of simple web animations: tap a <div> tag and an image fades in and out while triggering a sound.

![](https://cdn-images-1.medium.com/max/2000/1*LT81DBTQVjXocgvE1vPj1g.jpeg)

## 30 Days To Learn jQuery

Fast forward to the end of 2013. I did the [30 days to learn jQuery course](http://code.tutsplus.com/courses/30-days-to-learn-jquery) at [TutsPlus](http://tutsplus.com/) made by [Jeffrey Way](https://twitter.com/jeffrey_way), which is an excellent tutor. He takes you through a lot of interesting small projects.
>  If you’d like to learn how to create interactive websites, I’d recommend you to start with jQuery over Vanilla Javascript, because it’s easier to learn.

![](https://cdn-images-1.medium.com/max/2508/1*ffEOe4HlF5M-bELqvzS-Sg.png)

## PHASE 2: HOBBY

Apart from the TutsPlus course, I did very little coding in 2013, as I spent all my time on my startup. Also, I didn’t really believe I could ever become a professional developer.

However, I got started again upon discovering Udacity at the beginning of 2014. This time, I was more serious and sat the goal of educating myself at least one hour per day.

>  I find process-based goals to be much more effective than outcome-based goals. It feels less overwhelming, and the results always come automatically.

## Udacity — Intro To Computer Science

The CS101 course on [Udacity](undefined) is a great intro to both computer science and Python, made by [Dave Evans](https://twitter.com/udacitydave?lang=no). This is where I properly learned about data types, functions, conditionals and other stuff, though I only finished 80%. To be honest, I’ve never finished a single MOOC, as I quit as soon as I get bored.
>  Don’t feel bad for dropping out of a course — you’re not in school anymore. Be aware of boredom, as it’s poisonous to your motivation.

 <iframe src="https://medium.com/media/eda89589e9a9d3dbb89c2ddeb9c7b1ff" frameborder=0></iframe>

## Udacity — Web Development

I followed up with CS253, created by Reddit co-founder Steve Huffman. It takes you through building a blog and is a natural next step after CS101.

 <iframe src="https://medium.com/media/a9fe82cb771bb8903976000588ff3783" frameborder=0></iframe>

## Simple Javascript Game

At some point in early 2014, I became interested in creating Javascript games. I started off with [this tutorial](http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/), which takes you through creating a very simple JS game, where you control a character with the arrow keys in order to catch goblins.

![](https://cdn-images-1.medium.com/max/2056/1*HUkHvm9I829l7HmzHV6xJw.png)

## Mine Sweeper In Javascript

I followed up with the classic Mine Sweeper game, as explained in [this tutorial.](https://www.youtube.com/watch?v=fqzaxdiRZS4) This was tough, and I remember feeling a bit overwhelmed by the logic. Though I like to follow through regardless of not always understand what's going on (which I write more about [here](https://medium.com/learning-new-stuff/a-simple-technique-to-learn-hard-stuff-ffaa7879bf7c#.rpwbp18ai)).

 <iframe src="https://medium.com/media/6e4b79164cba0b903e06bf9b9a7575a4" frameborder=0></iframe>

## Snake In Javascript

At some point, I also created a snake game. I can’t remember exactly which tutorial I followed, but it could have been the one below.

 <iframe src="https://medium.com/media/aa654642c507bc4152c8cfb7e2ed404d" frameborder=0></iframe>

## jQuery Game — Shopping For Kids

During the eastern of 2014, I built a demo for an [educational app for kids](http://soleisonline.appspot.com/butikk), as our startup had gotten a request from a company that was going to turn their Flash games into HTML5. Though we didn’t take the job, I wanted to know if I had enough coding skills to do a job that I theoretically could get paid for.
>  It’s surprising how little knowledge you need to start generating a little bit of money on your coding skills. Try and get to this point as soon as possible.

![](https://cdn-images-1.medium.com/max/4224/1*Ima8el-QTGyDwauSIWOlTw.png)

## Udemy — Coding For Entrepreneurs

In the early summer, I did [the awesome Coding For Entrepreneurs tutorial](https://www.codingforentrepreneurs.com/) by [Justin Mitchel](undefined). It’s a completely project-based course and follows a *learning by doing* methodology. It’s a great intro to the Django Python framework.
>  While the Udacity courses will give you a foundation of CS concepts, this one will enable you to use your skills practically. Combining these types of courses is critical.

 <iframe src="https://medium.com/media/5acd45818dce06b3bee64aba549906ce" frameborder=0></iframe>

## House Of Fam Website

My first paid job as a developer was to code a simple [website](http://houseoffam.no/) (which my co-founder designed) for a Norwegian fashion designer. It’s a great feeling to finally get paid for doing your hobby, as you realize you can finance growing your skills further. Even though we made peanuts compared to the hours we put into it.

>  Don’t worry about the hourly rate being below the minimum wage for your first job. It’s still infinitely more than you got paid for your last project.

![](https://cdn-images-1.medium.com/max/4740/1*v4EdJzWWpSpGwWQsYRSe5w.png)

## The Disco Fingers Website

I also built a simple [landing page](http://discofingers.com/) for our music creation app [Disco Fingers](https://itunes.apple.com/us/app/disco-fingers/id809680953?mt=8), which our startup launched in late 2014.

![](https://cdn-images-1.medium.com/max/4736/1*XpZ-5nmd0S3FyURrawn-fw.png)

## Disco Fingers Top Songs Crawler

After launching Disco Fingers I wrote a Python script that crawled our internal list of Disco Fingers beats and tweeted a link to the most popular beat every day. This taught me a lot about APIs, cron jobs and scraping.
>  Creating a script that saves you time feels empowering. I’d recommend you to try this out.

![](https://cdn-images-1.medium.com/max/3724/1*yw2ZqU6AWWyihFTUAOM6dw.png)

## Udacity — Supervised Learning (ML)

At the end of 2014, I started getting fascinated by machine learning, so I took a few lessons from this course. I‘d recommend it if you’re interested in getting a mental model of what machine learning is. But it doesn’t involve any coding, which was kind of disappointing.

 <iframe src="https://medium.com/media/9835fce09337bd49a3c0becf4bb2f196" frameborder=0></iframe>

## CoderByte Challenges

In order to improve my fundamental skills (which you can [read more about here](https://medium.com/learning-new-stuff/how-to-choose-the-right-coding-bootcamp-364efd35a63c#.l6q5wm6yn)) I solved a lot of challenges on [CoderByte](https://coderbyte.com/).

![CodeByte has a lot of small tasks that’ll improve your algorithm skills.](https://cdn-images-1.medium.com/max/4048/1*Ents6m_4PSE1fcIAkq124Q.png)

## Tic Tac Toe In Javascript

I also built a Tic Tac Toe game as a part of my applications to various coding bootcamps.

![](https://cdn-images-1.medium.com/max/3328/1*Gpzb4chOFCQLdjd-LeHEHA.png)

## PHASE THREE: BOOTCAMP

At this point in time, I was good enough to create simple scripts and knew how to deploy a Django website if I followed the Coding For Entrepreneurs formula. But I was still was far from able to take on a job as a developer. This became my goal after our startup failed, so I [applied for a bunch of coding bootcamps](https://medium.com/learning-new-stuff/how-to-choose-the-right-coding-bootcamp-364efd35a63c#.jaolouyk9) and finally chose [Founders and Coders](http://www.foundersandcoders.com/) (FAC) in London.

FAC is built around weekly projects. Building these projects involved reading a lot of tutorials and taking small online courses — not all of which I remember. So I’m linking to the Github repo’s instead, in addition to the assignments. I’ve also noted which skills we gained from each task.

## Week 1: Team blog

A [basic blog](http://foundry-matrix.github.io/fmblog/) using Github Pages. Source code is available at this [repo](https://github.com/foundry-matrix/fmblog), and the [assignment here](http://fac4.foundersandcoders.org/content/week1/assignment.html). Skills: Github Pages, CSS, jQuery, Jekyll.

![](https://cdn-images-1.medium.com/max/3028/1*zNhAaoiu0poYXDArnOMwTA.png)

## Week 2: The Guardian API

A website that pulls in content from the Guardian API. Source code in this [repo](https://github.com/foundry-matrix/The-Guardian), and the [assignment here](http://fac4.foundersandcoders.org/content/week2/assignment.html). Skills: Web APIs, Ajax, JSON.

![](https://cdn-images-1.medium.com/max/3200/1*CIsQuQaEFEXLZonMIicGUw.png)

## Week 3: Nearby Stuff

A social wall that display nearby tweets. [Assignment](http://fac4.foundersandcoders.org/content/week3/assignment.html) & [Repo](https://github.com/foundry-matrix/socialfeed). Skills: Servers, Node.js.

![](https://cdn-images-1.medium.com/max/3040/1*_3kE4vzU9EGdloGJc1TRVA.png)

## Week 4: Instagram & Twitter Search

An app where you can search for tweets and Instagram posts. [Repo](https://github.com/foundry-matrix/InstagramFeed) & [Assignment](http://fac4.foundersandcoders.org/content/week4/assignment.html). Skills: Heroku, MongoDB.

![](https://cdn-images-1.medium.com/max/4372/1*hliLLcarJSj1FfFWmx0VaQ.png)

## Week 5: D3 Tweet Visualization

This was the D3.js week on FAC. We experimented with how to create visualizations. [Assignment](http://fac4.foundersandcoders.org/content/week5/introduction.html) & [Repo](https://github.com/foundry-matrix/StopGoContinue).

![I actually spent most my time working on Keyword King (further down) this week, so I did very little D3, hence the sparse result on the image.](https://cdn-images-1.medium.com/max/2508/1*uksBtbfU4O61JXU627pKSg.png)

## Week 6: Note Taking App

Our first introduction to React.js, which I immediately enjoyed working with. [Assignment](http://fac4.foundersandcoders.org/content/week6/tuesday.html) & [Repo](https://github.com/foundry-matrix/NoteTakingApp)

![](https://cdn-images-1.medium.com/max/3104/1*dMO2T1loHFx8jEiznLwJrg.png)

## Week 7: Blog 1.0

A simple blog with authentication. Skills: Server side rendering, cookies. [Assignment](http://fac4.foundersandcoders.org/content/week7/assignment.html) & [repo](https://github.com/foundry-matrix/ServerBlog).

![](https://cdn-images-1.medium.com/max/4784/1*g54QcjW8J2oir-u8r47Yvw.png)

## Week 8: Blog 2.0

This time we added more authentication methods, e.g. Twitter, Facebook, and email signup, and used the Hapi.js framework. [Assignment](http://fac4.foundersandcoders.org/content/week8/assignment.html) & [repo](https://github.com/foundry-matrix/hapi_blog). Skills: Hapi.js

![](https://cdn-images-1.medium.com/max/3576/1*lJUmD5eTiR5JVO8QoXNz_Q.png)

## Week 9: Keyword King

In the ninth week, we got to build whatever we wanted. Our team built a site that analyzes your App Store keywords and tells you which ones are worthless. [Repo is here.](https://github.com/foundry-matrix/CrapWords) Skills: jQuery, Heroku, APIs.

![](https://cdn-images-1.medium.com/max/4204/1*VsyjNUSmUg-nA0tK8efm_w.png)

## Sir Predictalot

In week ten we started doing projects for clients, making a little bit of money. Our first one was a prototype for a Tinder’ish news predictions app. [Repo](https://github.com/the-knights-of-the-reactangular-table/sir_predictalot/tree/development).

![](https://cdn-images-1.medium.com/max/4344/1*FEh99FBkekIPznGD0nIkzA.png)

## Kids Puzzle

A kids puzzle based upon a Norwegian kids book series named Troll-Olav. [Repo](https://github.com/Troll-Olav/Puzzle)

![](https://cdn-images-1.medium.com/max/3200/1*O-RclLu7S6a0Y887Ii4lRw.png)

## RateMyStuff

A social network based around image rating. (I, unfortunately, don’t have an image of this one.) [Repo](https://github.com/people-under-the-stairs/midnight-marauders)

## Squish

A tool for students to help them repeat and remember what they have learned. [Repo](https://github.com/pajoa/pajoa-the-chimp)

![](https://cdn-images-1.medium.com/max/3556/1*FxFz2-FGdr3vWUtAPH-UwA.png)

## Coursera — Intro To Machine Learning

At some point during FAC I got started with this course. As usual, I did not finish it but still learned a lot.

 <iframe src="https://medium.com/media/0f335149ae5806a79c378109c0cd81c0" frameborder=0></iframe>

## Machine Learning Week

I also did a one-week machine learning stunt, where I tried to learn as much ML as possible. This involved a range of tutorials and trial and error, which you can read more about in [this article.](https://medium.com/learning-new-stuff/machine-learning-in-a-week-a0da25d59850#.6968hp56q)

![](https://cdn-images-1.medium.com/max/2300/1*W8zN_ya5mcGPhf8Z27X_sw.png)

## Getting a job

After FAC finished I moved back home, and after about a month I got a job as a React developer at [Xeneta](http://www.xeneta.com). I hope this article has helped you get an impression of the amount of work it takes to become a developer. 

If you'd like to become a React developer yourself, I'd strongly consider the courses we have one Scrimba. Start with the [Learn React For Free](https://scrimba.com/g/glearnreact?utm_source=dev.to&utm_medium=referral&utm_campaign=31_steps_article) course, and then sign up for the [waitlist](https://scrimba.com/g/greact?utm_source=dev.to&utm_medium=referral&utm_campaign=31_steps_article) for our upcoming advanced React course as well.

Good luck :)