Jsx2 exercise discussion

React Web Development Course
#184

The JS React equivalent of the JSX in the problem is as follows:

const p = React.createElement("p", null, "Lorem, ipsum");
React.createElement("div", {id: "Hello"}, p);
#185 
<div id="hello">
    <p>Lorem, ipsum.</p>
</div>

React.createElement("div", {
    id: "hello",
}, React.createElement("p", null, "Lorem, ipsum."));
#186 
        const element2 = React.createElement(
            'p',
            '',
            'Lorem ipsum dolor sit amet.'
        )
        const element3 = React.createElement(
            'div',
          	null,
            element2);

ReactDOM.render(element3, document.getElementById('root'));
#187

Love learning this React language :sunny:
Here is my solution:

React.createElement(
        'div',
        {id: 'Hello'},
        React.createElement('p', null, 'Lorem, ipsum.')
    );

#188

Here’s my solution:

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

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

So far so good :grinning:

#189 
"use strict";

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

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

#192 
React.createElement("div", {
id: "Hello"
}, /*#__PURE__*/React.createElement("p", null, "Lorem, ipsum."));

It seems like you need to create parent and child elements

#193

My Solution

React.createElement(
     "div",
     { id = 1 },
     React.createElement(
          "p",
          null,
          "Lorem, ipsum"
     );
);
#194 
JSX Template:

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

React.CreateElement();


Babel helping converting JSX template into JavaScript:

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

React.CreateElement();
#195 
React.createElement("div", {
  id: "hello"
}, 
React.createElement(
  "p", 
  null, 
  "Lorem, ipsum."
  )
);
#196

:mage:t3:‍♂

React.createElement(
  "div", {id: "hey"},
  React.createElement(
    "p", null, "Lorem, ipsum."
  )
);
1 Like
#197 
React.createElement("div", {id: "hello"}, 
React.createElement("p", null, "Lorem, ipsum."));
1 Like
#198 
React.createElement(
        "div",
        {id : "hello!"},
        react.createElement(
            "p",
            null,
            "lorem, ipsum"
        )
    )
    )
1 Like
#199 
React.createElement("div", {id: "hello"})
    React.createElement("p", null, "Lorem, ipsum."));
1 Like
#200 
<div id="hello">
    <p>Lorem, ipsum</p>
</div>

React.createElement(
    "div",
    {
      id: "hello"
    },
    "Hello!"
);
#201 
React.createElement(
  "div",
  {id : hello},
  React.createElement(
  	"p",
    null,
  	"Lorem, ipsum."
  )
);
1 Like
#202 
React.createElement("div", null, /*#__PURE__*/
React.createElement("p", null, " Lorum ipsum "));
#203 
<div id="mondo">
  <p> Hello mondo </p>
</div>





react.createElement(
  "div",
  {id:"hello"},
  react.createElement(
    "p",
    null,
    "hello mondo "
  )
)
1 Like