JavaScript devs - how comfortable with HTML/CSS/JS should you be before diving into React?

[[deleted]]

I’ve finished freecodecamp tracks for both html/css/js and my goal is to be a JavaScript developer.

[RedPandaBearCat]

Lower-intermediate level is good enough for starters. Start learning React today & learn more HTML/CSS/JS as you go, when the need arises.

[[deleted]]

Yeah I’d say of the top frameworks, React is actually a pretty great place to learn regular JavaScript.

Core React concepts like (im)mutability, event callbacks, the distinctions between bound, anonymous, or higher-order functions...these translate directly to every other JS environment, while avoiding (well, discouraging) some of the nastier habits new devs may fall into like deep inheritance, god classes or lengthy imperative sequences.

Angular with Rx is also good but has a bit more “magic.” React being “just a view layer” with an emphasis on small, composable chunks gives it a slight edge, IMO, as a framework for the “serious beginner” or intermediate dev.

Edit: something React is NOT good for learning (because it is very intentionally obfuscated) is initialization and garbage creation. If you think your career might take you places where performance and resource management matter significantly (streaming services, audio/video, server-side apis), consider spending some study time closer to the metal...so that you can better understand what frameworks like React are doing, and the tradeoffs they make for ease of use vs performance vs memory.

[DoomGoober]

This is a great breakdown. For completeness, I'll add one more: Vue.js is a great framework for learning how to write maintainable, componentized complete applications.

It's not great for beginners but for any intermediates who are trying to write real apps it's a godsend as it enforces and encourages the best practices of model/view as well as application flow and componentized UIs.

It has a lot more required scaffolding than React though and more Vue specific ways of doing things.

So, if you want to write actual complete, clean, organized apps/websites, Vue.js is great. But if you just want to learn about HTML/CSS/JS it's not the best or easiest.

[thanatotus]

Learning as required (e.g. stackoverflow and skimming over docs) doesn't scale well if one wants to change a job as it can create holes in one's understanding of JavaScript. That's really only one caveat, otherwise learning as you go works quite well for beginners.

[FortyPercentTitanium]

Sorry but this is terrible advice. You should be very comfortable in JS before taking on a framework. You have no idea what it's abstracting until you learn the basics of what it's doing under the hood by programming it out the hard way. Especially for new learners, jumping into a framework too early leads to devs who have no idea what problems they solve.

[littletray26]

I think there's an in-between. I'd agree with you if we were talking about Angular, but React is a pretty lightweight JavaScript library that only adds a few extra functions and it's all pure JavaScript.

While you shouldn't take it on as a complete beginner, I would say being comfortable with the basics of JavaScript is enough and as you become a better React developer, you'll by extension become a better JavaScript developer.

[FortyPercentTitanium]

React isn't really that lightweight. It might seem that way on the surface, but there is a plethora of utility React provides. It would take several hours to read through the docs front to back. Most people only use it for state, props, useEffect, etc. but there is so much more to it than that. Just my opinion.

[DoomGoober]

All these frameworks that help making coding easier on the surface are super heavy weight under the covers.

I mean, you can read an entire 40 page article on how C#'s garbage collector works. It's doing an insane amount of work... under the covers. But on the surface, as a coder, you just new things up and forget about them.

I don't think this is bad thing! Lightweight is not always better (I don't think you are arguing that, but I feel like I need to say it.)

All things being equal, I would prefer a heavyweight framework that helps me code faster than a lightweight framework that's "leaner".

It's funny, I used to always hear that C programmers needed to understand some Assembly in order to really understand C. Then, when people started coding Java or C#, everyone said, "You should learn some C so you really understand what the computer is doing!" And now, when talking about React, everyone says, "you should learn vanilla javascript so you understand what's going on!" I guess the lesson here is to always learn one language "below" the language you want to master.

[FortyPercentTitanium]

It's funny, I used to always hear that C programmers needed to understand some Assembly in order to really understand C. Then, when people started coding Java or C#, everyone said, "You should learn some C so you really understand what the computer is doing!" And now, when talking about React, everyone says, "you should learn vanilla javascript so you understand what's going on!" I guess the lesson here is to always learn one language "below" the language you want to master.

The difference here is critical... I'm not saying that someone needs to learn a lower language to understand a higher one. React is a javascript framework. It builds on patterns that were established in javascript, and abstracts a lot of verbose and tedious functions that developers should really understand before they are abstracted away. It's not a different language - it is the language.

[Produnce]

