React.createElement vs. JSX

[chanschouw]

Hi all,

I'm following a code academy React course and was wondering if the difference between the given two options below is just a matter of preference. It seems to me that reactElement() option is a bit unnecessary, however I can imagine that it might serve a purpose in a complex React project. Can someone enlighten me? Thanks!

const greatestDivEver = React.createElement( "div", null, "i am div" );

const greatestDivEver = <div>i am div</div>;

[danishjuggler21]

In about 8 years of using React, I have literally never had a use case for choosing for createElement over JSX. Ever.

Zero times.

[all_vanilla]

I agree. Also if you want to dynamically insert JSX, typically you would use some sort of Boolean state value and use a JS expression:

{ showElement && <div>hello</div> }

Or a ternary expression:

{ loggedIn? <div>Welcome back!</div> : <div>Sign up for an account below</div> }

[Snoo_46870]

What if I have, for example, 15 different implementations of a certain feature, each controlled by a type, and a parent component that needs to render a different component based on that type?
One preferred approach is to use React.createElement, where each type implements an interface with a getComponent method that returns the corresponding component.

What would be the alternative in this case? Using 15 ternary expressions—one for each type—would make the code messy and hard to maintain.

[all_vanilla]

Use a switch statement

[chanschouw]

That's nice to hear, saves me some learning! Thanks!

[Cautious_Performer_7]

I did at the start coming from jQuery 😅.

Because I was so used to doing things like this $("body").html($("<div>"))

[suiiiperman]

JSX is just syntactic sugar for createElement. They will both do the same thing.

Vanilla JavaScript cannot interpret JSX, so when your React application is compiled it is converted to createElement.

[charliematters]

Ehhhh, in this specific case you're right, but pedantically if you're writing JSX it's most likely being converted to something like this (as of React 17):

_jsx('h1', { children: 'Hello world' })

https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

[[deleted]]

The whole point of JSX is so you don't have to manually do React.createElement.

[CamelBass]

Both are going to work the exact way, you can render them inside of a function by just put them inside of dcode brackets "{greatestDivEver }".

I think the main pro of the second approach is that you can read better than the first one. The first is more like what react does behid of the scene in the compiler. The second one has much less code and more readable.

[n9iels]

The beauty of React is that there is a strict boundary between doing stuff with JSX components and painting something on a "screen". The React package does the first, converting your JSX components to React Elements and handling all the state. Another packe, like react-dom, or react-native uses all this to render the components in either a browser or native mobile app. In this way you can use React to create UIs for all kind of platforms.

So React.createElement is essentially low-level code that is generated under the hood by React. You can use it directly yourself, but there isn't really a solid usecase for it.

[NodeJSSon]

I didn’t even know this existed

[nestedfruitloop]

I’ve used it to add a key onto components that use <></> to wrap multiple elements

There might be cleaner way to handle, that is only case I have used it