The Internet is a lot of things. It’s a teacher. It’s a resource. It’s a seemingly infinite and unstructured pool of knowledge and information.
It is also the space where React-based apps exist and thrives.
The little frontend library has taken the Internet by storm and is one of the hottest it thing in demand right now. If you’re new to software development or transitioning from a different layer of the code stack to the frontend — it seems only logical to learn React.
This is where many developers get it wrong and struggle. If you’re new to the frontend in general, you shouldn’t be touching React at all. Just because you know how to code doesn’t mean you can.
You’ve got to learn how to float before you can swim
I’m sure I’m not the only one. Back in my early days, I used to overrate my abilities, follow along with a YouTube tutorial or two, then convince myself that I know everything there is to know about whatever it was I was watching.
However, over the years, I’ve discovered that there’s more to frontend than just learning libraries and frameworks. In fact, I got stuck and struggled longer than I should have because I jumped right into it rather than learning the prerequisites of front-end development.
Sure, I knew how to code — but front-end development is a different kind of beast. As a front-end developer, you’re the bridge between visual experience, your back-end, general user flows, capturing interactions, and translating a designer’s intention into something that the browser can understand.
In the grand scheme of things, React is the final piece of the puzzle rather than the first — yet, we often treat it the other way around. We jump right in and learn React first rather than the prerequisites to get us there in the cleanest and efficient manner.
The prerequisites of good and robust front-end development are the things that teach us how to float and eventually swim. Angular, React, Vue, jQuery, Next.js, and all that stuff are more akin to the strokes that you learn later on once you’ve got the basics.
If you do it the other way around, you’ll just waste your time flapping around in shallow waters whilst watching YouTube tutorials.
So…What are the prerequisites?
Learn the following in this order:
I know, this doesn’t really tell you much — so here is a roadmap/checklist breakdown of the minimum concepts you need.
Yes. You’ve got to learn HTML. Yes. HTML is dead easy. And yes — some people still struggle with it because they only know the basics and nothing much else about HTML.
In the grand scheme of learning HTML, you need to understand the differences between elements, attributes, when to use classes, ids, and why we have them.
HTML might just be markup — but if you’ve got your markup incorrectly, the foundations of your app essentially screwed.
Here’s a quick list of what you need:
- basics of HTML
- elements & attributes
- styling HTML (inline, external stylesheet, internal stylesheet)
- lists, paragraphs
- text styling data with tables
- forms and images
Like HTML, a lot of developers pick up the barebones basics and then struggle with it later down the line. Then it grows into a CSS minefield jungle infested with
!important overrides because it’s the only way things can work, sorta, until something else breaks.
CSS might sound and look simple but it’s a lot more powerful and important than many new to frontend development realize. It is the thing that can make or break a user experience and make dynamic UIs possible. It is also nuanced to the device and browser type (although not as dramatic and ununified as it was about a decade ago).
If you struggle with one of the following things, you need to pause your React journey and get back to basics.
- basics of CSS (an understanding of elements, IDs, and class selectors)
- how background and borders work
- text styling and formatting (look into typography, line spacing, letter spacing etc.)
- padding and margin
- building navigation bars
And yes, there is also a Boostrap for React.
- grid systems
It’s the ultimate prerequisite to frontend development in general.
class is nothing like a Java
Here’s a list of things you need to be clear on before you start diving into React:
- integers, strings, and variables
- undefined variables
- Boolean operators and comparing values
- if statements and for loops
- defining functions and objects
- event handling
- multiple parameters in functions
- flexible function parameters
- class constructor
- extending classes
This is mostly for developers who are brand new to coding. Git and GitHub go hand in hand. You need it. It’s going to be part of your day-to-day workflow.
- local and remote repositories
- pushing to GitHub
- basic knowledge of NPM and modules required
- differences between 'let' and 'const', and when/why they're used
- arrow functions
- exports and imports
- classes, properties, and methods
- spread and rest operator
- refreshing array functions
Wrap up: Don’t learn React — no, really
Learn everything else before you even consider learning React. Master one thing at a time. Your progress will be much faster and feel less frustrated when you’re diving into the library.
You’ll learn faster, absorb and implement the higher level ideas better, and your code will less of a headache for you in the future.