Jsx2 exercise discussion

React Web Development Course
#142 
React.createElement ( 
     "div", 
     { id: "hello" },
     React.createElement (
          "p",
          null,
          "Lorum, ipsum.") 
     );
1 Like
#143 
React.createElement(
    "div", 
    {
        id:"hello"
    },
    React.createElement(
        "p", 
        null,
        "Lorem, ipsum."
    )
);
1 Like
#144 
    <script>
        React.createElement("div", { id:"hello"}, 
            React.createElement("p", null, "Lorem, ipsum.")
        );
    </script>
1 Like
#145

Jsx2 Proposed solution.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First React App</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>



    <!-- Don't use this in production: -->

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>


</head>

<body>
    <div id="hello">
        <p>
            
        </p>
    </div>
   
    <div id="test2" style=" padding-left: 10px; border: black solid 1px; color: white; width: 300px; height: 150px; margin-top: 25px; background-color: blue;">
        <p>
            
        </p>

        
    </div>

    <script type="text/babel">
        
       
        
        ReactDOM.render(
             React.createElement("div", { id: "hello" },/*#__PURE__*/React.createElement("p", null,"Something good should go here but congratgulations my boy! You have figured it out Mikal!")),

              document.getElementById("hello") 
        );

        ReactDOM.render(
            React.createElement("div", {id: "test2"},
                                        /*#__PURE__*/React.createElement("p", null, "Sharp my boy sharp you are")),
             document.getElementById("test2")
        );
    </script>

    <!--
    
          Note: this page is a great way to try React but it's not suitable for production.
    
          It slowly compiles JSX with Babel in the browser and uses a large development build of React.
    
     
    
          Read this section for a production-ready setup with JSX:
    
          https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
    
     
    
          In a larger project, you can use an integrated toolchain that includes JSX instead:
    
          https://reactjs.org/docs/create-a-new-react-app.html
    
     
    
          You can also use React without JSX, in which case you can remove Babel:
    
          https://reactjs.org/docs/react-without-jsx.html
    
        -->
</body>

</html>
1 Like
#146 
React.createElement("div", { id: "hello" },
    React.createElement("p", null, "Lorem, ipsum.")
);
1 Like
#147 
React.createElement(
        'div',
        {
          id: 'hello',
        },
        React.createElement('p', null, 'Lorem ipsum.'),
      )
1 Like
#148

my solution…

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

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

1 Like
#150

“use strict”;

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

1 Like
#151

For the exercise, I used this answer:

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

For testing and displaying on a html page, I used this code:

class HelloParagraph extends React.Component {
            render() {
                return React.createElement(
                    'p',
                    null,
                    'Lorem ipsum dolor'
                );
            }
        }

        ReactDOM.render(
            React.createElement(HelloParagraph, null, null),
            document.getElementById('hello')
            );
1 Like
#152

Here is my code for transforming JSX into an equivalent React.createElement() call.

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

	React.createElement(
    	"p",
        null,
        "Laborum, iure."
    )
);
1 Like
#153 
React.createElement(
          "div", 
         {
            id: "hello"
          },
          React.createElement(
                  "p",
                   null, 
             "Lorem, ipsum."
          )
);
1 Like
#154

The interior is another React.CreateElemet(). This time it has the short-hand for paragraph “p” as the first item, then it indicates that there is no attribute, followed by the lorem, ipsum text within quotation marks:

"use strict";

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

The code

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

The solution

"use strict";

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

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

1 Like
#160 
</head>
<body>
    react.createElement('null', id, 'text');
</body>
</html>
1 Like
#161

jsx code:

<div id="hello">

  <p>Lorem, ipsum.</p>

</div>

equivalent React.createelement() call

React.createElement("div", {id: hello}, 
   React.createElement("p", null, "Lorem ipsum."));
1 Like
#162 
    <div id="hello">
        <p>Lorem, ipsum dolor.</p>
    </div>

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

JSX exercise

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

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