JSX vs Nested calls

component.jsx

// Interpolation requires curly braces, which can make things looks much uglier
const ListJSX = ({ things }) => (
  <ul>
    {
      things.map(thing => (
        <li>{ thing.name }</li>
      ))
    }
  </ul>
)

// Without the curly braces, this gets a lot cleaner and more concise
const ListNestedCalls = ({ things }) => (
  ul(things.map(thing => (
    li(thing.name)
  )))
)

// Changing an element type requires locating and changing the closing tag
// If your component, for any reason, has deeply nested elements, many of which are
// the same type, your choices are:
// - Whack-a-mole, guessing at it and checking the webpack-dev-server process to see
//   if it parsed correctly
// - Check column numbers of start and end tags in the editor and hoping you've got
//   consistent indentation and nothing else outdented that far in between
// - Refactor before making a change that should be trivial
// - Use an editor plugin that highlights/updates matching tags
const DeeplyNestedJSX = () => (
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
)

// When there are no end tags, you just change the opening tag call.
// Most modern editors match up parentheses and array brackets without plugins,
// so there's no guesswork for where the boundaries are.
const DeeplyNestedCalls = () => (
  div([
    div([
      div([
        div([
          div([
            div([
              div([
                div([
                  div([
                  ])
                ])
              ])
            ])
          ])
        ])
      ])
    ])
  ])
)

// One thing that *is* nice about JSX is not having to make text nodes strings
const StaticJSX = () => (
  <p>
    Voluptatem accusamus dignissimos aspernatur officia. Vero consequatur
    facere omnis aperiam ipsam dolorem vel illo. Numquam qui sapiente non
    officia qui. Est ullam omnis non natus. Cum odit et quis nesciunt enim.
  </p>
)

// The only reason this can be done this way is because we're rendering to the
// DOM, which replaces all whitespace in a text node with a single space. This
// technique wouldn't be useful in React Native unless we used a component that
// did the same whitespace replacement.
const Static = () => (
  p(`
    Voluptatem accusamus dignissimos aspernatur officia. Vero consequatur
    facere omnis aperiam ipsam dolorem vel illo. Numquam qui sapiente non
    officia qui. Est ullam omnis non natus. Cum odit et quis nesciunt enim.
  `)
)