Jsx2 exercise discussion

React Web Development Course
#61

Does this look right?

/#PURE/
React.createElement(“div”, {
id: “hello”
}, /#PURE/React.createElement(“p”, null, “Lorem, ipsum.”));

:thinking:

#62

Hi @Cendy, You do not need to write this section of the code. It is just a comment and can be omitted. Otherwise, the answer is right.

1 Like
#63

This is good to know. Thank you @Malik :blush:

#64 
// Use code blocks by pressing the </> button.

You don’t need the PURE comments. Other than that, the quotes are formatted according to the rules of the forum, they are not “programming double quotes”.

The structure looks correct.

I’d recommend using codepen.io or codesandbox.io, see the videos.

1 Like
#65 
React.createElement("div", { id: 'hello'}, <p>Lorem, ipsum.</p>);
1 Like
#66

React.createElement(“div”, {
id: “hello”
}, React.createElement(“p”, null, “Lorem, ipsum.”));

1 Like
#67

Jsx2 exercise:
Transform JSX into React.createElement() call.

JSX code

<div id="hello">
        <p>Lorem, ipsum.</p>
    </div>

React.createElement() call code

React.createElement(
        "div",
        {
            id: "hello"
        },
        React.createElement(
            "p",
            null,
            "Lorem, ipsum." 
        )
    );
1 Like
#68

here is the solution but i don’t really quite understand why we need to do this and why there are like 20 different jsx formats from what i see. If someone could give some clarification that would be fantastic.

/*#__PURE__*/
React.createElement("div", {
  id: "hello"
}, /*#__PURE__*/React.createElement("p", null, "Lorem, ipsum."));
react.createElement();
2 Likes
#69 
React.createElement("div", {
    id: "hello"
}, React.createElement("p", null, "Lorem, ipsum."));```
1 Like
#70 
React.createElement("div", {
  id: "hello"
}, /*#__PURE__*/React.createElement("p", null, "Lorem, ipsum."));
1 Like
#71 
React.createElement(
"div", 
null,
{id: "hello"}, 
React.createElement(
"p", 
null, 
"Lorem, ipsum."));
1 Like
#72

I tried this and worked!

  let elP = React.createElement("p", null, "Lorem, ipsum", null);
  React.createElement("div", { id: "hello" }, elP, null);
1 Like
#73

The point of this exercise is to understand that the JSX code is not HTML, but a JavaScript function call. So later we decrease the chances of writing JSX of the wrong format (see fragments).

1 Like
#74 
React.createElement("div", 
                    {id: "hello"}, 
                    React.createElement("p",
                                         null,
                                         "Lorem, ipsum."
                                        )
                     );
2 Likes
#75 
React.createElement("div", {
  id: "hello"}, React.createElement("p", null, "Lorem, ipsum."));
2 Likes
#76 
React.createElement("div", {id: "hello"},
	React.createElement(
	     "p",
	     null, 
         "Lorem, ipsum."
        )
);
1 Like
#77 
React.createElement("div", {  id: "hello" }, React.createElement("p", null, "Lorem, ipsum."));
2 Likes
#78 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
<script>var greetings = 
    ReactDOM.render (
        React.createElement(
            "div",
            {
            id: "hello"
            },
            React.createElement(
                "p",
                null,
                "Lorem, ipsum."
            )
        ),
        document.getElementById('root')
    );

        
</script>    
</body>
</html>
2 Likes
#79 
React.createElement(
    "div", {id: "hello"},
    React.createElement(
    "p",
    null,
    "Lorem, ipsum.")
);
2 Likes
#80

Hey!
I hope I got this right…

var greeting = /*#__PURE__*/React.createElement("div", {
  id: "hello"
}, /*#__PURE__*/React.createElement("p", null, "Lorem, ipsum."));
2 Likes