Here we have two elements, a
, then we will add the class, by saying, class list, now add up.
Next, to create the header, we do the same thing with document, create element, this time using H1 and to set the Hello World text, we use text content. We'll assign a string to that. There we have our two elements.
Now, to make the header a child of this
element, we can say up.appendChild header and then, to actually render it on the screen and grab hold of the main element by using query selector, and then call an appendChild and pass it in up.
Now, if we go up here and delete these, hit save. You can see we still have the same result. We have a
Now, let's do the same thing with preact. We'll comment this out for a moment and then we'll bring in preact. Now, because we're loading preact directly in a script type like this, we'll have access to the global variable preact.
From that, we'll need to use the H function and the render function. First, let's create the
with a class of up. We can say up is equal to H and we pass in the name of the element and the attributes. In this case, we wanted a class of up.
Then, because we had a
with a H1 nested inside it, we can provide a third argument here, which is this element's children. We'll call the H function again, this time with H1. We don't need any attributes, so we'll just give no.
Because we just have some text content for the children, we can provide it directly here. To actually render it on the screen, we'll call the render function us in the up. On the second argument is the target, so we'll grub this on before. Hit save. Now, you see we have the exact same result.
Behind the scenes, preact will create elements, it will add attributes for us, and it will nest elements within other elements. This is definitely a nicer way to write user interfaces but we can go one step further and use JSX, which will get rid of these raw function calls for us.
Let's switch to a webpack and bubble setup and see how that looks. We can start the dev server with inaudible start. Next, in the source index file, which is our entry point, we'll import H and render from preact. We'll also import our up component, which we haven't created yet but we're going to put it inside a component's directory, call it up.
Now, we can let inaudible create that directory for us, as well as this file. We'll export a function called up. This will return some JSX, just as we had before. We'll have a
, a class of up and then we'll nest inside it a H1 element with Hello World.
Now, because we're using JSX here, we'll have to import H from preact, even though we don't call this directly, it will allow this to be converted into those regular function calls. The final thing to do for this component is to provide it as a default export.
Now, back in our entry file, we can render this to the screen. We will call render by the up and the target. We used the main element like we did earlier. We'll go and add that to the HTML. Reloading the browser. Now, you can see we have the
with the nested H1 inside of it.
To recap this lesson, we created a component in this file up.js. We imported H from preact so that JSX could be converted into function calls. Then, we exported this function both as a named export and as a default export.
Then in the entry point of our application, we bring in H again and render from preact. H is needed because we're using JSX here and render is how we get a component to mount itself into the inaudible . Finally, this second argument to the render function is how we tell preact where to put the up on the page.