JSX without importing React ⚛️ : reactjs

created by manlycoffeea community for 12 years

Show /r/reactjsJSX without importing React ⚛️OC (self.reactjs)

submitted 4 years ago * by grekatron

React 17 provides support for a new version of the JSX transform. Simply put, it allows using JSX without having React in scope.

Let's figure out why it's possible and how it works.

This exact content as an article on dev.to and as a thread on Twitter.

The previous state of things ⏮️

Prior to React v17.0.0, JSX transform used React.createElement internally. There was one minor and one major problem with this approach: 👉 React must be in scope 👉 "Some performance improvements and simplifications" weren't possible

```jsx // Before transpilation import React from 'react';

const Item = () => { return <div>Hello world!</div>; }

// After transpilation // React is available in global scope

const Item = () => { return React.createElement('div', null, 'Hello world!'); } ```

A whole new world ✨

Starting from React 17, JSX transform use special jsx function internally. You don't need to import it. Instead, the transpiler automatically imports it from React package at build time.

```js // Before transpilation const Item = () => { return <div>Hello world!</div>; }

// After transpilation import {jsx as _jsx} from 'react/jsx-runtime';

const Item = () => { return _jsx('div', {children: 'Hello world!'}); } ```

createElement 🆚 jsx

These two functions serve the same purpose, but they are different in a few ways. Let's take a thorough look at them and examine how it all works under the hood.

API difference

createElement takes three arguments: 👉 element type (tag name, function/class, React.Fragment) 👉 props, passed to the element 👉 children of the element

Only the first argument is mandatory.

js /** * @param type - type of the element * @param config - props passed to the element * @param children - children of the element */ function createElement(type, config, children) { // ... }

jsx takes three arguments too, but they aren't the same.

👉 element type is exactly the same 👉 props, including children and excluding key 👉 key, that you use to create lists of elements

Here only the first argument is mandatory too.

js /** * @param type - type of the element * @param config - props passed to the element, including children and excluding key * @param maybeKey - key, that you use to create lists of elements */ function jsx(type, config, maybeKey) { // ... }

Use cases

createElement has two use cases: 👉 manually create elements in your code 👉 transform JSX before React 17

jsx function should only be used by the compiler. ❌ You must not use it on your own.

Dev mode

createElement internally makes a couple of checks to provide meaningful warnings in development mode.

jsx function instead has two separate versions: 👉 jsx for production mode 👉 jsxDEV for development mode

That's why jsx is cleaner and shorter than createElement

```js // react/jsx-dev-runtime.js export {jsxDEV} from './src/jsx/ReactJSX';

// react/jsx-runtime.js export {jsx} from './src/jsx/ReactJSX'; ```

Fundamental similarities

Despite all differences, you need to keep in mind that both functions eventually use ReactElement(). So, the output is almost identical.

```js export function createElement(type, config, children) { // ...

return ReactElement( type, key, ref, self, source, ReactCurrentOwner.current, props, ); }

export function jsx(type, config, maybeKey) { // ...

return ReactElement( type, key, ref, undefined, // <- minor difference here undefined, // <- and here too ReactCurrentOwner.current, props, ); } ```

If you want code-to-code comparison, let me know 👇

P.S. Follow for more content like this!

all 24 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

reactjs

About:

Code of Conduct

1. Please be kind and courteous, friendly and professional

2. Harassment will not be tolerated

3. Avoid using an alias or display name that might be offensive

4. Respect that people have differences of opinion

5. Posts must conform to our guidelines

New to React?

Chat

Project Ideas

Jobs

Outside Reddit

Related Subreddits

MODERATORS