Jsx2 exercise discussion

React Web Development Course
#204

Hi, this is my solution:

React.createElement("div", { id: "hello" }, React.createElement("p", null, "Lorem, ipsum.");
#205 
  React.createElement('div', {id:'hello'},
        React.createElement('p',null,'LoremIpsun');
    );
#206

React.createElement(
‘div’,
{
id: ‘hello’
},
React.createElement(
‘p’,
null,
‘LoremIpsum’
)
);

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

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

1 Like
#209 
React.createElement("div", {
  id: "hello"
}, React.createElement("p", null, "Lorem, ipsum.")
);
1 Like
#210 
<body>
    <div id="root"></div>
    <script type="text/babel">
      const my_el = React.createElement(
        "div",
        { id: "hello" },
        React.createElement("p", {}, "lorem ipsum")
      );
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(my_el);
    </script>
  </body>
2 Likes
#211 
React.createElement(
    "div", {
        id: "hello"
    }, 
    React.createElement(
        "p",
        null,
    "Lorem, ipsum.")
);```
1 Like
#212

React.createElement(‘div’, {id:‘hello’},

    React.createElement('p',null,'LoremIpsun');

);
1 Like
#213 
const myElement = React.createElement(
  "div", {
    id: "hello"
  }, 
  React.createElement(
    "p", 
    null, 
    "Lorem, ipsum."
  ));
console.log(myElement);
1 Like
#214 
"use strict";

class exercise extends React.component {
  render() {
    return /*#__PURE__*/React.createElement("div", {
      id: "hello"
    }, /*#__PURE__*/React.createElement("p", null, "Lorem, ipsum."));
  }

}

ReactDOM.render( /*#__PURE__*/React.createElement("sayHello", {
  name: "Pedro"
}), document.getElementById("root"));
1 Like
#215 
React.createElement(
    "div",
    {
        id: hello
    },
    React.createElement(
        "p",
        "null",
        "Lorem, ipsum"
    );
);

JSX is much cleaner than react code. Every time you want to add another element you have to type React.createElement();. This can be very tedious especially if the website you’re building has a load of elements xD.

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

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

#219

Code for jsx exercise.

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

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

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

#221

Can we use it like the following code??

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

React.creatElement(
"div", {id: "word"}, "P",null, "Lorem, ipsum."
);
#223 
React.createElement(
    'div',
    { id: 'hello'
    },
    React.createElement(
        p',
    null,
    'Lorem, ipsum'
    )
);


does this work?
#224 
React.createElement(
    'div',
    {
        id: 'hello',
    },
    React.createElement(
        'p',
        null,
        'Lorem, ipsum.'
    )
);