
React.js cheatsheet - octosphere
https://devhints.io/react
======
Waterluvian
The layout, style, readability of this page on my phone is just _glorious_.

------
djklanac
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:

<TimeInput {...{now}} />

Which is equivalent to

<TimeInput now={now} />

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

------
notus
Needs updated lifecycle methods

------
forlorn
This

    
    
        return <some pseudo-HTML-code>;
    

always makes my eyes bleed.

~~~
jchw
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.

~~~
sephoric
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.

------
lifeisstillgood
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

~~~
allover
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.

