DEV Community

loading...

Why to use React if HTML/CSS/JS works fine?

Areeb ur Rub
18 | coding since 2016 | Arduino | Python | JavaScript | HTML/CSS | Love learn making things
・1 min read

Few minutes ago I was checking the tag section of react on dev.to/t/react , and I notice that React is just like simple JavaScript with whole bunch of create element things.

My point of discussion is, when React should be used.

  • If we take something simple like a Todo List then should we use a react app or do it with use of simple HTML/CSS/JS.
  • What benefits a React App app gives over simple HTML/CSS/JS.
  • Are people hyped about React because it's made and used by Facebook.
  • How to choose wisely when to use and when not to use react.

Read also:


Follow:
areeburrub image

Buy Me A Coffee

Discussion (31)

Collapse
yugely profile image
yugely

I don't think many of you kids have been around for the REAL vanilla JS. JQuery file debugging type madness. That said, these frameworks do a very good job abstracting the work from the end user. People normally use it for time/convenience/opensource community support and because it makes things look pretty.

I should add though that with all this prettiness comes some prices, JS, if anything, is a stochastic templater at heart. Uglified files, Minified files, single letter naming conventions and an overwhelming amount of scaffolding often obfuscate some real technological concerns. Just go look at some of those spaghetti JS files around, there is no one alive who can sit there and tell me they know whats happening in that code and JS writes directly to data registers.

Thats just something to keep in mind, I think these frameworks have a time and a place, but so does having a fundamental understanding of the concepts that led to this point.

Collapse
josephmcgreene profile image
Joseph McGreene

Considering your first and last sentences, what are the kinds of fundamentals you're saying are important? Do you simply mean JS without any frameworks/libraries? Or do you mean some kind of old version of JS that made far fewer abstractions? Or do you mean it is important to learn to understand that spaghetti JS you referred to?

Collapse
yugely profile image
yugely

I think JS has come a far ways from where it was. When I talk about fundamentals, I'm talking about understanding the concepts behind asynchronous and singlethreaded communication. Understand the differences between parallelism and concurrency. And at a very basic level, understand how paths work and how buffers work.

I don't think people need to use JS just to use it, its fun, I'll admit. As for the spaghetti, I think its important for people to understand whats happening especially with the DataBuffer and SerialPort capabilities of JS. When I talk about spaghetti, I more so am trying to convey that if know one knows what a script does, how can we know its not doing anything nefarious? I've gotten pwned big time before and the people who did it injected Root CA's through my GPIO Serial Ports, I got live breached through DCOM ports with SID's I've never ever seen before. My head was spinning. I don't want people to go through that so understanding how something works conceptually at a fundamental level is being present and cognizant of your environment. Because, I feel like a lot of people just are like "oh computers! I pay someone to handle that!" when we are quite literally compelled to use various government systems built by people who didn't really know what they were doing (and at no fault of their own). Lastly, I think if people generally were more prudent and aware about the tech aspect of our lives, we would be in a better spot with stopping a of malware targeting vulnerable individuals, like grandparents. Probably a lot deeper than you wanted, but thats my honest take.

Thread Thread
josephmcgreene profile image
Joseph McGreene

Not at all! I'll take all the info I can get, particularly as a rookie. This is all interesting at least and important for me to know at most, and even if it is just the former then I now have things to learn more about.

Thread Thread
yugely profile image
yugely

lol, we're all rookies, kid. If you're the smartest man in the room, its time to find a new one. I'll be on here, feel free reach out if you got something you help with. I'd be more than happy to talk to impart what I know. Building cool stuff with people who also wanted to build cool stuff is why I got into this field. It's why I like it, its how I hope to contribute to it.

Collapse
areeburrub profile image
Areeb ur Rub Author

You mean react make the code more readable but basic fundamental of JavaScript should be cleared first.

I want to know what you prefer Vanilla JS or React JS, what you feel easier to work with regardless to make it readable for others.

Collapse
yugely profile image
yugely

