Create a Hello World App with Preact
By creating a simple ‘hello world’ example application first in vanilla Javascript, and then in Preact without any tools, we’ll learn what type of problems Preact is solving for us and how is works at a low level. Then we’ll switch to a Webpack + Babel setup we’ll cover some fundamental concepts such as, which imports we need, how to create a component, how to use JSX and finally how to render our component into a target element in a web page.
[00:00] Here we have two elements, a <div> with a class of up, and a H1, some text content, Hello World. To recreate this in JavaScript, we will have to say, up is equal to document, create element and we'll use a <div>, then we will add the class, by saying, class list, now add up.
[00:23] 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.
[00:41] Now, to make the header a child of this <div> 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.
[01:02] Now, if we go up here and delete these, hit save. You can see we still have the same result. We have a <div> with a class of up and the H1 element with Hello World. That was a Hello World example using two elements with raw JavaScript.
[01:19] 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.
[01:35] From that, we'll need to use the H function and the render function. First, let's create the <div> 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.
[01:53] Then, because we had a <div> 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.
[02:10] 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.
[02:32] 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.
[02:52] 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.
[03:22] 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 <div>, a class of up and then we'll nest inside it a H1 element with Hello World.
[03:42] 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.
[04:02] 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 <div> with the nested H1 inside of it.
[04:20] 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.
[04:36] 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.