DEV Community

Muhammad
Muhammad

Posted on

Why use React instead of JavaScript HTML and CSS

Top comments (20)

Collapse
 
johnmunsch profile image
John Munsch • Edited

Even if you use React, you're still using JS, HTML, and CSS. What you're getting with React is a library that lets you create custom components.

Unfortunately a lot of the replies you're going to get are from people that assume you cannot have components without the use of React, Angular, or Vue and that's simply not true anymore. Most of the browsers now support custom elements (for example, "<my-fancy-search>" or "<pie-graph>") and the few that do not can load up a polyfill and get the same ability.

What you probably want to do is build components to break up your page into chunks of code which are both easier to debug and potentially easier to reuse across pages. You can use any of the popular libraries I mentioned above to help you do that or you can start using Web Components to do the same thing (for example, the current version of YouTube uses Web Components and the Polymer library to make it easier to write the components).

That component style page design is not unique to any of the libraries but it does make it much easier to conceptualize building a page. It allows you to say, what if I could build a page using elements which make sense for my page ("<home-page>", "<about-page>", "<user-page>") and sub-components on each of those pages to break them up rather than always having to start at the same fine grained level of abstraction that is "<div>", "<span>", "<input>", etc.

Collapse
 
ecjep profile image
ecjep

Hi, you are right.
and i wish to add one important thing that people ignore :
React, backbone,angular and so on ... are just "Layers" on javascript.

My advice to every one : learn javascript;
no lib or layer will do you any magic...

