When we think about rendering a React application, it usually looks something like this:
;;;;const appElement = document;ReactDOM;
Not every website is a single page application, though. Instead of forcing us to render one top-level component for a page and then making that responsible for everything within, React gives us the flexibility of mounting multiple components to different elements within the DOM on the same page. The page as a whole isn’t a React component, but it uses React to manage interactivity for small subsets of itself.
Common architectural patterns: Building a component with React pushes us toward patterns that are common to the community and easily maintained by another developer. With non-SPA websites picking up more complex, interactive functionality as the web gains maturity, the benefits of communicating intent through the use of common and easily-understandable patterns can’t be overstated.
Predictable state: For certain forms of UI functionality, declarative, state-driven functionality is beautifully efficient and understandable.
Leveraging a cohesive set of libraries: Ever since the demise of the jQuery plugin, front-end developers haven’t had much of a shared ecosystem within which to share libraries of common functionality. Ecosystems like React, however, offer substantially cohesive sets of components that can be incredibly useful within the UI layer.
Additional bundle weight and script startup time: A large bundle in itself isn’t that big of a deal. Sure, it’s nice to keep download sizes lean, but if a single page application requires a larger bundle weight, that’s the price of entry for higher interactivity. Unfortunately, outside of single page applications, a bundle must be parsed and executed more than once. Your application needs to bootstrap itself every time a user visits another page. In my case, this didn’t lead to an excessive performance penalty, but it’s easy to imagine a scenario where it would.
How to integrate build-time or server-side syntax highlighting for markdown code fences with two libraries: markdown-it and Highlights (Atom’s syntax highlighting engine).