Jay Taylor's notes

back to listing index

JSX, a year in

[web search]
Original source (gist.github.com)
Tags: react jsx gist.github.com
Clipped on: 2017-07-19

Image (Asset 1/28) alt= 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} />