Vanilla js. I use a lot of recursion and functional programming and if I need to get something down on paper I like JS as a "sketch pad" as I don't have to recompile after every tiny change. As for readability, to the framework its readable. But outside that, no. Its still on large generated spaghetti. Not ragging on it for that fact, it just is. As for React, I personally wouldn't use due to the URI security concerns I have with it. I developed medical applications using nodejs for embedded systems and as much as I liked the project, JS has no place around the embedded world. It just doesn't, there are too many error for a lot of mission critical applications. Thats why the Military on large still uses a x86 everywhere critical. Northrup Gruman and Lockhead Martin get chubs if you know the instruction sets well.

Thread Thread
frustr8dlec profile image
Computing Staff

It sounds like you have a whole Dev article you could write about this and issues you highlighted before. I would be interested to read about your experiences

Thread Thread
yugely profile image
yugely

I did a couple write ups today, one on regex and the other on a recursive and dynamic, async matrix builder you an analytical pen testing client I scrapped recently. I'm still trying to get the writing part down. These were the first tech tutorials/article I wrote ever. I'm planning on starting a small multi-part series on Kotlin. My story is honestly so absurdly outlandish that I don't know how it would be received.
I literally had a $50bil company try to sue me over tweets and get spooked when I accepted and initiated pro-se proceedings. I also uncovered a massive illegal surveillance campaign being carried out by the NSA and Verizon wireless where I have an open com channel to how they scrap their customers phones. But I've had a lot of extremely strange and unfortunate circumstance opportunely come up when attempting to launch internal federal investigations into regulatory agency malfeasance. So man, if I had the right opportunity to tell it to the right people I totally would.

Thread Thread
frustr8dlec profile image
Computing Staff

I wish you very best of luck my friend and hope one day you get a chance to tell it, all the very best, Stephen.

Thread Thread
yugely profile image
yugely

I think it’s a better story to continue building cool stuff and talking to cool people in a dev community like i’m doing now. Take it easy, Stephen. It was a pleasure talking to you

Collapse
vonheikemen profile image
Heiker

How to choose wisely when to use and when not to use react.

As someone who learned web dev right before the frameworks took over, I got to say that I have never felt the need to use react.

Here is my thought process when it comes to choosing a tool.

  • Is this project literally a single index.html page? Okay, maybe I could do this without any tools.

  • So this project needs two or more pages. Can a tool like eleventy be enough?

  • Is this a data driven project with lots pages? fine, could I do this with laravel?

  • So this site will have highly interactive parts. Client side javascript can't be avoided. But before going full "React app", could I grab preact to make just the components I need?

  • I need a full on "web app" with lots of interactivity. Okay React, you and I are going to build some stuff.

Progressive enhancement is the key thing for me. I don't like adding tools if I don't need them. I still think "do I even need javascript for this? And if so how much?"

The thing is that the javascript community (or at least a very vocal part) has shifted the focus from websites to "apps". They are so comfortable with the tooling they use to build apps that they use for websites too. It isn't always bad, there are some good tools. But I bet someone out there is downloading 500mb worth of js to build a landing page, and that is where I think we have gone too far.

Collapse
josephmcgreene profile image
Joseph McGreene

POV: someone who has only been studying web development for a year, not professionally (yet).

To speak to each of your points in order...
1/2. A to-do list could theoretically be pretty simple. Using vanilla JS + HTML/CSS might be do-able. But making user interfaces is what React excels at. You could probably make the same app with fewer lines of code and have the code be far more human-readable and easier to work with if you use React. And if the project is huge, like, idk a massively popular social media site, then managing it all with vanilla JS would be a nightmare.

  1. No matter one's feelings about Facebook as a company, it is hard to deny that there are some great developers there working on making React the best it can be. So are people HYPED about React BECAUSE of Facebook? I don't know, but since Facebook made React, it is hard to separate the two regardless.

  2. Like I said, I am fairly new developer who is currently just a hobbyist, but my thought is that if you want to make an intuitive user interface with code that is easy to read and work with, then React is your friend. If you want to make a video game or something else? Idk, it seems like there are probably better avenues to go down.

Collapse
mukuljainx profile image
Mukul Jain

For static websites where there is not much of interaction or very less, Vanilla JS is totally fine and should be used instead of a framework! As for a user a framework mean more load time (downloading + parsing). But for a complicated app for e.g. Dev.to itself creating it with only JS will be a headache and a lot more work, you might end up creating mini-React! to ease your work. Even with JQuery it's totally possible but it will be harder. Easier than Vanilla but harder than React. You can think of React as a lot of helper functions making the development easy!

