Gio Valdez
May 4 · 6 min read

“You don’t learn to walk by following rules. You learn by doing, and by falling over.”
Richard Branson

The biggest challenge I see with software developers today is not just learning a new computer language, but what exactly to BUILD after they feel like they’ve gotten the hang of it.

For example, I’ve found that the best way to learn ReactJS is not by memorizing its documentation, but by starting with a project of my own and referring to the documentation when I needed help.

The software industry is competitive, and is always evolving with new tools, languages, frameworks, and libraries where it’s up to the Programmer to study trends and learn as they come and go. It won’t be long before startups catch on and hire these motivated developers to lay out the groundwork for a brand new application where they are willing to pay big $$$ for the absolute best start. There will always be a need for languages like HTML, CSS and Javascript, but I predict that in a few years there will be so many programmers on the hunt for work that those languages will no longer be enough to land the gig (Or if they do, expect compensation below market standards). I also believe that if you have a few React projects to your name that are complete, then you have demonstrated a level of understanding that is satisfactory, and you should be allowed to cite React and NPM somewhere in your resume. The React Developer interview will not just be a quiz on your level of understanding, but more like “What projects have you built?”, which is the more important question.

By reading this article, I’m assuming you’ve already taken the initiative and started learning the fundamentals of ReactJS. I started off learning React on my Lynda.com account, which for those of you who don’t know is LinkedIn’s online learning platform for professional skills and costs around $25 a month for the basic plan. However, this wasn’t my only source of education since I also consider Youtube University to be a valid knowledge base these days for the modern programmer (if you can find the right videos and don’t fall down the rabbit hole of course). After I finished reading React’s documentation, completed their Tic Tac Toe Game project, followed Lynda courses and watched tons of videos, I finally felt ready to take on a project of my own.

This is where I hit my biggest wall and after weeks of googling example projects, I came to the conclusion that my first project just has to be a simple project with the only goal of getting in more reps. The idea is not only to improve your coding skills, but to write lines and lines of code and make yourself at home with this new skill (like settling into a new apartment where you plan to get all of your work done). You are not thinking about selling what you make yet, you are simply learning by building.

Here are some projects I built after learning the fundamentals of ReactJS:

1) Rebuild the sample project in the React Tutorial without looking at any of the steps

ReactJS has a tutorial on how to build a fully functioning 400px by 400px Tic Tac Toe Game and the goal is to put the fundamentals to work and get you “Thinking in React”.

Since you learn the best by doing, you will need to put in the work here and follow the steps in creating this game, twice. For me, it was hard enough to build the first time around and good thing they provide the completed project at the end of tutorial in case I get stuck. Once you built the game the first time around following the instructions, I challenge you to delete those files, setup a new project in NPM (or wipe the JS tab clean in Babel)and rebuild the project without looking at any of the steps and see how far you get. Repetitive much? A little, but if you feel that is the case, then theoretically this should be a walk in the park for you. This requires critical thinking and is probably the best way to simulate you on the job and getting a assigned your own one off project. Building projects twice has always helped me learn new technologies because they allow me to find shortcuts, build a better foundation, and bypass mistakes I made the first time around.

2) Build Your Own Website in React

Not only does this make you a better React Developer, but the outcome can be your marketing tool and proof of concept to employers looking to hire you! All of the pieces you need to learn how to make a component based website are in the React documentation. Easier said than done when you’re a new React Developer and of course the design portion of the website may not be your specialty. But once again, the idea is to write lines and lines of code. Here is a template you can download for this exercise. (DISCLAIMER: This template is just for practice and not meant to be your new website unless you are willing to keep the footer credits in place as mentioned when you click “Download”).

If you have created a brand new React project, you are given an index.js file, an app.js file, and an index.html file. Copy the contents inside the index.html <body> element you just downloaded and paste inside the <div className=”App”> element in src/app.js:

import React from ‘react’;

import ‘./App.css’;

function App() {

return (

<div className=”App”>

//Paste HTML here.

</div>

);

}

export default App;

Once you are done pasting the website contents into app.js, you will need to:

  • Make sure all of the input and img tags have an “/” (Ex: <img src=”” />
  • All of the instances of class are changed to className
  • All of the script and style references are copied over to the React project’s index.html file
  • Move all of the downloaded website’s scss, fonts, images, css, js folders to the React project’s public folder

This should recreate the website in your React environment and now you can break off pieces of the website into components. This is an exercise that has helped me better understand the component based architecture and how the virtual DOM works.

3) Rebuild Facebook Page Layout

Yes you read that correctly, rebuild the creator’s website using a library they’ve spent years to develop. Name a more difficult challenge I’ll wait…. Well it’s not quite as difficult as you may think, since the goal here is to only create the static layout and not the dynamic portion of it. Ignore the messaging ability, data fetching, and backend (unless you are up for the challenge then tip my hat to you, go for it). But today, let’s take a sample group page below and see how I broke it up into components:

I challenge you to create the layout in HTML and CSS first then recreate in React breaking up the layout into the components shown above. I strongly recommend reviewing the Components basics and Code Splitting for this exercise since this will crowd up your App.js file and complicate things when you build on to your project. You may even decide to break these up into smaller components which is perfectly fine.

If you are successfully able to recreate this layout, then you can probably take a crack at the dynamic portion, build the home page, add button functionality, etc. The beauty of ReactJS is that it incorporates NPM where you can import commonly used components that you may not know how to build on your own.

Here is a list of components you can add to your project today.

These three exercises will make you a better ReactJS programmer and will hopefully spark ideas for an original project.

JavaScript in Plain English

Learn the web's most important programming language.

Gio Valdez

Written by

Freelance Developer | https://giovaldez.com

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade