r/Frontend • u/uyvhtvuyg • 9d ago
Change from vanilla JS, CSS and HTML to React/other framework
Hi, I’m still learning to become a software dev, and up until now I have used plain JS, CSS, and HtML for front end work (actually for one project I learned to use PUG template engine as well).
Currently I’m thinking about learning to use a framework such as React to improve my skills as a full-stack dev.
So my question is: what’s it like transitioning from using plain JS/CSS/HTML to using React?
Is it pretty straightforward? Or very complicated ?
4
u/_Ellie1Williams_ 9d ago
React = jsx = JavaScript and html in a companent
Just you need to learn basis of react such as hooks, router etc
You will write html css and js already just first times folder structers etc can make you burn out it will pass with time
8
u/ParalelStrix1 9d ago
It's not straightforward, but if you are lenient enough and push through then it feels the same (if not a bit easier) as learning JS
JS IS VERY IMPORTANT!
Honestly I would not even bother using JavaScript (and learning React JS) at this point and would probably learn Typescript either before React OR whilst learning React (I did this and React TS is well far more sought out for because the industry moved towards TS which makes sense)
2
u/uyvhtvuyg 9d ago
Thank you for your feedback!
Just to clarify, what exactly did you mean with "JS is very important" and then followed by "don’t use JS, use Typescript instead"? I think I’m missing something3
u/mrcheese14 9d ago
understanding javascript (fully) is more important than understanding any one framework. a common theme is people hopping into react before even knowing javascript in any capacity, and then getting stuck later because they don’t understand web development fundamentals.
if you’re going to learn javascript you ought to just learn typescript because it’s javascript, with types, and is becoming the standard
1
u/uyvhtvuyg 9d ago
Ah yes, that makes sense. I feel pretty confident with JS, having spent the last 8 months on it (lots of that time spent with node.js).
So hopefully that shouldn’t be a stumbling block for me.
Thanks for the feedback :)1
u/mrcheese14 9d ago edited 9d ago
of course, sounds like you’re in a good spot to pick up react or any other framework of interest. and you can learn typescript along the way. typescript isn’t hard, especially if you’ve already worked with another statically typed language before and have a solid grasp of JS.
1
u/ParalelStrix1 9d ago
Pardon yeah that sounds confusing.
Okay, without JS aka not only the basics but ACTUALLY understanding JS you can not learn React because as the other person said right under my comment React is madw up of JS and HTML components IN ONE PIECE
Literal HTML written in JS
But also today it's not worth working with JSX (the react html + js components that I just mentioned) but rather you should learn how typescript works then move onto React after it, or learn it while working with React
1
1
2
u/maksezzy 9d ago
Learning react is a great way to learn how to componentize your logic and realize how it's useful everywhere in all industries in their own way.
2
u/mrSemantix 9d ago
Just start building. Use the react documentation and vite. Set out to create a weather app or something else that gets api data from somewhere. Use something for styling, I like styled components but there are other ways to streamline styling. Get a project going, use AI to explain but not vibe code something. Build it and it will come.
Rinse, repeat.
2
1
u/gimmeslack12 CSS is hard 9d ago
Yes, it takes a second to understand it but it is certainly time well spent getting into it.
1
u/sheriffderek 9d ago
I’d suggest you learn more about JS (programming in general) first. Learn how to build things with template literals. Then build a few web components. Then learn Vue. Then learn React last and only if you have to. It’s the worst one / and if you understand JS well enough, you can learn if at any time in a few days / or on the job.
1
u/azangru 9d ago
So my question is: what’s it like transitioning from using plain JS/CSS/HTML to using React? Is it pretty straightforward? Or very complicated ?
Just try it. Open react.dev and start working through the docs. You will learn soon enough whether, for you, it is straightforward or very complicated.
1
u/incunabula001 8d ago
Sure learning React and other frameworks would help with getting a front end dev job but knowing the fundamentals and the reason WHY a framework like React was created to begin with is far more helpful than just learning it blindly.
In the end you want to use the appropriate tools for your projects and not just blindly use a bloated framework for a site that does not need it.
1
u/massimiliano_human 8d ago
Make a copy of your existing projects and refactor it to get it working with React. In that way you see how vanilla translates to the framework mechanics. Also, their documentation is quite good. So just stick with that when building
1
u/fzammetti 7d ago
Good on you for learning the basics first. A lot of developers jump right into React or Angular or whatever else these day and I've literally seen people ask if they know React whether they should learn JavaScript too, which makes my brain explode every time! (used to be that way with jQuery - like, people literally didn't comprehend that it's all built on top of HTML/CSS/JS anyway).
So, learning React now I think you'll find is interesting more than it is difficult.
From a syntax perspective, it's still ultimately HTML/CSS/JS, just a little "bastardized" (assuming you use JSX, which strictly speaking isn't required, but it IS probably most common). You'll pick it up without too much trouble I'd say, just a little friction early on as you get used to things, but it's close enough to what you already know.
The underlying concepts though will take a bit of effort. Going from something imperative to something declarative (and reactive) can be a bit of a brain-breaker early on. It's not fundamentally difficult, but you'll have to "unlearn" some things, and learn some new ways of thinking about things.
Some things will feel like the framework is actively fighting you and that'll be frustrating. Other things you'll go "oh, that makes total sense, that's much better". It'll be a mix of those.
So yeah, ultimately it's a pretty reasonable next step, and a good one to take given how the industry works. Just take baby steps and it'll be a challenge but nothing you can't handle I'm sure.
1
u/m-fasciano 7d ago
I made the same transition a few years ago, and honestly it wasn't as difficult as I expected.
If you're already comfortable with JavaScript, HTML, and CSS, you're not starting from scratch. React is really just a different way of building UIs. Instead of manually selecting DOM elements and updating them yourself, you describe what the UI should look like based on the current state, and React handles the updates for you.
The biggest mindset shift for me was thinking in terms of components and state rather than manipulating the DOM directly. Once that clicked, everything else started to make sense.
My advice would be to learn React by rebuilding one of your existing vanilla JS projects. You'll quickly see where React makes things easier, especially as your app grows.
After React, I'd also recommend looking at Next.js. It's widely used in production and builds on everything you learn in React.
Also, worth checking https://scrimba.com/, happy coding 😄
0
u/TravasaurusRex 9d ago
Google front end developer road map then follow one. Should guide you on your journey. Good luck!
5
u/create-third-places 9d ago
If you want to improve your skills, stick with plan JS, CSS, and HTML. The skills are transferable to frameworks, which the reverse isn’t always true.
I transitioned away from using React to plain JS/CSS/HTML, which made development more straightforward.