React.js cheatsheet | Hacker News Reader

React.js cheatsheet

devhints.io

79 pointsoctosphere17 comments

Open articleView on HN

The layout, style, readability of this page on my phone is just glorious.

One of my favorites:

spread operator shorthand for passing component props.

Suppose: const now = moment()

Then, you can pass it down to a component like this:

Which is equivalent to

With many props, it becomes easier on the eyes and differentiates from passing event handlers e.g. <TimeInput {...{now}} myHandler={this.handleKeyPress} />

Needs updated lifecycle methods

This

    return <some pseudo-HTML-code>;

always makes my eyes bleed.

Really ? How do you generate HTML code in a composable way then ? Or is it that you just prefer the pseudo lisp way with createEl ?

JSX makes your eyes bleed? Perhaps you would love E4X as well! Pretty much same concept:

    var someXML = <text>Why not?</text>;

Sadly, it's no longer supported in Firefox, but there are some ECMAScript variants still supporting E4X syntax, probably most notably ActionScript 3 as used in Adobe Flash.

Personally I love JSX, since it gives you all of the same power as template-based languages with virtually turing complete DSLs, but with JavaScript instead of a DSL. Not always as elegant, but almost always easier to understand.

My only real complaint is what JSX compiles down to. I think that it should either compile down to some data (like JSON data) or JSX should just be an alternative function call syntax. Instead, it compiles down to calls to React in most implementations (though usually, like with TypeScript for example, you can customize what it calls exactly.) The calls also vary depending on if the tag is lowercase or uppercase, since that's how React tells primitive tags apart from components. Frankly, a little ugly.

I actually like how it compiles down. In a native macOS app I just released this morning, I wrote originally in Preact, converting JSX to function calls to avoid a build phase, and eventually replaced the Preact function with a custom function that creates DOM elements directly. Not only was it a fun learning experience, but it took a relatively tiny amount of time to do, precisely because translating JSX to equivalent DOM node creation code is so predictable and transparent.

babel-plugin-transform-react-jsx accepts several options that allows you to configure what JSX is compiled to. You can see it in details in the docs here https://babeljs.io/docs/en/babel-plugin-transform-react-jsx

Is this better for your eyes?

  React.createElement(
      "div",
      null,
      React.createElement(
        "div",
        null,
        React.createElement(
          "p",
          null,
          React.createElement(
            "a",
            { href: "foo" },
            "Link"
          )
        )
      )
    );
    document.getElementById('root')
  );

fwiw, I have no problem with JSX, but the React documentation itself [1] suggests using react-hyperscript, which (along with hyperscript-helpers) makes a very nice syntax:

    div([
      div([
        p([
          a({ href: "foo" }, "Link")
        ])
      ])
    ])

[1] https://reactjs.org/docs/react-without-jsx.html

Nah, still lot uglier than jsx IMO.

They do not "suggest" using react-hyperscript, it says if you don't want to Babelify your code you can use it. I suppose that's a nice syntax if you really love Lisp, but I sure don't.

I had previously shied away from React when I had seen it before because I thought it was another templates-in-code approach. I was actually looking for some kind of Javacript equivalent to ScalaTags[1] that I could use in Typescript when I found out how well React and Typescript worked together.

I guess react-hyperscript is what I was looking for, but I've grown to quite like JSX.

[1] https://github.com/lihaoyi/scalatags

    import {createElement as h} from 'react'
    import {render} from 'react-dom'

    render(
      h('div', null,
        h('div', null,
          h('p', null,
            h('a',
              {href:'foo'},
              'Link',
            ),
          ),
        ),
      ),
      document.getElementById('root')
    )

It's not much of a difference, but take a look at the htm package.

It uses template strings instead of requiring a parser, turning your example into something more like:

    return htm`<Some pseudoHTMLcode />`;

https://github.com/developit/htm

Unless you are deeply involved in another modern JS framework (ie angular) then these sort of intros leave a lot to be desired - I would say that you need to learn the whole "how JS is done now" - something similar to ejecting create-react-app and then walking through all the config files that have appeared and explaining what they mean

Cheatsheets are not intros. They're generally meant for when you know what you're looking for already, and want to get to e.g. the exact syntax for it quickly.

Reply on news.ycombinator.com