I’m pretty sold on the react.js model because it makes DOM manipulation so smooth and comprehensible. But I’m wondering how it could be leveraged for a site that’s largely static with big blocks of text and images that don’t move. Would it just get in the way? It seems awkward to have components with KBs of text in their state.
4
Know what you want to do, then choose the technology.
From that point of view, React.js seems to be overkill for a mostly static web.
From React’s website:
We built React to solve one problem: building large applications with data that changes over time.
React is a hammer for a specific nail. That would indicate that it will get in the way of creating a mostly static website.
Generating static pages is an anticipated use of React, as mentioned in the documentation for React.renderToStaticMarkup
Similar to
renderToString, except this doesn’t create extra DOM
attributes such asdata-react-id, that React uses internally. This
is useful if you want to use React as a simple static page generator,
as stripping away the extra attributes can save lots of bytes.
Some have termed to use of react here overkill. However, when I want something dead, I have no problem with overkilling it. The fact that react can do far more than is neccessary for this use case is no argument against react.
However, problems may arise if you want to perform asynchronous code. Let’s imagine the following:
function SchoolClass({classId}) {
const students = await query("SELECT name FROM student WHERE class = ?", classId);
return <ul>
{_.map(students, ({name}) => <li>{name}</li>}
</ul>
}
But this won’t work, because the function returns a Promise, not a React element, and is thus not compatible with React. If you were devising a React-style static site generator framework, you would probably allow this. However, since React is focused on webapp clients, it is isn’t allowed.
Everything has its own advantages and disadvantages. React.js is a very popular web framework which is built on top of JavaScript by tech giant Facebook.
React is used for big applications in which data changes quite frequently and thus DOM manipulation is quite high. In such cases, React use concept of Virtual DOM which uses a very effective way of handling DOM manipulations.
In case of static sites with content, there are much less DOM changes and thus using React adds to the complexity of developing website, leaving main focus off the content.