The arguments against JSX and React requiring many small components are very surface level and sound like "we couldn't figure out how to make it work for us so it must be impossible".

1. This was mentioned already, but, yes, you can use ternaries and boolean logic for simple conditionals (loggedIn && <a>Logout</a> || <a>Login</a>)

2. When you need more markup, put them in an if-else statement in the same render function.

  render()
    if (loggedIn) {
      var login = <a>Logout</a>
    else
      var login = <form onSubmit={ ... } />
    

    return <div>
      { login }
    </div>

3. With SFC it's trivial to split these out into new components. You can even use bound methods to reuse the component state and props.

  class Navbar {
    LoginForm = () => {
      if (this.state.loggedIn) { ... } else { ... }
    }

    render() {
      const {LoginForm} = this
      return <div>
        <LoginForm />
      </div>
    }
  }

4. And finally, what stops you from creating a custom component that works like this?

  render() {
    return <If cond={ this.state.loggedIn }>
      <Then>Hello { this.state.userName }</Then>
      <Else>Please log in</Else>
    </If>
  }

There's a continuum of ways you can structure your code, it just takes some experimentation to find what works for you.

After working with Angular templates for a long time and then switching to JSX, I'm never going back to having my markup in a string blob with magical attributes that make it do stuff.