angular was made as an extention to JAVA GWT, it was meant to help JAVA developers to work with gwt, which for now is quite dead :(

d

Collapse
 
alemvik profile image
Alemvik • Edited

Exactly - frontends have too much magic and are heavy. Stick on WebAssembly (blazor, SignalR, gRPG), CSS (flex boxes), Javascript. If you need, feel free to scarvage other frameworks (e.g. Formantic, Bootstrap, w3.css) and bring the code to you. You want to (really code and control) or (you want to just apply recipes / procedures and be stuck in a framework) ? Saying that, I use scss, jquery lol. Bottom line, I suggest you get proficient in css, html5, javascript, jquery and then you do what you want, but saving time is not always true in the end. web frameworks have their own bugs (plenty). Saying that, I like asp.net core a lot lol.

Collapse
 
gatopeich profile image
gatopeich

I wish I had known better when the newly hired Front-end "developer" insisted in that our perfectly working HTML5+CSS+Javascript app was "old" and we should start an Angular project from scratch.

I saw issues with discarding existing website that was working fine (and fast!), only the looks of it needed to be changed, but he was mad about it. I had to allow him to work within his knowledge, so Angular was it.

Months later he was struggling to maintain a code base of hundreds of files. I looked at this in horror reminiscent of J2EE times: 90% boiler-plate code, many many "components", an ever-growing bug list. Essential features present in the "old" Web UI were just not portable to Angular because they were not "the Angular way".

Today I am checking Vue.js as a potential way to simplify our "old" Javascript, and maybe Web Components if our UI becomes more complex (than I can foresee, really).

Collapse
 
sswam profile image
Sam Watkins • Edited

Try Svelte, it's by far the best front-end framework I've seen. It actually makes things easier rather than more difficult, which is more than I can say for the other frameworks I've tried. There is a very good online interactive tutorial which doesn't take long, and gives a great overview of what Svelte can do.

Thread Thread
 
gatopeich profile image
gatopeich

Thanks I am trying it

Collapse
 
mraza007 profile image
Muhammad

True !!!

Collapse
 
rhymes profile image
rhymes • Edited

React all the things after you Vue them under an Angular light.

Sorry, it's been a long day of programming :P

Collapse
 
mraza007 profile image
Muhammad

hahahaha

Collapse
 
aravindballa profile image
Aravind Balla

React is a UI library which helps you manage a lot of things easier with features like Virtual DOM(normal DOM updates are slow), handling data with states, component-based structure etc.

Here are some more reasons why you might want to choose React.
coderplex.org/learn/reactjs/Choosi...

That's a learning guide for React which might help if you starting out on React!

Collapse
 
mraza007 profile image
Muhammad

Thanks

Collapse
 
ben profile image
Ben Halpern

React is a fairly brilliant layer of API for managing how things change on a page or a part of a page.

If you want to check a box that updates a number, you could do it with JavaScript and the DOM pretty easily, but now your page is in a new "state", and managing that with any complexity is a real nightmare.

React allows you to manage state and render different outcomes based on what the state is. It's a real joy if you get it right.

That being said, there are definitely a lot of instances of people using React, or whatever their favorite view library for everything, introducing build-step complexity and possible performance hits when it's just not worth doing so.

If managing the state of a page is the challenge you're facing, React is a great choice.

Collapse
 
thejohnstew profile image
John Stewart

Everything Ben said! Also if you are interested in using React for your portfolio take some time and get to know Gatsby.js. I recently rebuilt my website in it and it really is amazing what you can build.

Collapse
 
mraza007 profile image
Muhammad

I was thinking to revamp my portfolio in React

Collapse
 
aravindballa profile image
Aravind Balla

I built mine in React. Rather in GatsbyJS, which is a static site generator.

This is the repo -> github.com/aravindballa/website2017

Thread Thread
 
mraza007 profile image
Muhammad

Looks Cool

Collapse
 
nbageek profile image
Patrick Minton

The question is a bit confusing since React is Javascript, html, and css.

So I guess maybe you are asking "Why use a framework instead of just writing things yourself?"

And the answer is probably that the framework saves you a lot of trouble -- it's got a whole slew of functionality that you would otherwise have to manage yourself, like efficiently re-rendering when state changes, templating, etc.

If your page is simple enough, maybe you don't need that overhead. But once you reach a certain level of complexity, this can save you a lot of time.

Collapse
 
mehdibenhemdene profile image
mehdibenhemdene

Your post made me think of the old days .. The days where JQuery ruled. Do you remember that 600 lines javascript file ? The pain you have to go through everytime there's a bug or an anomaly. Well all of that was made easier with the appearance of frontend frameworks / library (and I'm not talking only about react). The huge plus about them is :

  • You don't have to repeat the same things over and over again (I'm aware of the addition of Custom Web Components but it's still not supported by all browsers, unfortunately..)
  • Much, much faster development process. Yeah, you guessed it. Try to build the same thing using vanilla js and then a frontend framework you're familiar with.. you'll see!
  • Optimization : Pretty much everything in any frontend framework is then 'bundled' into vanilla javascript, html and css. But the difference is the optimization. These frontend frameworks were built by, may I say, js masters. And don't forget about the most important rule of programming : If anyone else has done it, don't do it (aka. don't reinvent the wheel). And yeah I know that there are many cool vanilla javascript libraries, and you can still use them in your frontend app.
Collapse
 
sswam profile image
Sam Watkins

I'd rather re-invent a few wheels than use a monstrosity of a system which, even for a fairly simple project, pulls in more than 1,200 "node_modules", taking up nearly half a gigabyte of space. At least when I reinvent a wheel, I end up with a fairly nice custom-made wheel, not an unholy "Howl's moving castle"-style contraption made from bits and pieces of every half-baked wheel that was ever pushed to npm. I'm just grumpy because some stupid issue with broken npm dependencies and TypeScript wasted a few hours of my time today. (But in all honesty, these frameworks actually do suck pretty bad, we can do better.)

Collapse
 
abhigautam23 profile image
Abhi Gautam • Edited

Hey, I am data engineer and have a sound knowledge of python so banckend can be done with django but for front end development I am bit confuse some of them are saying learning html, css or javascript is helpful and some of them are saying that start learning react js directly would be easy. I have never written a single code in html, css or javascript