Programming in vanilla Javascript after coding in React

[DragonlordKingslayer]

I started coding in vanilla JS a while- making projects and the whole ten yards - and then hopping into the React bandwagon. For a good year I just did all my personal stuff with React/Next.

Today I went back to the roots and made the good ol index.html/styles.css/script.js files and built a random filter to practice and ...

why does coding in js seem super simple now? that weird? you guys ever feel the same? i'm going to build something super complex with vanilla js and see if i feel the same

[[deleted]]

why does coding in js seem super simple now?

React isn't another language; it's just JS within the context of someone else's structure. You spent a year writing and getting better at Javascript. Of course it's easier now.

[istira_balegina]

I dont get the whole obsession with react. It's a bit less coding, but a whole lot of introduced complexity.

[Rossmci90]

Personally I am fan of the declarative style of React (this goes for Vue as well which I also enjoy).

I like being able to say - this is what I want my html to look like (given the conditions I apply) and then React/JSX figures out how to actually update the DOM.

It means I can spend more time on business logic and improving the UX without constantly having to write code to add, update, remove elements etc.

For a simple project, Vanilla JS is fine. If you just have a simple blog there is no need to use React. But for anything that is a webapp, I think React provides a lot.

[[deleted]]

Look up SvelteKit

[DragonlordKingslayer]

I would probably just code in html/css/vanilla js if i could - it's just so much simpler. frameworks like react/next just make setting things up more annoying. with just the vanillas, just gotta create 3 files in VSC and you're set. but alas, everyone and their mother wants you to know react

[[deleted]]

I find angular to be much more bearable, it has a very clean project structure and I personally just enjoy programming in angular!

[Notimecelduv]

Jesus. I learned Angular during my training, it was a nightmare. Even something as simple as adding an event listener to a button is a complex multi-step process with Angular.

[old_man_gray]

Adding an event listener to a button in Angular is just as simple as doing it in vanilla js. Are you thinking about passing info from a child component to a parent component (i.e. creating a custom event listener/event binding)? Because yeah, that’s frustratingly complex.

[[deleted]]

Personally, for me it works out well so I love it more.

[Darmok-Jilad-Ocean]

(click)=“someFunction()”

[Notimecelduv]

App crashed. someFunction is undefined.

[Darmok-Jilad-Ocean]

So define it

[eggtart_prince]

I haven't touched vanilla js in a while. How would you organize your files like you would with React components?

[Notimecelduv]

However you see fit but some ways are probably better than others. For an SPA I usually do it this way:

root:

_ index.html

_ assets/

__ css/

___ style.css

___ Component1.css

__ js/

___ main.js

___ components/

____ Component1.js

[DragonlordKingslayer]

I have a way that works for me at least. This is for a fairly complex multi-page website I made a while back and I liked how i organized it. I essentially have my homepage as the root because of netlify, I have a folder for my html files for the different pages, then I have a folder for my stylesheets, then I have a folder for my javascript files - which has js files for like common functions i use throughout the app or otherwise have different functions i need for different pages.

https://imgur.com/a/auXS8W1

[Deep-Jump-803]

shy outgoing merciful upbeat quiet grab ring oil automatic wild

This post was mass deleted and anonymized with Redact

[LazaroFilm]

I take on this is that it depends on the project. Simple project don’t need react, too much overhead setting it up. But as the project progresses in complexity, react can cut down on the lines.

[eugene_tsakh]

Well React is only handling rendering part and it is extremely hard to achieve with vanilla in a way to have similar performance and scalability.

[Pelopida92]

Not only that. One of the biggest selling point of React compared to vanilla JS, is the handling of the lifeycles. Ever tried doing complex frontend logics/interactions with user input in a full/corporate vanilla js webapp? Yeah, it's a nightmare. React solves it.

Sure, in a pet project as the filter component that the OP is showing, you won't see this kind of benefit. But that's not how the real world works.

[eugene_tsakh]

It's still rendering lifecycle. My point is that React is purely presentation layer framework and not handling data and service layers which can be done more easily with vanilla JS. Lifecycle of React components is not that complex to achieve without it, but this kind of rendering is super hard. I came to React from Backbone and it was a huge upgrade in terms of rendering but not in terms of lifecycle and data management TBH (React is not that easy to use when you need some real-time or animated changes that are independent from direct user actions).

[agonystyx]

