3 ms·
Well said. I'd wholeheartedly recommend anyone learning React to try manually converting a component written in JSX syntax into a bunch of React.createElement c
by fro0116 8y ago
Well said. I'd wholeheartedly recommend anyone learning React to try manually converting a component written in JSX syntax into a bunch of React.createElement calls. The exercise itself is really easy and mechanical, but I find it very enlightening nontheless.
What people coming from a templating background often consider as "quirks" of JSX (such as the limitations around conditional branching and why properties need to be camelCase rather than kebab-case) become painfully self-evident after seeing how the equivalent JSX code would look like in the plain JS React.createElement form.
In fact, in my own projects I often prefer to import createElement, alias it as something short and use it directly to write rendering functions over using JSX because I find it removes a lot of the impedance mismatch involved with switching back and forth between JSX's psuedo html syntax and regular JS syntax in JSX expressions (and basically any other part of the codebase that's all written in JS). Plus, JSX syntax is actually generally _more_ verbose than the raw createElement calls when aliased due to things like requiring named closing tags for any component that takes children and needing to use `blah={blah}` over the `blah,` object property shorthand for passing through props.
Though in team settings I still resort to begrudgingly writing JSX because people are more familiar with it, and I'd probably have to pick a fight with every new team member to get them onboard with the idea, and I'd rather spend that political capital on less superficial issues.
I sometimes really wish the React folks never invented JSX, and just forced everyone to write createElement calls to begin with, then all of these points of confusion from people coming from templates could have been avoided (and we'd end up with only my preferred syntax as the one true way to write components, haha), but I do wonder if React would have taken off as it did if it didn't come with JSX to give people that sense of familiarity, even if it ends up causing much more undue confusion over the long term.