Learning React

As I continue learning JavaScript and web development, learning to apply the fundamentals of HTML, Ja...

As I continue learning JavaScript and web development, learning to apply the fundamentals of HTML, JavaScript, and CSS within a framework/library is the next step. This post I describes the benefit of using a framework or library such as React to build a user interface and how React accomplishes it.

Advantage of using a framework/library over Vanilla JS

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.

How does React use the Virtual DOM

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.

Now that our DOM is virtually represented in JavaScript, we can make determinations on how to change the representation using programming logic, and ReactDOM.render() will continue to translate and update (or reconcile, which is the term used in the React documentation) the browsers DOM.

Conclusion

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.