The simple answer to why frameworks and libraries for front-end development are used are the same as using a library, it saves time by building on the work contributed by others, it abstracts away a lot of technical work that some my find to be minutia, and having a documented/standardized means of doing something can make coordinating a team much easier. However, the popular front end tool such as React, Vue, Angular, and Riot have an additional benefit in that they are component based. Component based frameworks allow for greater, more concise code re-usability throughout an application. Any programmer is comfortable with using functions, and the concept of passing an input and getting a predictable output. Component apply the same pattern to visual elements, which the developer can build, then pass in data to get a predictable, yet flexible, visual output and maintain consistency across the application.
React and Vue both use a concept called the virtual DOM to track what the actual DOM should look like based on the code, and render that to the browser's DOM. React maintains this link with the
ReactDOM.render() method, passes a single, top-level component to a single
div in the DOM. The top level component can contain other components, which contain other components, all which terminate with JSX. JSX is an HTML like syntax which the React library,
ReactDOM.render() specifically, translates to HTML and inserts into the DOM.
ReactDOM.render() will continue to translate and update (or reconcile, which is the term used in the React documentation) the browsers DOM.
This post is intended to be a very high level look at what React is, how it accomplishes its task, and what some benefits are. All the benefits discussed can be, and are, debated at length. However, the prevalence of component frameworks is undeniable, and hopefully this serves to share why/how they are used.