Collapse
pengeszikra profile image
Peter Vivo

I have only to choice: Vanilla JS + CSS - that for really size dependent small app for example : banner where you can optimize much as possible. jQuery total forget - really don't used long time ago. Every other case - the React is really small and fine choice: that means a single JSX file plus standard index.html like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>- - -</title>
</head>
<body>
  <div id="base"></div>
  <script src="./index.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

plus complicated jsx

import { render } from 'react-dom';

render(<pre>react-base-hello-message</pre>, document.getElementById("base"));
Enter fullscreen mode Exit fullscreen mode

May you found really slim react base working setup

With nice parcel boundler setup which is also good for Vannilla JS if remove react and react-doom from packagejson

Collapse
mukuljainx profile image
Mukul Jain

No matter how small React is, it will still bring something do the table and it's about 41kb gzipped (react + react-dom) thats a lot, so a plain JS is better for small work like you mentioned btw also checkout preact (never personally used) it's way smaller with and sufficient for a lot of use cases.

Thread Thread
pengeszikra profile image
Peter Vivo

Yes preact is smaller react, and I work with them around 3 years, and its fine! But in my use case : complex scientic desktop application that few kb. isn't count, however larger React compatibile libraries still important.

Collapse
keogami profile image
keogami

One thing that we can be sure of is that: its not about the user (or user experience)

To the user all matters is that, things should look familiar and do familiar things on interaction.

So its all about the dev's convenience. Why spend time doing things that have been done before? Why take time to build abstractions ourselves?

And its not necessarily a bad thing. By not wasting time doing stuff thats been done, they can spend more time doing what really matters; that is, appease the user. (In theory, at least)

As for the benefits that frameworks give over vanilla webdev... its easier to just head over to their website.

At least, when it comes to coding practices and code maintainence and readability, the tool itself isnt much a problem (unless the tool is named PHP, then it can suck my a$$). ahem Every language and tool has a set of idioms and best practices defined for it. So, if readability and practices is a concern, its mostly a matter of preference.

Disclaimer: i have never used a framework myself, i have only ever used vanillaJS

Aside: i have a simple shooter game in JS that uses vanillaJS only (duh). No framework or external library.
Link: keogami.github.io/shooter/

Collapse
ashkanmohammadi profile image
Amohammadi2

I belive if you want to learn fundamental concepts you should start with vanilla JS but as your projects get larger and larger, you'll definitely need a framework to structure your code in an organized way.

React helps with structuring your code in components and is useful when you're building complex UI elements.

Collapse
jleewebdev profile image
Josh Lee

If you just need a make a small button or make a small change using JS, then just use JS. But when you start making more complex apps, you'll see that your code will get very messy very quickly.

Before learning a new technology, I advise to "to do it the hard way" first.

Go make a todo list app with JS, html, and css. See how quickly it can become a headache.

Then, build the same thing with a framework. You'll quickly realize why people use them when you see how much more efficient they are.

Collapse
adam_cyclones profile image
Adam Crockett

Righto let's firstly say, html CSS and JavaScript are not being replaced. You gain standardisation which is the true price you pay for vanilla homebrew work. The appeal of creating a standard is so alluring! I learned many years ago to rise above that feeling that I could write a standard, join the community, hire from the community that know this standard. It's often easy to draw conclusions like the masses are attracted to a particular product, so the smaller Indies must be he mark of quality, it's like boutique and the billionaire, you might assume that the little guy cares and the billionaire doesn't... Sometimes yes, but I would wager that engineering at Facebook is full of lots of little guys who don't represent the org as a whole, they have backing which means what was developed must have been impressive?

Collapse
areeburrub profile image
Areeb ur Rub Author

Yeah, means people who are Hyped for React are mostly beginners and Facebook may be a reason for that but mainly the reason is the hype because most of the beginners want to say that 'yeah I know React' or Vue.js or any .

It is being used not because it should be used but to show 'Yeah! I know it`.

I can't say for anyone but some feelings like this moves in my mind as a beginner.

Collapse
nicozerpa profile image
Nico Zerpa (he/him)

You're making a great point! There are many situations in which React is not necessary and using just HTML/CSS/Vanilla JS is perfectly fine. It's important to choose the right tools for the job.

