The way React does thing can be a little off-putting at first.

Instead of supporting templates and keeping HTML and JavaScript separate, it puts everything in the same file.

At first, it might seem like this goes against every best practice you know. But there are actually good reasons behind React’s choices. In this video, I explore these reasons and try to make sense of React’s lack of templating.

TL;DW

Although templating languages do have advantages (like easier each loops and if/else blocks), they also tend to limit what you can write. By foregoing templates, React lets you access the expressiveness of JavaScript at any point in your code.

This can admittedly result in code that’s harder to read and less approachable to non-programmers, compared to relatively straightforward templating syntaxes like Handlebars.

But by adopting newer React patterns like smart & dumb components and functional stateless components, you can bridge that gap and end up with components that are almost as easy to read as templates, while also being a lot more powerful.

Resources