Why Transform

Excellent question! You could easily just create actual React components that have most of the same functionality (e.g. React If, which inspired this project). The problem is that because of the way JSX works, everything inside an actual React component gets executed, whether it's actually used or not. So if you have:

  <If condition={obj}>
    <div>{obj.name}<div>
  </If>

obj.name is going to be executed (and fail) even though you just guarded against it, which is both annoying and incredibly unintuitive for new developers.

By transforming it into a ternary if instead, only code that's supposed to be executed will be executed, which is much easier to read, even though it can require an extra build step if you use the JSTransform method.