It’s interesting. I’ve switched to using ‘h’ as an alias of ‘createElement’ instead of jsx. Which breaks 2 of their top 3 rules.
I find it has a few nice advantages.
1. It doesn’t introduce another language with different syntax that I have to mentally flip between. Remembering stuff like surrounding variables with curlies and using = instead of : etc.
2. nesting thing also is much easier
3. It’s more concise (when createElement is aliased to h)
4. Most importantly it keeps me in the flow.
5. It’s just another function call so additional features can be added. For example I made a version using X instead of h that will parse the tag for “#id.class1.class2” tokens and add them to the props as appropriate saving a pretty decent amount of space. This is very similar to emmet so it’s nothing out of the ordinary.
6 I think HTML looks like garbage when the number of attributes overflows the line length. Js formats much nicer, it’s basically one token per line when it gets that long with indenting like the rest of the file.
7. Pulling logic out of the render call doesn’t require a as much of a code transformation.
The biggest downside by far is that I seem to be the only one that prefers this style from looking over lots and lots of tract libraries.
>However, for root components of a directory, use index.jsx as the filename and use the directory name as the component name
I used to do this, but I find it really confusing having dozens of files all called "index.jsx". I eventually moved to './ComponentName/ComponentName.jsx' in my personal projects. It's a bit more verbose, but I find it makes everything else do to with navigating and finding files easier.
> Always use double quotes (") for JSX attributes, but single quotes (') for all other JS.
I am deeply offended. I've always suspected double-quote people had some issues but using both is unforgivable.
Anyone have an idea why it suggests named functions instead of arrow functions for functional components?
be wary of "normal functions", aka "stateless functional components". They are always re-rendered, unlike PureComponent: https://github.com/facebook/react/issues/5677
> Bind event handlers for the render method in the constructor.
Why not do it right in the body of the class with an arrow function?