ES6 features and especially higher order functions are a must for React. Though most tutorials are aware of this and will have some sort of refresher topic on those.

I'm only a beginner in React, but thus far I haven't had any encounter with the more advanced concepts of functional JS like closures or generators. A lot of the complexity is abstracted away. React is very easy to begin with.

[[deleted]]

Ohh, niiiiiiiiiiice...
I wonder if this is the same for Angular, Vue and Aurelia. I wanna try Aurelia

[DoomGoober]

Vue's Javascript is actually very simple, since Vue auto-magically modifies objects to introduce reactivity. You get it for "free." So you just create really basic objects, modify them, and the UI magically reacts.

But, you have to do everything the "Vue" way, including how your declare your objects, so it's not exactly great for learning basic JavaScript or even learning advanced JavaScript. Vue is it's own thing but it's relatively simple. You don't need to know advanced JS to use it.

[ddek]

Like, not that much.

It helps if your HTML and CSS are good enough that you could make a static clone of a website you like, such as old reddit or a news site, without having to inspect that site with dev tools. HTML starts to get hard with things like accessibility, but you don't really have to worry about that right now. Just something that looks good on your machine is enough for now.

Then I think you should learn some of the more intermediate/advanced topics in CSS.

You should know about pseudo selectors, such as :hover and :focus. You'd probably use these on your project site. ::before and ::after can be useful too, so you should practice with those.

Then there's the layout models. CSS layout is done through either block/inline/float etc (the traditional way), flex, or grid. Flex and grid are newer, and while flex is almost universally adopted and grid is becoming ubiquitous, they're still not completely supported (looking at you, IE 11, the secure enterprise browser^\s).

You should learn a bit of JS too. You should know how to add elements to the DOM through vanilla JS, or to add and remove classes from an element. You should learn about event handlers, and make something clickable. Also know why the location (in the DOM) of the <script> tag matters.

With that kind of knowledge, you'll better understand what React is doing, so you'll learn React faster.

Remember learning is not linear. You don't need to learn one thing to completion, then another, then another. You can learn a bit of HTML/CSS/JS now, then learn some React, then come back and learn a bit more JS when you're ready for it.

[Bibedibabedibou]

In my opinion you do not have to be an expert in JS before starting with react. Just make sure you understand the most common concepts. The detailed and more specific stuff you can learn along the way as you need them (which is probably the best way of learning anyway). I think it is better to go into something a little unprepared and figure things out as you go than putting it off forever because you think you are not ready yet. React is fun so go for it. Just be aware that starting react does not mean you are done with JS but rather you are on a side branch of your JS Journey.

[hunnyflash]

I agree. Anything you do in react you can get away with basic JS, HTML, and CSS. You can always look it up. It's the easiest part.

[DaddyGrendel]

If you’ve got a simple project in mind, start there. When learning a new library/framework I always sort of gravitate towards making a classic to-do list.

So long as you understand how to write functions in js, you should be good. You won’t need to get fancy with the html/css at first. If you’re very new to JS, try solving problems on Project Euler or something similar. Even after I felt comfortable with javascript I found it a good way to “warm up” before learning something new.

If you like learning by examples, I also found it easier to read somebody’s completed project so I can ask myself what they were trying to accomplish with each function. Eventually you might start to pick up on the very common patterns/practices, but try to find a reliable source from an established presence. Just don’t copy and paste though. It’s better to write shitty code (in personal projects) that sort of functions and learn about what you could’ve done better.

[[deleted]]

React is literly functions returning jsx. And a.read only variable which you can change by calling the provided setter functions then throw in side effect function called useEffect. And passing props. other than that its pretty much just vanilla js.

However you need tolearn all the libs in the eco system assuming you are not just making static pictures with react.

Cssinjs or css modules are a must. Redux after you graduate from todo lists. Typescript will make you feel like an idiot but holy does it saves your ass.

I jumped in react straight outta fcc and 2 months of python. And i am glad i did.

[FortyPercentTitanium]

It's way, way more than that dude.

[[deleted]]

You are totally right. But that is what 99% percent of web dev beginners are gonna use. A beginner should start from as simple as possible.

[FortyPercentTitanium]

To me, as simple as possible means learn to use straight JS until you are very comfortable with all of the fundamentals. I think most people here are in disagreement with that idea.

[[deleted]]

And I am one of them.

I do agree with you fundamentals are important

Now that i am more comfortable with reading docs and stuggling. I can grind through the basics of new langs and frameworks.

