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

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:

Hide NavBar as Scroll down, in less than 10 lines of javascript;

Areeb ur Rub ・ May 24 '21

#javascript #tutorial #webdev #css

Follow:

Areeb ur RubFollow

NextJs | NextJs | Langchain + Langgraph | Python | TypeScript | Love of building things

Comments

[Texx Smith]

I made an account just to chip in on this subject. As a freelancer that works on many teams I've encounter the wrong answer to OP's main question many times, and the right answer a few time. If you take replace the word "React" with any other more advanced technology It's a question that goes back decades. The answers sometimes will tell you something huge about the company that created the team: Do you want to serve the client or your company?

Project: A small network of marketing website and a main website to increase the amount of inbound calls and increase visibility in specific local markets. Client does not wish to update the content themselves in the future.

If you serve the client, you should start with the lowest form of technology that meets their current immediate future needs. In this case, HTML CSS and images or video. There is no need to get Developers involved at all. Talk about easy and cheap updates to the website in the future! Any Jr level web Designer or even an intern can do them. Even the SEO guy assigned to promoting these websites can do the updates. And talk about the trust you've built with them. When they expand or land a big deal with a corporation and/or gov agency and need Development services, you think they'll NOT look at you first?

If you serve the company, you should start with as complicated a framework as your staff and the clients budget will allow. Not only will the initial cost and profits of the project be much higher but all the updates will take a Developer as well. Higher revenue . . . The risk is that the client learns that none of that was needed and they are paying you way more than what it would cost to hire an in-house Web Designer or an independent freelancer to rip the whole thing down and start anew. Do you think they'll ever work with you again?

And yes, of course if the project has higher lever specification the you have to up the tech. for instance if they want their non web design SEO guy to update the websites, then perhaps WordPress is the way to go to best serve the client. But if you're looking to serve the company, you'll probably want to build a whole new framework in React or C or something (or even customize use a proprietary one you've already built).

So that's some input from someone who'd been doing this since the 90's and have worked with some of the biggest names, the biggest companies and the smallest companies and complete unknowns. And seriously no judgments from me about who you serve.

[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.

[Jatinder Singh]

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 :)

[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

[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.

[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/

[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!

[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>

plus complicated jsx

import { render } from 'react-dom';

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

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

[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.

[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.

[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.

[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.

[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.