How Babel transforms JSX to JS

#react #javascript #webdev #beginners

When writing JSX you can either start your tag in lowercase <div> or in uppercase <Component>. Below we will discuss each case separately

Lowercase tags

Babel transforms <div>.. into React.createElement('div',...). Essentially treating the tag name div as a string.

Capitalized tags

Babel transforms <Component>... into React.createElement(Component,...). Notice the lack of quotation around Component this means it will get treated as a variable.

What can the variable hold?

The first argument to React.createElement can only hold strings or functions that return something that's renderable. Typically it simply holds a React component, which is a function that returns JSX.

Conclusion

Now we know <Component>.. doesn't have to reference a React component. It can also reference a simple string or any function that returns renderable content.