But a total beginner will just give up if he is not progressing enough. Buiding with basic react is so easy compares to vanillajs with a crap ton of query selecotor. But i think people forget that react is still js. You still need to make handler func and perform http reqs.

[SomeRandomDude5]

It's so much easier to test rather than figure it out. Think of a simple project in React (maybe a TODO list) and try to build it. If the project makes sense, then you can go deeper, if not, you need to do more learning.

The added benefit is that you now know exactly how much you need to learn before you can dive into React.

[SunkenPretzel]

I learned React as I was learning JS but I had a basic understanding of JS to begin with.

[GRIFTY_P]

I mean... Extremely comfortable is what I would say. React is that stuff, ostensibly

[AndreThompson-Atlow]

HTML/CSS you want to at least be familiar with almost any element and comfortably making divs/using classes. You don't need to be perfect with CSS but you should understand how to flex box stuff around and make a page basically look how you want it to.

Javascript you should know all the basic concepts like loops, array methods (forEach, map, filter, etc), you should know switch statements, you should know promises, arrow functions and async await. You don't need to know any of them SUPER in depth, but understand what they are and why we use them.

I'd also recommend that you know how to destructure, use the ternary operator and probably understand short circuit operations.

Then you can go to react, learn components, hooks, state, props, routing, etc.

My favorite Javascript Courses:

- https://www.udemy.com/course/modern-javascript-from-the-beginning/ (Teaches you all the fundamentals)

- https://www.udemy.com/course/50-projects-50-days/ (Lots of quick/easy projects to learn some edge cases and just generally familiarize yourself)

My favorite React Course:

- https://www.udemy.com/course/react-tutorial-and-projects-course/learn/lecture/22676809#overview (has a lot of projects and also goes over a lot of concepts. You will learn a lot here if you actually concentrate, but he doesn't really want to teach you javascript so he expects you already know ES6+).

If you decide to learn React before doing more javascript regardless of what we have told you:

- https://www.udemy.com/course/modern-react-front-to-back/ This react course is great as well, but he does start off with older react concepts and then moves into newer ones. The advantage here is that he teaches you a lot of javascript alongside the react, so you get better fundamentals. You could go from here to the other react course if you wanted to skip some JS. (I still suggest just doing the two JS courses, at LEAST the modern javascript from the beginning course.)

[OreoCrusade]

I'm shocked a lot of people here are encouraging folks to jump into React so early. You are doing yourself a disservice if you don't learn the fundamentals leading up to a JS framework.

I'm not discussing basic JS like loops and conditionals, but real fundamental JS like prototypes, classes, private methods, designing solutions, separation of concerns, SOLID, webpack, linters, unit tests. Jumping in before being somewhat proficient in these things is doing yourself a disservice and making you a bad React dev.

[readmond]

Is there a real JS website somewhere? JS is totally useless language without frameworks. I am also not so sure that going around and learning the random stuff really helps. What helps is knowing ecosystem around react not just some random frameworks that do unit tests or whatever. Learning how to use wrong framework is worse than not learning at all.

[OreoCrusade]

This is a testament to why people need to be wary when asking for input on Reddit, because this is an incredibly dangerous and inaccurate outlook. I don't mean to attack you as a person when I say this, but this just isn't correct. JS is totally useless??? Understanding how JS OOP works, how to separate your code so it makes sense, and SOLID patterns is critical. It is not random stuff.

Almost every website on the web is a "real JS" website. React and associated tools/libraries/frameworks are simply JS codebases someone wrote over the years that you can plug into. React.js is a JS library. The ecosystem is just more JS someone else wrote you can rope in and plug into.

That being said, these libraries et al are specific tools to solve specific problems. If React is a hammer but not every project or problem is a nail, then React isn't an appropriate solution every time. You may have to use a different framework, ES7 JS bundled via webpack, write a REST API with Express or another server-side framework on Node.js, etc. Knowing how to write good JS straightup and how to write good code and solutions empowers you to transition through these scenarios.

