Learn TypeScript 3 by Building Web Applications

Controlling rendering

With Vue.js and Angular, a specific template syntax must be used to determine whether some elements should be rendered, visible, and so on.

With React, since we write and manipulate our components mainly using JavaScript (or TypeScript) code, it is actually very simple and intuitive to programmatically control rendering. Having all of the power of JavaScript constructs at our disposal, we can, for example, assign components to variables, use if-else constructs to decide what to render and how, and so on.

Here's an example taken from the official documentation demonstrating this:

class LoginControl extends React.Component { ... render() { const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) { button = ...