I overridden React.createElement, but jsx's button doesn't seem to call React.createElement

For example, let’s say your source code looks like this:

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

Under the hood, the old JSX transform turns it into regular JavaScript:

import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

Let’s say that your source code looks like this:

function App() {
  return <h1>Hello World</h1>;
}

This is what the new JSX transform compiles it to:

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

If you are using @babel/plugin-transform-react-jsx:

# for npm users
npm update @babel/core @babel/plugin-transform-react-jsx

I have a very basic question. I need to know whether we need to create an element every time before calling render method. How to replace the World with Universe?

var greetings = 'World'
var element = <h1>Hello, {greetings}</h1>

ReactDOM.render(
  element,
  document.getElementById('root')
);

greetings = 'Universe'

ReactDOM.render(
  element,
  document.getElementById('root')
);

Thanks for the question. This is fairly fundamental JavaScript and has to do with the fact that a variable reassignment does not change the result of where the variable was used in the past. Alternatively you could make this work by making the variable an object and manipulating that object:

var state = {}
state.greetings = 'World'
var element = <h1>Hello, {state.greetings}</h1>

ReactDOM.render(
  element,
  document.getElementById('root')
);

state.greetings = 'Universe'

ReactDOM.render(
  element,
  document.getElementById('root')
);

Hi RentPath User 5 :) So, let's refactor that code and maybe it'll make more sense:

const getContent = () => content
getContent()

Why isn't my code showing anything on Code Sandbox? It's exactly the same a in the video.

<div id="root"></div>
<script src="https://unpkg.com/react@16.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

<script type="text/babel">
  const rootElement = document.getElementById("root");

  const content = "Hello World";
  const element = <div className="container">{content}</div>;
  ReactDOM.render(element, rootElement);
</script>

Why isn't my code showing anything on Code Sandbox? It's exactly the same a in the video.

<div id="root"></div>
<script src="https://unpkg.com/react@16.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

<script type="text/babel">
  const rootElement = document.getElementById("root");

  const content = "Hello World";
  const element = <div className="container">{content}</div>;
  ReactDOM.render(element, rootElement);
</script>

React 17 introduces two new entry points to the React package that are intended to only be used by compilers like Babel and TypeScript. Instead of transforming JSX to React.createElement, the new JSX transform automatically imports special functions from those new entry points in the React package and calls them.

function App() {
  return <h1>Hello World</h1>;
}

This is what the new JSX transform compiles it to:

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

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

So, you should rewrite jsx function.

// Prod mode
import jsxRuntime from 'react/jsx-runtime'
const jsx = jsxRuntime.jsx
jsxRuntime.jsx = (...args) => {} 

// Dev mode
import jsxRuntime from 'react/jsx-dev-runtime'
const jsx = jsxRuntime.jsxDEV
jsxRuntime.jsxDEV = (...args) => {}