DEV Community

Per for Scrimba

Posted on • Edited on

31 steps to become a professional React developer

Credit: [Matylda](https://www.flickr.com/photos/hackny/6890140478)

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, and our upcoming advanced course, 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 ;)

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

tag and an image fades in and out while triggering a sound.

30 Days To Learn jQuery

Fast forward to the end of 2013. I did the 30 days to learn jQuery course at TutsPlus made by 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.

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 is a great intro to both computer science and Python, made by Dave Evans. 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.

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.

Simple Javascript Game

At some point in early 2014, I became interested in creating Javascript games. I started off with this tutorial, which takes you through creating a very simple JS game, where you control a character with the arrow keys in order to catch goblins.

Mine Sweeper In Javascript

I followed up with the classic Mine Sweeper game, as explained in this tutorial. 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).

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.

jQuery Game — Shopping For Kids

During the eastern of 2014, I built a demo for an educational app for kids, 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.

Udemy — Coding For Entrepreneurs

In the early summer, I did the awesome Coding For Entrepreneurs tutorial by Justin Mitchel. 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.

House Of Fam Website

My first paid job as a developer was to code a simple website (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.

The Disco Fingers Website

I also built a simple landing page for our music creation app Disco Fingers, which our startup launched in late 2014.

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.

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.

CoderByte Challenges

In order to improve my fundamental skills (which you can read more about here) I solved a lot of challenges on CoderByte.

CodeByte has a lot of small tasks that’ll improve your algorithm skills.

Tic Tac Toe In Javascript

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

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 and finally chose Founders and Coders (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 using Github Pages. Source code is available at this repo, and the assignment here. Skills: Github Pages, CSS, jQuery, Jekyll.

Week 2: The Guardian API

A website that pulls in content from the Guardian API. Source code in this repo, and the assignment here. Skills: Web APIs, Ajax, JSON.

Week 3: Nearby Stuff

A social wall that display nearby tweets. Assignment & Repo. Skills: Servers, Node.js.

Week 4: Instagram & Twitter Search

An app where you can search for tweets and Instagram posts. Repo & Assignment. Skills: Heroku, MongoDB.

Week 5: D3 Tweet Visualization

This was the D3.js week on FAC. We experimented with how to create visualizations. Assignment & Repo.

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.

Week 6: Note Taking App

Our first introduction to React.js, which I immediately enjoyed working with. Assignment & Repo

Week 7: Blog 1.0

A simple blog with authentication. Skills: Server side rendering, cookies. Assignment & repo.

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 & repo. Skills: Hapi.js

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. Skills: jQuery, Heroku, APIs.

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.

Kids Puzzle

A kids puzzle based upon a Norwegian kids book series named Troll-Olav. Repo

RateMyStuff

A social network based around image rating. (I, unfortunately, don’t have an image of this one.) Repo

Squish

A tool for students to help them repeat and remember what they have learned. Repo

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.

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.

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. 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 course, and then sign up for the waitlist for our upcoming advanced React course as well.

Good luck :)

Top comments (3)

Collapse
 
p12y profile image
Peter Tyldesley

You forgot the part about where you stop building apps and instead do 600 leetcode problems, because you can't get a job without being able to invert a binary tree, even though you've already been working in the industry with React successfully for years.

Collapse
 
kevsmck profile image
Kevin McKenna

31 steps of how you learned everything except react with the final step being got a job as a react dev?

Reminds me of the how to draw an owl meme

Collapse
 
jeromedeleon profile image
Jerome De Leon

The title is kinda confusing and I lost track of the steps, but great article BTW!
I'll add some in my TODO list for my free time :)