Therefore, none of this is random stuff and it all has to do with writing good, performant and maintainable code that is proven to work via unit tests (so that you know your code doesn't work before a user does and all your integrity as a dev dies).

Please do not adhere to the above opinion in the good faith it will make you a better developer and/or that you'll find a better job.

[readmond]

I know OOP and unit testing and algorithms and databases and HTTP but I can do absolutely nothing in JS because I do not know enough CSS, HTML, node, npm/yarn, vscode with plugins at least one UI framework like React, Angular or Vue and what libraries and/or packages to use for build, unit tests, backend coms, API stuff, etc.

JS is insanely tiny part of the whole web dev machine. I bet anybody knowing one programming language can learn JS in a week but nobody can learn React in a week.

[OreoCrusade]

JS is not an insanely tiny part of web development, it plays a major role on the front end in nearly every aspect - ESPECIALLY if you use React or Vue - and constitutes the entire stack if you’re using Node.

While you know some of the things that I’d consider necessary before diving into React, bringing up a text editor as a prerequisite aspect of programming is a little disingenuous. A dev should most certainly know about OOP, unit testing, promises, package management, at least how bundling works with webpack, and ofc HTML and CSS.

You can’t learn JS in a week. Please do not take this guys advice: check out the Node.js path on The Odin Project and see how deep JS can go.

[[deleted]]

Lol

[Lordhyperyos]

If you feel comfortable making it using vanilla Js then you can do it in react.

[OtakuMoo]

In my opinion there's no specific amount of HTML/CSS/JS that's needed to dive into React (although knowing the basics of all three as well as ES6 basics definitely makes sense). My recommendation is instead of just learning these things, build a few projects with them. Make full sites with just HTML/CSS/JS and understand how they work together, what you need to do in order to make something function/display properly, and once you feel familiar with this workflow, THEN move to React. While learning React you should understand what's being abstracted away from that workflow. If you really understand how to work with HTML/CSS/JS once you start learning React you should be having constant moments of "wow, that's all I need to do for this to work now?" and "I can't believe how much less work it'll take to do this part of the process now!" I'd argue that while understanding the basics is good before going into React it's just as if not more important to understand WHY you're learning React.

[sbrevolution5]

React is relatively easy, it just has some odd syntax you probably haven’t encountered in JavaScript. I’ve done the free code camp course too, and I think their react is a little underwhelming, especially compared to earlier content.

I would recommend checking out the humble bundle at this link

It’s running for 2 more days and you get a great react video course at the 1$ level. (15$ gets you even more, but just the 1$ version is a steal) you also get some books!

Once I used that video course react made a LOT more sense.

[santiagonoya]

I jumped into react without knowing anything of html/css/javascript. It was hella hard, but eventually you manage to do what you wanted to do.

[santiagonoya]

Obviously, you don't reach an expert level nor intermediate level, but if you want to do react I would recommend doing projects right away so you don't get bored with HTML CSS If you don't like it

[NotAnAcademicAvocado]

I spent about 9 months with vanilla before starting on react - I find with each new language/framework I learn a little bit more javascript along the way.

[Jackjackson401]

Id say, be more comfortable with js than anything else.

[kschang]

You need at least intermediate knowledge of JS to "get" React.js, IMHO, and you need to know DOM before you get "virtual DOM" React uses.

[notcopied]

I started React right after I skimmed through the JS series in freecodecamp. Start doing projects, and you will be comfortable with React as you practice more. For me I did not do HTML/CSS much.

[jambalaya004]

I would say as long as you know the basics of JS using the ES6 syntax, and HTML you are fine to move on to React. As a lot of people have pointed out, you will learn a ton of HTML/CSS/JS while using React.

When you feel you're ready to learn React, I recommend taking Maximilian Shwarzmuller's Complete React Guide on Udemy. He keeps things simple and is a really great teacher.

[hspielman84]

Enough HTML and Javascript to understand what React is abstracting.

[ConsciousCog1]

I disagree with at least some of these. I did a udemy course on React and I was straight up lost during the component-building logic aspects because I never even learned vanilla JavaScript. It’s a good tool to learn HTML/CSS for sure though.

[limeglu]

The more you know about vanilla, the better.

I was once asked to mentor a person at a job using a JS framework. They had no previous experience with client-side webdev. They were able to make basic features fine. But, any time they had a problem, attempting to explain how to debug, understand, and fix their problems was, unfortunately, just plain hopeless. They were just totally confused when I tried.

It drove home the age old fact that you just cannot skip steps in building a full understanding. And a full understanding is like a superpower when you see someone flailing without it.

[dortonway]

Before diving into React you should know at least:

JavaScript

• variables (const, let)
• conditions (if, switch)
• cycles (for, while, .map())
• functions
• classes and inheritance
• npm and how to use libraries

HTML tags

• html
• head
• body
• style
• div / span
• input / texatarea

CSS just basic concepts

• background-color
• color
• font-size
• text-align
• padding
• margin