Vanilla js is known as plain old Javascript and it’s basically the javascript written without using any libraries.
React is a JS library used for building UI. It allows us to make complex UIs using components.
What you actually get in ReactJS CODE Isolation in React ?
In Vanilla JS, if we want to update some piece of HTML. That piece of code may reside in multiple JS files. So, it becomes hard for the developer to track all these files and they have to keep all the files open at once.
In React, we split our code into components and each component maintains all the code needed for both display and updates to UI. Therefore, updated code is next to display code, which makes complex apps much easier to understand.
We get better Data Handling in React
In Vanilla JS, our data is stored in a model called DOM(Document Object Model) which is created and maintained by the browser.
If a user gives input in a form, the developer needs to extract that data by finding it in the DOM first and then extracting its value. Which becomes a very tedious job.
But, In React we have a concept called “controlled-components” which sets the text value in a JS Object as the user types it. In general, React stores data in regular JS variables.
Ex :
const [input, setInput] = useState(“”)
Hooks in React
In React we have a concept called Hooks which provides benefits like Reusability, Readability, and Testability. You get some built-in hooks like useState, useEffect, useReducer, useRef etc, which helps in rapid development.
Improves Readability For example “useContext” hook has been a blessing for improving the readability of JSX as it allows context values to be read outside of JSX.
Aside from code it’s easier to read the component tree in react dev tools when debugging.
Using React in Web Apps
Using React JS in creating web applications is a cherry on cake. Data gets dynamically updated in web pages without requiring them to be reloaded at each time. When the user clicks on a button in the page data can be presented to the user without reloading the page every time. This gives the user a good interaction with the web site.
Conclusion
Vanilla JS is awesome but it’s not a great alternative when it comes to building huge applications with complex functionalities. Also, you can’t create complex UIs(it will take too much of time). On the other hand, React allows us to create reusable components. So, React is Better to learn & use in every aspect of rapid Development.
Thanks to my friend Chandan Pandey for helping me out with the content.
Kudos !
Top comments (7)
Disagree on almost everything.
If I need to choose a tool for building UIs I probably pick React, Preact or Next JS if it suits best to the project (which will be almost always) I agree on that, but I don't agree with the reasons gived and the point of view of the post. Let me explain:
You can create complex UIs with Vanilla JS, webcomponents, React, Svelte, Vue, Preact, Angular, Next JS and so on, pretty easily tbh.
The main benefit of React is that it's the most used lib for building UI components therefore it's somewhat standarized so you'll get an easy time getting new hires that can understand quickly the code of a project.
By the way React itself is written in what you define as "plain old JavaScript" just like Preact and many others.
A framework or lib is never more powerful than the language it's built in/for, neither their aim is to perform best.
They're just opinionated standardization of automations on -opinionated- standard processes that may suit for a given project or not.
By that means React or any other lib or framework will not cover every single need you have. In such cases it's always better to understand the issue and to know how to solve it in the main language to avoid setting thousands of dependencies to the project that may eventually conflict each other or become deprecated, forcing you to either re-implement that given feature or forking and maintaining that dependency by yourself.
Yes, it was time to move into React some years ago and it's still the mainstream so you won't be wrong getting it -probably-. Just make sure you understand the scope of React and what it brings by itself as a lib and what is out of React boundaries that you'll need to solve with plain JavaScript.
Also not every React feature is OK to use on every project (see managed/controlled forms as example).
Best regards
^ This.
And yeah... Especially if using React hooks, you're still using a lot of "vanilla" js. That's why I prefer using React over something like angular that has a much steeper learning curve. React hooks is basically a collection of vanilla js functions with some awesome sauce on top :p
But yes, definitely there should be other reasoning to use React beyond: my UI is complex. There's a million frameworks that try to make it easier to develop complex UI.
Everything in react in vanilla js except the jsx.
Yup but note that JSX is a way to write template structures, it does not compare to JS but HTML (or XSL/XSLT, XML, MD or any other markup language) and I'm pretty sure that the JSX to HTML parser is written in JS as well 😁
github.com/babel/babel typescript and javascript 😁
By vanilla js I also mean, not using framework specific constructs. For example, in React everything you write within a hook is vanilla js but the hook itself is a framework construct that doesnt mean anything outside of your React project. In angular a lot of what you write are angular specific constructs that wouldnt work if you copied them somewhere that executes vanilla js. That means the learning curve for the latter is much higher and also that the stuff you learn is not transferable to other places.
Totally agreed 👍👍👍