Jsx2 exercise discussion

React Web Development Course
#1

Welcome to the discussion about the jsx2 exercise

Leave your answers below in this thread. If you have any questions or you want to discuss something connected to the exercise feel free to do it in this thread as well, but please everything to the topic.

Transform the following JSX into an equivalent React.createElement() call.

<div id="hello">

<p>Lorem, ipsum.</p>

</div>

Time to start coding on your own!

You can verify your solutions by visiting https://babeljs.io/repl and pasting the above code in the editor.

8 Likes
#2 
    React.createElement('div', {id:'hello'},
        React.createElement('p',null,'LoremIpsun');
    );
1 Like
#3

Lorem, ipsum.

jsx

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

#4

Zsolt, I love your teaching style! You explain things very thuroughly, cover common issues and how to solve them on your own, even mention useful tips and tricks like keyboard shortcuts and snippts! :heart_eyes:

React CreateElement Call

You can just nest the calls to create child elements.

React.createElement(
    "div",
    {id: "hello"},
    React.createElment(
        "p",
        null,
        "Lorem, ipsum."
    )
);
4 Likes
#5 
React.createElement("div", {
  id: "hello"
}, React.createElement("p", null, "Lorem, ipsum.")
);

// we can pass the child element in the parent element as an argument
1 Like
#6

@ibin could you please post your code as a code format? :grinning: take a look at the picture below

preformatted text
preformatted text957Ă—174 11.9 KB

2 Likes
#7

In forum communication, it helps a lot if you use code blocks like this:

React.createElement(
    "div",
    null,
    "Text"
);

You can either press the </> button of your forum editor to do so, or you can write three backticks (key below ESC), then your code, then three backticks again.

Your solution is good except the auto-formatted double quotes.

1 Like
#8

In body of HTML

<div id="content"></div>

<script type="text/babel">

    ReactDOM.render (
        (
            "div", {
            id: "hello"
            }, /*#__PURE__*/React.createElement("p", null, "Lorem, ipsum.")
        ), 
        document.getElementById('content')
    );
</script>
2 Likes
#9 
<div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
      React.createElement("div",{ id:"hello"}, <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit, at vel? Quidem odit animi illo quo cum autem aliquam in.</p>),
      document.getElementById("root")
      );
    </script>

I ended up with working code but the format others are using is definitely cleaner code.

#10 
<div id="Hello">

    <p>Lorem, ipsum.</p>

</div>

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

The test “Test - Your first React App” needs some change: You pass only when you get 100%. Fair enough, but the answer under question 4 (4. How do we render a React class…) is not part of the possible answers. This means nobody can pass the test. .

#12 
"use strict";

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

I passed with 6/7 answers and reported the problem a few days ago, so it should be all right. Apologies for the editing issue.

#14

to have this :

<div id="hello">

  <p>Lorem, ipsum.</p>

</div>

we need :

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

It looks like the problem is in all tests: once you fail and do a retest, the retest currently needs to be 100% correct to pass (I just did Test - Building an App Using Class-Based Components).
Also to question “4. How do we pass a numeric price prop to a React component named Coin?” the correct answer is missing

#16

In the meantime, I checked all the default answers by answering wrongly to all questions. I have submitted some hints to questions 2 and 4. Please allow some time until these changes are put in the learning management system.

1 Like
#17 
React.createElement("div", {id: "hello"}, React.createElement("p", null, "Lorem, ipsum.")
);
1 Like
#18 
React.createElement('div', {id: 'hello'},
     React.createElement('p', null, 'Lorem, ipsum.');
1 Like
#19 
React.createElement("div", {id: "hello"}, React.createElement("p", null, "Lorem ipsum."));
1 Like
#20 
React.createElement("div", {id: "hello"})
    React.createElement("p", null, "Lorem, ipsum."));
2 Likes