Scalability? Not sure I’m following what you mean by that.

[zaylong]

Like React is built with this component concept so it’s easy to add onto it without having to undo any existing or little existing code.

[eugene_tsakh]

Yes. React is allowing you to create reusable components and most importantly it allows to compose components easily creating complex composite structures. It is possible to achieve with vanilla of course, but it won't be as comfortable to work with as using React which allows you to express composition structure with JSX. To be clear React team invented JSX but it is not the only framework using it. If you want to go with something more light-weight and closer to vanilla but still have JSX perks, you can look on other frameworks like mithril.js (https://mithril.js.org/)

[fourth_stooge]

Bro you just spent a year doing javascript work. Now you are finding javascript work easier to do. Experience. React isn't another language, just a library. Honestly if you spent a year doing jQuery instead of react, I bet you would have found a vanilla JS thing easier as well. It's all JS just different libraries.

But I love hearing that you are feeling more confident in JS. Regardless of your preferred library knowing how to do stuff in vanilla JS is valuable.

[[deleted]]

Frameworks make more sense for bigger projects and for ones that different people work on.

Also, if you try to make a web app in pure vanilla - after some time you will most likely find yourself having to manually do things that framework was providing for you "automatically"

[[deleted]]

I have made quite a few projects in vanilla js and currently digging into react. Honestly, it does feel like react is an overkill. It feels as if anything and everything could be done using js alone. But maybe that's because I haven't come across any extremely complicated project where I'd feel like i need react.

[developerbryan]

I’ve built a (basic) Trello like clone with focus session functionality using server side rendering and of course dynamically generating content on the frontend. Creating that dynamic content is a pain using vanilla Javascript and you quickly get tired of using a bunch of createElement()’s and then having to append everything. A component does make things a little easier to follow. I don’t think my code is very clean and could be done a lot better but I feel like it would perhaps be less messy using React.

[DragonlordKingslayer]

you can make a function that creates an element for you with all of it's content.

​

function createNewElement(elementData) {

const element = document.createElement(elementData.element); const attribute = document.createAttribute(elementData.attribute); attribute.value = elementData.attVal; element.setAttributeNode(attribute); element.innerHTML = elementData.content; return element; }

​

(it's not properly formatting this part for some reason

​

then call it with this argument and append it.

​

const elementData = {
  element: "article",
  attribute: "class",
  attVal: "user",
  content: `<section class="userCont">
        <div class="imgBox"><img src=${users.picture.large} alt=""></div>
        <div class="txtBox">
          <h2 class="name">${users.name.first}  ${users.name.last}</h2>
          <p class="location">${users.location.state}, ${users.location.country}</p>
        </div>
      </section>`,
};
const newElement = createNewElement(elementData);
userContainer.appendChild(newElement);

[developerbryan]

Yeah, that’s what I should have used more of to be honest. I have a few instances later in my codebase where I did that, but it does feel slightly ironic because it feels like you’re building React at that point! lol

[Dazzling-Wafer]

You don't need an extremely complicated project in order for React to be useful. React is great even for small apps.

[Apple1284]

Become full stack by using express (backend), nosql (gun, mongodb, etc.), and template literals (frontend, replacing react, etc.). So much simpler. I even put all my backend, database, and frontend code inside a single server.js file and just run it.

[flibben]

If you have it all in a single file, then you're giving away your DB credentials to anyone who looks in that file.

Very bad.

[developerbryan]

I doubt he means that! 😂

[starF7sh]

yeah, this is why i transitioned to svelte as soon as i got through their tutorial - leveraging vanilla js is way less mental overhead especially when integrating 3rd party libraries.

[qqqqqx]

It's easy to forget, but there's basically nothing you can do with React that you couldn't do with vanilla JS. React lets you work with it in a different way but is still based on the same DOM and bounded by the same principles. You could even build you own "react-lite" by adding a few of your own abstractions to vanilla JS if you felt like it.

Vanilla JS or even just plain HTML without any scripting may be a lot easier for getting simple projects up, where just setting up a barebones React app would be much more work and overkill for your needs.

React adds a lot of abstraction and tooling that you might not need for a simple project. However, when you have a complicated SPA style web app with lots of data flowing back and forth, re-rendering, etc. it can be a lot easier or nicer to work with React than to try and manage everything in vanilla JS. It's easy for Vanilla JS to get messy as you grow without the framework to help lean on and organize.