• 792
• 70

How is it going to know if custom props of your own elements actually want a string or want code?

How a new import syntax is helpful is beyond me:  <rt-import name="*" as="utils" from="utils/utils" /> 

I'd rather have a DSL for HTML inside my JS than a DSL for JS inside my HTML

I don't think the if syntax is really that clean either. You can make components that look clean like this:

<If condition={...}>
  <MyComponent ... />
</If>

Though of course that is not as performant as  <MyComponent />  gets created even if the  condition  is falsey. Though I think I've seen a babel plugin somewhere that transforms it into a conditional expression with the desired short-circuit behavior.

Time and time again I've had a knee-jerk bias against something (e.g. Flux, Redux, and state-management in React) only to try it later, fall in love with it, and wonder "what the hell was I thinking?". I think if you just relax and give pure JSX a try you'll find that your brain adjusts and you learn to read it as easily as Angular templates. Careful indentation can help:

<div>
  {someCondition &&
    <MyComponent ... />
  }
</div>

Here's the other thing: JSX has higher-order power that templates lack: you can pass in components or elements as props, return them from functions, etc:

class UsersView extends React.Component {
  render() {
    const {users, UserLink} = this.props

    return (
      <ul>
        {users.map(user => (
          <UserLink key={user.id} user={user}>
            <li>{user.name}</li>
          </UserLink>
        ))}
      </ul>
    ) 
  }
}

const AdminUserLink = ({user, children}) => <Link to={`/admin/users/${user.id}`}>{children}</Link>
const AdminUserList = <UsersView UserLink={AdminUserLink} />

const UserProfileLink = ({user, children}) => <Link to={`/users/${user.id}`}>{children}</Link>
const UserProfileList = <UsersView UserLink={UserProfileLink} />