If you ask a professional Developer what's the path of becoming a Developer? He/She will most probably tell you HTML, CSS, JavaScript, a Front-End framework (React, Angular, Vue whatever)

Hearing it you may get this question “Why do I need to learn an additional framework when I can do everything with Vanilla(fancy name of "plain" JavaScript) JavaScript itself?

Why so much stress on learning frameworks be it React or Vue or whatever?

Many beginner Developers who are stressed out in the battle of React vs JavaScript have this question in their minds.

Not to forget that frameworks like React also look counterproductive initially.

So as a React Developer, I'll tell you why React(or any other framework for the sake of conversation, but mostly React 😉) web apps are better than plain JavaScript websites.

Individual Reusable Components

Unlike pure JavaScript, apps in React are not created as one long stretch of a file but as small building blocks called Components.

These components are fundamental to React apps.

Your entire website is divided into these small components which when put together complete the UI of the website.

One major benefit of developing websites this way is that individual components are harmoniously developed without hampering other components.

Faster Speed

React uses Virtual DOM which is a representation of real DOM kept in the memory and synchronized with the real DOM.

Every time a change happens in a component, React compares the updated Virtual DOM with the pre-updated version of Virtual DOM to determine what changes were made to the components.

React then reflects those changes to the real DOM.

Unlike real DOM, Virtual DOM identifies the minimal changes that are to be made to the DOM and only updates that.

This makes your website super fast when compared to pure JS websites where the whole DOM is re-rendered along with the target node.

Easy to create complex web apps

For static websites(mostly), Vanilla JavaScript is not a big issue.

But for complex web apps which require heavy changes to the DOM and fast loading, It becomes a hassle to do everything with JS alone.

React's Virtual DOM is the real savior here. It changes only the necessary elements of the real DOM rather than re-rendering everything.

Apart from that, React's component-based architecture helps a lot as you can re-use components whenever needed.

Easier to maintain

One huge benefit of building components based websites is easy maintainability.

In old times, you were unsure of what effect changing the margin of an HTML element would do on your website(overall).

In React, each component is its own hero. It works and responds to the viewport on its own, no worries updating them :-)

You can update any component anytime and track its behavior on different viewports, and then repeat the process with other components.

When done, bring them together to let the magic happen!

Great Organization

When you set up your React project with the help of create-react-app, React creates a new folder for your project with a specific file structure similar to the image below-

Though all the files and folders from the above file structure are important, the one you’ll use the most is src.

src folder contains all the react components and assets on which you will work while building your application.

Apart from that public folder is another important folder, it comes with a default HTML file that contains nothing but a div in the body.

This div is used by React to dynamically inject all its code into the website.

This file structure is great when working on large websites. Unlike the traditional way where you can create HTML, CSS, and JS files and store it here and there, this structure adds uniformity to your process of building websites.

Handles UI and Logic together

Traditionally the task of building UI is done by HTML and CSS and JavaScript takes care of the logic. But this is not true in the case of React.

React reconstructs the whole process of building websites by providing us with independent components that can handle both UI and logic together.

Each React component takes care of its structure, and logic(and sometimes style too) by itself, gone are the days for maintaining separate files of HTML, and JavaScript.

Updates without reloading

This is my most favorite thing about React. Unlike traditional websites, you don't have to travel from one page to another.

React manipulates the DOM to change only those components which are required to be changed and with the help of React Router navigates the website from one path to another without reloading.

This dynamic update of components provides users a seamless browsing experience similar to a native app.

Reusable Components

When building large websites, you’ll find that almost all the time you’re repeating certain patterns,

In React, you can group those patterns in a component and reuse them again and again.

Imagine you’re building a blogging website and need to display cards of blog posts on your page.

Here, all you need to do is create a component for the card and reuse the same component everywhere and provide a different dataset to display information of different blogposts.

React vs JavaScript: Which is better?

Final Question: Who won in the battle of React vs JavaScript?

For web apps or larger websites, clearly React.

However, you can choose to go with JavaScript too if your website is small and you don’t want to over-engineer basic things.

As a developer, learning React after JavaScript will surely be a great investment for your future if you really want to level up your development skills.

React out to me on Twitter, if you have any confusion on React or JavaScript.