However, I think the code samples on dev.to/t/react are just fine. The purpose of those samples is to explain a specific library, concept, or feature. They have to use simple snippets so that readers can easily understand what they're trying to teach.

I think React (or Vue.js, or Svelte, etc) is a good choice for web apps that do a lot of DOM modification (i.e. dynamically changing the HTML elements of the page) that depends on the application state.

Collapse
cjsmocjsmo profile image
Charlie J Smotherman

is a tool in my tool box. Choosing which hammer to use on a nail is up to you some times you need a big hammer sometimes you don't. I still have a few project running jquery and there doing just fine. So up to you what you want to use. You want a challenge use flutter, no html, css, or javascript is used. Go explore there's more to life than just react.

Collapse
areeburrub profile image
Areeb ur Rub Author

Hmm, yeah I got it and sure I will try flutter web currently I am in the learning Flutter.

Collapse
niorad profile image
Antonio Radovcic

on 2: The biggest advantage is, that you can benefit from common knowledge when setting up a team of devs. Frameworks/Libs like React/Ng/Vue/etc. do bundle a set of patterns, best practises and popular libraries, and those are usually known with developers. And if not, there is already a big body of learning-material available. So getting up-to-speed is much more convenient for popular frameworks than for custom-build tools.

Collapse
bcowley1220 profile image
Brendan Cowley

There are advantages and disadvantages to either side, it really just depends on the full requirements of the project that you're working on. Using the Todo app has the example: what if you wanted to add in user authentication, integrate with your calendar API, and make it an SPA?

React is just a tool, just like angular and svelte are. I can give you an easy answer for when to use a framework... When you want to build a single page application. It is simply not worth the fuss to do it by hand in vanilla. Everything else after that is subjective, and frankly more up to personal preference than most would like to admit.

You can achieve the exact same results in vanilla that you can building an app an angular svelte, Vue, or react... And they will all have their individual hassles and problems, it just depends on which ones you want to deal with.

Now before I start getting bitched at, there are tasks that are immensely easier to do and react or a state-based framework then it is to do by hand... But it is a trade, don't fool yourself and thinking that you are coming out ahead.

Collapse
areeburrub profile image
Areeb ur Rub Author

Okay, so you say React is a tool which make things easier and it's totally depends on me what I want to use.

Collapse
jsbimra profile image
Jatinder Singh • Edited

When we get into the complexity of application building and get most performance boost over the vanilla JS or other scripts available in the market, React is much much better approach over the Vanilla JS that's why it was created to serve the purpose, but sometime an easy click or style changes with new frameworks or library is the hardest things to do, then we think why not simple HTML CSS JS is better! :) Its simple and same time very complex. but future thing is and should be to make things easy of easy, choice is ours :)

Collapse
jjhiggz profile image
Jonathan Higger

Sometimes it feels like event-driven changes get messy very fast and become hard to manage.

For example lets say you do a simple to do list app.

In JS it goes like this

User clicks form -> event listener is fired -> finds a dom element on the page -> adds the todo

Then if you want to maybe filter todos
User clicks add button -> event fired -> finds all the todos inside a dom element -> filters those elements down -> replaces all todos inside a dom element

In react its more like this

you have a state of todos that is an array of objects . For example one todo might look like { task: "go to the store" }. When that array changes the children component change too, or react to the change in state (hence the name).

User clicks add button -> event fired -> set the state of todos

User clicks filter button -> event fired -> set the state of todos

That's all the logic you need. In this small example its not a big time saver, but in other circumstances it can save a lot of effort once you get good at it.

ALSO you can basically incorporate HTML and Javascript seamlessly using React's Templating language(JSX is what it's called).

You can still make just as good of projects in either way though, it just might be easier in react, especially if there is a lot going on. There is also plenty of alternatives to React. The smart people I know love a library called Ember, but I've never used it and apparently it's kind of hard to learn. Also there's Vue and Angular

Collapse
kr4idle profile image
Pete Steven

I don't think it matters that much what library or framework you use as long as you understand the core technology html/css/js. Most of the times the project stack is already decided by the client or the company you work for.

Besides learning the core stack really well, it's also great to use tools that speed up your development process. For example with Desech Studio you can just import your figma, sketch, adobexd design file, and then you integrate with react, angular, vue and even design systems like material design and you're set.