React JS shows up in almost every "learn web development" conversation, and it's tempting to jump straight in — plenty of tutorials promise you can build an app in a weekend. The problem shows up after that weekend: the moment a tutorial ends and you try to build something of your own, gaps in the fundamentals underneath React surface as bugs you can't explain. Here's what to actually learn first, and why each piece matters once you get to React.
HTML5 — Structure Before Style
React ultimately renders HTML to the browser, just written differently (JSX instead of .html files). If you don't already think comfortably in terms of elements, nesting, semantic tags, and how a page is structured as a tree, JSX will feel like an arbitrary syntax to memorise instead of a natural extension of something you already know. Spend real time here before moving on — it's the foundation everything else sits on.
CSS3 — Layout, Flexbox and Responsive Basics
Styling doesn't disappear in React — component-based development still needs you to lay elements out, align them, and make them work across screen sizes. Flexbox specifically is worth mastering before React, since most component layouts (cards, navbars, forms) lean on it constantly. Skipping CSS fundamentals and hoping a UI library will handle layout for you tends to backfire the first time you need a custom layout it doesn't cover.
JavaScript Fundamentals — The Step Most Beginners Try to Skip
This is the one that causes the most trouble when skipped. React is JavaScript — components are JavaScript functions, props are JavaScript objects, event handlers are JavaScript functions, and state updates are JavaScript logic. If variables, functions, arrays, objects, loops, and conditionals aren't already comfortable, React adds a second layer of confusion on top of a first layer you haven't finished learning. Get genuinely fluent in core JavaScript before adding a framework on top of it.
ES6+ — The JavaScript React Actually Uses
Modern React code leans heavily on JavaScript features introduced in ES6 and later — arrow functions, destructuring, template literals, the spread/rest operators, and array methods like .map() and .filter() (which you'll use constantly to render lists of components). These aren't optional extras; they're how React code is actually written day to day, so they belong in your prerequisite list, not something to pick up later by accident.
The DOM — Understanding What React Is Abstracting Away
React's whole value proposition is managing the DOM efficiently so you don't have to do it manually with methods like document.getElementById or addEventListener. That value is much easier to appreciate — and debug when something goes wrong — if you've written vanilla JavaScript DOM manipulation at least a few times first. It turns React's "magic" into something you understand the purpose of, not just syntax you're following.
A Simple Self-Check Before You Start React
- Can you build a multi-section page with semantic HTML without looking up every tag?
- Can you lay it out with Flexbox and make it respond reasonably to a smaller screen?
- Can you write a function that takes an array of objects and filters or transforms it?
- Are arrow functions, destructuring, and .map() comfortable to read and write, not just recognisable?
- Have you manipulated the DOM directly at least a few times — selecting elements, changing content, handling clicks — without a framework?
If most of those feel shaky, that's not a reason to avoid web development — it's just information about where to start. At Study Smart Academy, the Web Development course is sequenced deliberately: HTML5, CSS3, JavaScript (Core & ES6+), then JSX/JSON and React JS — in that order, on purpose — so by the time a student reaches React, the fundamentals underneath it are already solid.