Jsx2 exercise discussion

React Web Development Course
#122

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

1 Like
#123

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

2 Likes
#124 
React.createElement(
        "div", 
        {

        id: "Hello"
        
        },

    React.createElement(
        "p", 
        null,
        "Lorem, ipsum."));
2 Likes
#125

Hello.

My code for this exercise:

<div id="hello">

    <p>Lorem, ipsum.</p>
  
  </div>

  React.createElement("div", null, "Lorem, ipsum", this.props.name);
2 Likes
#126 
React.createElement(
    'div',
    {
        id: 'hello'
    },
    React.createElement(
        'p',
        null,
        'Lorem, ipsum.'
    )
);
2 Likes
#127

React.createElement("div", {id : "hello"},react.createElement("p", null, "lorem"));

2 Likes
#128 
React.createElement(
  'div', {id: 'hello'},
  React.createElement(
    'p', null, "Lorem, ipsum"
  )
);
2 Likes
#129

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

2 Likes
#130 
<div id="hello">
    <p>
       Lorem, ipsum dolor.
    </p>
</div>


React.createElement(
    "div",
    {id: "hello"},
    React.createElement("p",null,"Lorem, ipsum dolor.")
    );
2 Likes
#131

Here’s my code:

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

React.createElement(
    "div",
    {id: "hello"},
    React.createElement("p",null,"Lorem, ipsum dolor.")
    );
2 Likes
#132

Ok, it took me a while to figure out the logic, but now I got it :grin:.

<script type="text/babel">

ReactDOM.render(
        React.createElement("div", 
        {id:"hello"},
        React.createElement("p", null, "Lorem, ipsum.")),
        document.getElementById('root'));
        
    </script>
2 Likes
#133

This is only the beginning…

React.createElement(
  'div', {id: 'hello'},
  React.createElement(
    'p', null, "Lorem, ipsum"
  )
);
2 Likes
#134

Lorem, ipsum.

React.createElement(
	"div",
	{id: "hello"},
      React.createElement(
	  "p",
	  null,
	  "Lorem, Ipsum",
      ) 
)

Never coded before February of this year, and I’ve learned reading the syntax aloud helps immensely .

2 Likes
#135

Here is what i came up with.

React.createElement(“div”, { id: “hello”},

 React.createElement("p", null, " Lorem, ipsum."));
1 Like
#136 
React.createElement("div", {id: "hello" }, 
    React.createElement(
"p", 
null, 
"Lorem, ipsum."
));
2 Likes
#137 
<div id="hello">

<p>Lorem, ipsum.</p>

</div>

“use strict”;

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

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

Changed it up a bit and nested a paragraph element (<p>) element inside the hello <div>.
The jsx code was this:

<div id="hello">
  <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, iste!
  </p>
</div>

Which I converted to:

React.createElement("div", {
    "id": "hello"
}, React.createElement("p",
    null, "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, iste!"));

It appears as though babeljs adds a comment /*#__PURE__*/ before creating each element from a jsx input. The babeljs conversion from my jsx code outputted:

/*#__PURE__*/
React.createElement("div", {
  id: "hello"
}, /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, iste!"));

However, it was not added in the output from my own conversion. Interesting that babeljs would add the comment on the jsx input.

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

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

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

1 Like