Define a new constant JSX that renders a div

Tell us what’s happening:
Describe your issue in detail here.
What does “renders a div” mean?

Your code so far


const JSX = <div>
<h1></h1>
<p>Hello</p>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Challenge: Create a Complex JSX Element

Link to the challenge:

It means “create a visual representation of”, it’s the dictionary definition, specifically “render” in the artistic sense. In programming that normally means taking some data and turning it into an image you can see on screen.

You are tasked with writing some JS and JSX code, and the result of you doing that is an HTML div element being rendered in screen.

Ok, thanks, @DanCouper .

Yeah, a painting can be called a “rendering”. It is a slightly unusual word, but you’ll hear it a lot in React.

@DanCouper and @kevinSmith - Another clarification needed, please, regarding “render.”

in the exercise:

I see the explanation: “With React, we can render this JSX directly to the HTML DOM using React’s rendering API known as ReactDOM.”

Q. What is React’s “rendering API?” I am assuming this is not part of JS and is something added on? Where do we find it?
Q. Will what’s “rendered” to the DOM always “render” to the image on the browser screen?
Q. Is ReactDOM.render(componentToRender, targetNode) JS or JSX? I am thinking it must be JSX as it would not work in vanilla JS without React, correct?

It’s the API exposed by the library: it’s the functions you’re using to basically take what React produces and turn it into something that’s inserted into a web page. In fact, in your case, it’s one function:

a = theAppEntryPoint;
b = theDOMNodeToInsertItInto;

ReactDOM.render(a, b);

The entire ReactDOM API is here https://reactjs.org/docs/react-dom.html. As I say, you’re just going to be using render

Regarding APIs, what they are, I was talking to another forum member about this: Using '(e)' in functions? - #37 by DanCouper

No, it’s just a function, it’s just Javascript, it’s all just Javascript.

As @kevinSmith explained in other thread, JSX is just an extension to JS, you don’t have “JSX functions”. And as I was saying there you don’t have special “JSX variables” or anything like that. It’s literally just the stuff that looks like HTML that goes in JS files, that starts < and ends on the last >.

To make a direct comparison to something else that exists in JS:

 const example = /^(this|is)a regex[literal]$/

What comes after the const example = doesn’t look like anything else in JS, syntax is completely different. In this case, regex is standard in JS, so nothing special needs to be done to make whatever reads and executes the JS understand it.

If some JS code includes JSX, it isn’t standard JavaScript, so unlike regexes you can’t run it without processing it using another program first. That program takes all your code, replaces all the JSX syntax with JavaScript, producing a new set of code that is just valid JS.

If you are inserting some HTML into the DOM, then it will appear on the screen.

const rootElement = document.getElementById("root-element");
const node = document.createElement("p");
const someText = document.createTextNode("Hello, I am some text inserted into the document using the JS DOM API");
node.appendChild(someText)
rootElement.appendChild(node)

As a working example of above, paste this directly into the URL bar in your browser:

data:text/html,<html><div id="root-element"></div><script>const rootElement = document.getElementById("root-element"); const node = document.createElement("p"); const someText = document.createTextNode("Hello, I am some text inserted into the document using the JS DOM API"); node.appendChild(someText); rootElement.appendChild(node);</script>

So React, and JSX. My example app:

function Welcome (props) {
  return (
    <p>Hello {props.name}, I am some text inserted into the document using the JS DOM API</p>
  );
}
  

function App () {
  return (
    <div>
      <h1>My App</h1>
      <Welcome name="Dan" />
    </div>
  );
}

const rootElement = document.getElementById("root-element");

ReactDom.render(<App>, rootElement);

Then I put the file containing this into a program that converts it to JS. The program finds any JSX syntax and converts it to what the library you’re using requires it to be converted to (note this is a very slight simplification):

function Welcome(props) {
  return jsx("p", {
    children: [ "Hello ", props.name, ", I am some text inserted into the document using the JS DOM API" ],
  });
}

function App() {
  return jsx("div", {
    children: [
      jsx("h1", { children: "My App" }),
      jsx(Welcome, { name: "Dan" }),
    ],
  });
}

const rootElement = document.getElementById("root-element");

ReactDom.render(jsx(App, {}), rootElement);

jsx is function that takes a node as the first argument and an object [of properties, props] as the second argument.

Then React can define what the jsx function does. Which will be to trigger a function called createElement

function Welcome(props) {
  return React.createElement("p", null, "Hello ", props.name, ", I am some text inserted into the document using the JS DOM API");
}

function App() {
  return React.createElement("div", null,
    React.createElement("h1", null, "My App"), 
    React.createElement(Welcome, { name: "Dan" })
  );
}

const rootElement = document.getElementById("root-element");

ReactDom.render(React.createElement(App, null), rootElement);

createElement's first argument is the node. The second argument is any props. The third [fourth, fifth, etc] are any children.

NOTE that you can write all of your React code just using createElement, you don’t need to use JSX (though, practically, it’s much easier).

Then React can build a big object from all those nested createElement functions, a simplified model of the DOM.

Then ReactDOM? ReactDOM provides functions that take that big object and go from:

function Welcome (props) {
  return (
    <p>Hello {props.name}, I am some text inserted into the document using the JS DOM API</p>
  );
}
  

function App () {
  return (
    <div>
      <h1>My App</h1>
      <Welcome name="Dan" />
    </div>
  );
}

const rootElement = document.getElementById("root-element");

ReactDOM.render(<App>, rootElement);

To create something like (I’m just writing this all out rather than creating functions or anything):

const rootElement = document.getElementById("root-element");
const titleText = document.createTextNode("Example app");
const welcomeText = document.createTextNode("Hello Dan, I am some text inserted into the document using the JS DOM API");
const title = document.createElement("h1");
const welcome = document.createElement("p");
const app = document.createElement("div");

title.appendChild(titleText);
welcome.appendChild(welcomeText);
app.appendChild(title);
app.appendChild(welcome);
rootElement.appendChild(app);

And again, if you paste this into the browser URL bar as an example:

data:text/html,<html><div id="root-element"></div><script>const rootElement=document.getElementById("root-element"),titleText=document.createTextNode("Example app"),welcomeText=document.createTextNode("Hello Sharad823, I am some text inserted into the document using the JS DOM API"),title=document.createElement("h1"),welcome=document.createElement("p"),app=document.createElement("div");title.appendChild(titleText),welcome.appendChild(welcomeText),app.appendChild(title),app.appendChild(welcome),rootElement.appendChild(app);</script>
1 Like

@DanCouper , thanks for this detailed explanation. I don’t really understand most of it yet, but I’ll try reviewing it a few times to see if anything sinks in. The more I learn JS and React, the less I seem to understand.

Yeah, it took a while for the subtleties of react to sink in for me. Just give it time.

1 Like