What You Need Before Learning React

Aphinya Dechalert -

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:

  • HTML
  • CSS
  • Bootstrap
  • JavaScript
  • GitHub
  • NPM
  • JavaScript ES6

I know, this doesn’t really tell you much — so here is a roadmap/checklist breakdown of the minimum concepts you need.

HTML

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

CSS

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

Bootstrap

Yes, Bootstrap is technically a CSS and JavaScript UI library — but a pretty darn good one to learn from. It will give you the foundations of design and common patterns for things that are used all the time.

And yes, there is also a Boostrap for React.

- grid systems
- navbar
- forms
- buttons

JavaScript

For new frontend developers, there is one thing you must know — the frontend is all JavaScript. You can’t escape it. You can’t not learn it.

It’s the ultimate prerequisite to frontend development in general.

And no, you can’t just close your eyes and pretend it's Java, C++ or whatever language you’re coming from. JavaScript is weird — which makes it special. While the foundations of programming still apply to JavaScript, certain theories, ideologies, and methods of implementation are completely different from what you might think about a particular concept.

For example, a JavaScript class is nothing like a Java class . That’s one of the common things that stumps a lot of backend developers when they try to make things work in JavaScript.

JavaScript is already deceptive in its name. Don’t let what you think you know fool you into believing that you can JavaScript in general.

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
- grabbing elements with JavaScript
- event handling
- arrays
- multiple parameters in functions
- flexible function parameters
- classes
- class constructor
- extending classes

GitHub

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

NPM

NPM is a Node Package Manager. It basically coordinates your entire project. You run your servers and various commands through NPM for anything that’s JavaScript-related. So this includes your node.js project, Angular, React, Vue, Next, Strapi implementation, MEAN, MERN, and whatever else you can think of.

- basic knowledge of NPM and modules required

JavaScript ES6

Alright. So you’ve got the basics of JavaScript. However, if you want to really accelerate your React learning journey, you need to understand the listed below. Why? Because you’ll be using them a lot in your React project. If you’re not solid on these concepts, you’re going to struggle to learn how these concepts work in a React context.

- modules
- 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
- JavaScript 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.

At the end of the day — it’s all the same stuff: HTML, CSS, and JavaScript with a sprinkle of GitHub and NPM. If you’ve got a solid foundation in these things, it doesn’t matter what the next it thing is, you won’t struggle to pick it up.

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.