Replace React createElement Function Call with JSX

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

In this lesson, we'll learn what JSX is and how it can replace calls to React's createElement API. We will go over how you can interop regular Javascript right in the JSX with curly brackets. We will learn how to pass props to JSX and how to override and props that get passed in. In addition to the noted className difference, there are a number of other differences with attributes in JSX than those in HTML.

ahairshi
ahairshi
~ 4 years ago

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')
);
Kent C. Dodds
Kent C. Doddsinstructor
~ 4 years ago

Hi ahairshi 👋

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')
);

So that will work as you expect it to because you're manipulating the object that the element is referencing.

This is not idiomatic react however. If you want to learn more about managing state in react, keep watching :) Good luck!

Jared Hensley
Jared Hensley
~ 3 years ago

Very solid Kent, would love to see you do more React fundamentals! Do you have any other recommended resources?

RentPath User 5
RentPath User 5
~ 3 years ago

thanks Kent for a solid course;

can you explain this bit of code: (() => content)(), especially the last set of parenthesis?

Thanks

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

Hi Jared Hensley, you might appreciate this blog post: How to React.

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

const getContent = () => content
getContent()

So the original code is called an immediately invoked function expression (IIFE for short). It's a way that you can encapsulate some logic within a closure (function) without having to give the function a name. In the video I just used it to demonstrate that any JavaScript expression can be used in the { and } of JSX. I wouldn't normally recommend doing something like that, but it could be useful if you want to define variables and keep them scoped to the function. In the future there may be a better way to do that with do expressions.

Good luck!

Zac Dobbs
Zac Dobbs
~ 2 years ago

This is so cool

Conekta
Conekta
~ 2 years ago

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>
Stacie
Stacie
~ 2 years ago

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>

I don't think that the Code Sandbox can handle Babel.