Why so much stress on learning frameworks be it React or Vue or whatever?
Not to forget that frameworks like React also look counterproductive initially.
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.
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.
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.
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!
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.
React reconstructs the whole process of building websites by providing us with independent components that can handle both UI and logic together.
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.
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.
For web apps or larger websites, clearly React.