Jsx2 exercise discussion

React Web Development Course
#101 
"use strict";

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

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

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

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

3 Likes
#106 
React.createElement(

    'div', {id: 'hello'},

    React.createElement('p',null,'lorem, ipsum'));
3 Likes
#107

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

React.createElement(“p”, null, “Lorem, ipsum.”));

3 Likes
#108

The explanations so far, for me personally, were not 100% clear but I found a good explanation of what we are doing. So, here I am inserting some comments into my solution that might help others to understand.

    React.createElement(
      /*the html element we want to construct*/
      "div", 
      /*eventual attributes of the html element. If no attribute, then we write "null"*/
      {id: "hello"}, 
      /*then we say what the div shall contain. Since it is a <p> within our div, we have to nest 
        another react.createElement function.*/
      React.createElement(
        /*the <p> element to be nested into the div*/
        "p", 
        /*our <p> does not have attributes, so we write null*/
        null, 
        /*finally, the text we want to show up in our nested <p> element*/
        "Lorem, ipsum.")
      );
3 Likes
#109 
<p id= "hello2"></p>

<script type="text/babel">

const title = React.createElement(‘p’, {}, “Lorem, ipsum.”);

ReactDOM.render(

title,

document.getElementById(‘hello2’)

);

2 Likes
#110

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

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

Question:
Why is it necessary to include “null” in jsx when, it is not necessary to include id=“null” in js?
e.g…
<p> vs <p id = "null">

2 Likes
#113

because null will tell the component that there are no attributes like an id. It is part of the syntax. if you write id=“null” you will create an attribute id in the element.

3 Likes
#114

Re: jsx
Wouldn’t the absence of an unquoted attribute indicate that there are no attributes to the component?
e.g.
React.createElement ("p", "Lorem, ipsum".)
vs.
React.creatElement ("p", null, "Lorem, ipsum".)

Is it actually necessary? When I type the fist example into babel, it does not add the null in the translation. And if it IS necessary because of react syntax, what is the reason?
Could not the first example be used?

3 Likes
#115

Submitting my assignment, Hope everyone’s having a great time learning! :v:

React.createElement(
    "div" , {
        id: "hello"
    },

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

I had a little fun with is instead of just copy and pasting I thought it would be fun to write my own

“use strict”;

/#PURE/
React.createElement(“div”, {
id: “Galaxie Conquerer”
}, /#PURE/React.createElement(“p”, null, “I will consume this planet”));

3 Likes
#119

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

3 Likes
#120

Here’s my code:

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

Without JSX, I wouldn’t be able to use React xD

2 Likes
#121

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

1 Like