Jsx2 exercise discussion

React Web Development Course
#21

Here is my solution. Thank you.

let pElement = React.createElement(‘p’, null, ‘Lorem, ipsum’);
React.createElement(‘div’, {id:“hello”}, pElement);

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

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

1 Like
#24

The gist of it:

image
image1441×1088 258 KB

1 Like
#25 
React.createElement('div', {
  id: 'hello'
}, React.createElement('p', null, 'Lorem, Ipsum'));
2 Likes
#26 
React.createElement("div", {id:"hello"}, React.createElement("p", null, "Lorem, ipsum"));
2 Likes
#27

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

#28

written correctly

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

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

<p>Lorem, ipsum.</p>

</div> 

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

  "div",

  null,

  "Lorem, ipsum."

)
3 Likes
#33 
<div id="hello">
    <p>
        Lorem ipsum.
    </p>
</div>

React.createElement("div", {
  id: "hello"
}, React.createElement("p", null, "Lorem ipsum."));
2 Likes
#34
Demo 3 - Jsx 2 Exercise 
<!-- Don't use this in production: why - babel should be run before you upload code to the web page. -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Jsx 2 Exercise

Some usseless text generated by React

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad necessitatibus sed fuga earum aliquid minima. Quasi dolores iure rerum, adipisci ex porro fugiat iusto vel voluptatibus molestiae soluta mollitia consectetur.

Nobody sees this coming

nore this

class Hello extends React.Component { render() { return React.createElement('div', null, `${this.props.messagetxt}`); //besure to use ` and not ' }; } 
  ReactDOM.render(
      React.createElement(Hello, 
       { messagetxt: 
        'marry had a little lamb chop whose fleas were as white as snow. And every where marry went the smell was sure to follow'
       }, null), 
      document.getElementById('marry')
  );

  // some more useless text
  ReactDOM.render(
      React.createElement(Hello, 
       { messagetxt: 
        'people will generally do the right thing ... after exhausting all the other possibilities'
       }, null), 
      document.getElementById('people')
  );

   // some even more useless text
   ReactDOM.render(
      React.createElement(Hello, 
       { messagetxt: 
        'when my kids start whining about something I tell them "Harden up mate! or you will never be THE MAN your monther was"'
       }, null), 
      document.getElementById('mykids')
  );

</script>
1 Like
#35 

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

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

The code seems generated due to the PURE comment. If you wrote it yourself, then you don’t need it, it’s just FYI from the generator/transpiler.

1 Like
#38

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

2 Likes
#39

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

#40

@Lizette I’m stuck in the Class components 2 class , since there is no forum link to that class, I thought it might be a good idea to post it here … could you please let Zsolt know this? … I did everything exactly as he is doing it, and I cannot get my table displayed… this is my result … just an empty table :sob:

image
image1508×420 14.5 KB

and this is my code:

Name Ticker Price 
class Coin extends React.Component {
  /*
  constructor(props) {
    super(props)
  }
  */
  render(){
    return (
      <tr>
        <td>(this.props.name)</td>
        <td>(this.props.ticker)</td>
        <td>(this.props.price)</td>
      </tr>
    );
  }

}



ReactDOM.render(
  <React.Fragment>
    <Coin name="Bitcoin" ticker="BTC" price="$13300.00" />
    <Coin name="Polkadot" ticker="DOT" price="4.09" />
  </React.Fragment>,
    document.getElementById('root')
);

React.createElement(
  React.Fragment,
  null,
);

</script>