React vs JavaScript: Why React Web Apps Are Better Than Regular Websites

If you ask a professional developer what is the path to becoming a developer? He/She will most likely tell you HTML, CSS, JavaScript, a Front-End framework (React, Angular, Vue whatever)

Hearing it, you might have this question “Why do I need to learn an extra framework when I can do everything with vanilla (fancy name of JavaScript” simple) JavaScript itself?

Why so much stress on learning frameworks whether it’s React or Vue or whatever?

Many newbie developers who are stressed out in the battle of React vs. JavaScript have this question on their minds.

Not to mention that frameworks like React also seem counterproductive initially.

So, as a React developer, I’m going to tell you why React web apps (or any other framework for conversation’s sake, but especially React 😉) are better than plain JavaScript websites.

Unlike pure JavaScript, applications in React are not created as one long piece of a file, but as small building blocks called components.

These components are fundamental to React applications.

Your entire website is broken down into these small components that when put together complete the website user interface.

One of the main advantages of developing websites in this way is that individual components are developed harmoniously without hampering other components.

picture

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

Whenever a change occurs in a component, React compares the updated virtual DOM with the pre-updated version of the virtual DOM to determine what changes have been made to the components.

React then reflects those changes in the real DOM.

Unlike the real DOM, the virtual DOM identifies minimal changes to be made to the DOM and only updates them.

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

For static websites (mostly), Vanilla JavaScript isn’t a big deal.

But for complex web applications that require heavy DOM changes and fast loading, it becomes tedious to do everything with JS alone.

React’s virtual DOM is the real savior here. It only changes the necessary elements of the real DOM rather than rendering everything.

Other than that, React’s component-based architecture helps a lot because you can reuse components whenever needed.

One of the main advantages of building component-based websites is ease of maintenance.

It used to be that you weren’t sure what effect changing the margin of an HTML element would have on your website (overall).

In React, each component is its own hero. It works and responds to the viewport on its own, no hassle to update them 🙂

You can update any component at any time and track its behavior in different windows, then repeat the process with other components.

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

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

picture

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

The src folder contains all the react components and assets that you will work on when building your application.

Except that public folder is another important folder, it comes with a default HTML file which 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 ideal when working on large websites. Unlike the traditional way where you can create HTML, CSS, and JS files and store them here and there, this structure adds uniformity to your website building process.

Traditionally, the task of creating the 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 rebuilds the entire website building process by providing us with independent components that can handle both UI and logic.

Each React component takes care of its structure and logic (and sometimes also its styling) on ​​its own, gone are the days of maintaining separate HTML and JavaScript files.

picture

This is my most favorite thing about React. Unlike traditional websites, you don’t have to move from page to page.

React manipulates the DOM to modify only the components that need to be modified and with the help of React Router navigates the website from one path to another without reloading.

This dynamic component update provides users with a seamless browsing experience similar to a native app.

When creating large websites, you will find that almost all the time you repeat certain patterns,

In React, you can bundle these patterns into a component and reuse them over and over again.

Imagine you are building a blogging website and you need to display blog post cards on your page.

Here, all you have to do is create a component for the map and reuse the same component everywhere and provide a different dataset to display information from different blog posts.

Last question: who won the battle of React against JavaScript?

For web applications or larger websites, react clearly.

However, you can also choose to use JavaScript if your website is small and you don’t want to design the basic elements too much.

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

react to me on Twitterif you have any confusion about React or JavaScript.

Comments are closed.