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 which is a representation of real DOM kept in the memory and synchronized with the real DOM. Virtual 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 which require heavy changes to the DOM and fast loading, It becomes a hassle to do everything with JS alone. web apps 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 , React creates a new folder for your project with a specific file structure similar to the image below- create-react-app 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 folder is another important folder, it comes with a default HTML file that contains nothing but a in the body. public div 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 navigates the website from one path to another without reloading. React Router 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 , if you have any confusion on React or JavaScript. Twitter

Super

Target

Twitter

10 Reasons To Use TailwindCSS In Your Next Project

5 Best Free JavaScript Courses for Beginner Devs

Get In Touch With Me

2021 - HackerNoon Contributor of the Year - SIDE-PROJECT

Nominated for 2022 - HackerNoon Contributor of the Year - Programming

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Beginners Guide

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Open Source

Too Long; Didn't Read

React vs. JavaScript: Why React Web Apps Are Better than Plain Websites

React vs. JavaScript: Why React Web Apps Are Better than Plain Websites

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Reasons To Use TailwindCSS In Your Next Project

10 Pieces of Sci-Fi Armor We All Wish Were Real

10 Movie Tie-In Games That Were Actually Good

10 Most Anticipated Sci-fi Games of 2022 You Can’t Miss

10 Female Video Game Characters You Need to Know

10 Reasons To Use TailwindCSS In Your Next Project

10 Pieces of Sci-Fi Armor We All Wish Were Real

10 Movie Tie-In Games That Were Actually Good

10 Most Anticipated Sci-fi Games of 2022 You Can’t Miss

10 Female Video Game Characters You Need to Know

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps