Hello World in JS

[00:00] Let's get started by writing HTML right here. Inside of that, we'll add a body with a div that has the ID of root, and we'll close that up. Then inside of the body, we also want to have a script tag. So we'll add a script with the type is module.

[00:18] Our coding assistant here is going to say, hey, you want to do a source of index.js. We could totally do that. We could create a file, stick it in index.js. We're going to actually just stick everything directly in the root here. So let's follow these instructions. So these instructions are intended to be

[00:37] handled in JavaScript using the DOM APIs. So first, we're going to need to get our root element. So we're trying to retrieve this element. Actually, if we save the page right here and pop this open, then you'll notice we actually do have HTML. We have head. Where did head come from?

[00:55] Well, that's actually added for us by the browser. Then we have body. If I right-click and say View Page Source, you'll notice that we're just getting HTML body div script. There's no head in here. So the server is actually sending the basic HTML document we've got,

[01:13] but the browser will create a head for us automatically. In fact, it actually creates a HTML for us as well, even a body. Let's do this right here, refresh. So we get the HTML, we get the head, we get the body, and then all the contents of our document appear in there.

[01:33] But just to keep things a little bit more semantically correct, we'll at least add the HTML and the body here. Okay, great. So with that now, inside of the body, we've got our ID div of root and our script type module. So what we need to do is retrieve this div.

[01:52] Let's pull this up a bit. We'll bring up the console here, and I'm going to look for that div. If I say document.getElementByID root, now I have access to that root.

[02:10] So we're going to do that in our code right here, and that's going to be our root element. You could call it element if you would like. And with that now, we can append something to the root element. So I could say root element text content is hello world,

[02:30] and that actually would solve for our initial objective here. We're getting hello world on the page, but we want to do a little bit more with the DOM. So here, let's follow these instructions as we go. We're going to create a div with a JavaScript DOM API using document.createElement. So here's our element.

[02:48] It's going to be document.createElement. That's a div. And then with that, we also want to add a class name, just for the fun of it, just to kind of see what the experience is like. So we say element.className. And you'll notice, actually, we've got TypeScript helping us here. There's also a class list.

[03:06] So feel free to dive into that a little bit. That is a more powerful object that has methods on it that you can use to manipulate the class name. But we'll just say class name here. We'll give it container as our class name. And that takes care of that. Then we're going to add our text content for the element.

[03:26] So here, we'll just swap these, the element text content. We'll capitalize the H and the W so that we can have hello world. And if we save this and refresh the page here, we're going to see we don't have anything on the page. And the reason is because we may have accessed the root element

[03:45] and we may have created an element and mutated it, but that element isn't on the page until we add it. So this is part of the imperative nature of working with the DOM, is that you have to tell it, give it instructions for every little thing that you want it to do. And just because we created an element in memory and we have a variable for that element,

[04:04] it doesn't mean it's actually on the page yet. So we need to add it to the page by either adding, well, really the only way you do this is by adding it to an element that's already on the page. Typically, you're going to add it to something like an element with the ID of root or something, some element that's already on the page there.

[04:23] So we'll say root element append element, and that will get our hello world on the page. So now if we look at the results here, we've got our div ID of root, we created that with HTML, but then this whole element and everything, every part of it was created solely

[04:40] with the JavaScript APIs for the DOM. And it was appended to this root element using the root element append API. And that is your hello world in HTML.

[00:00] For the first step of this exercise, we're going to create Hello World in JavaScript using HTML. So we've got this index.html that's loaded up here. When you're all done, it should look something like this. It just says Hello World. There's not a lot to it. The instructions are here to guide you, so have a good time and we'll see you when you're done.

Learn everything you need to be effective with the fundamental building block of React applications. When you’re finished, you’ll be prepared to create React components to build excellent experiences for your app's users.

Starting with an HTML file and a script, you'll learn React API to build components and manage forms. Learn the fundamentals of building on the web with React.

React Fundamentals

React Hooks

Advanced React APIs

React Suspense

Advanced React Patterns

React Performance

React Server Components

Epic React Pro

React Fundamentals Intro

Intro

Generate the Root Node

Dad Joke Break

Intro to Raw React APIs

Create React Elements

Nesting Elements

Deep Nesting Elements

Dad Joke Break Raw React APIs

Raw React APIs

Intro to Using JSX

Compiling JSX

Interpolation

Spread props

Nesting JSX

Fragments

Dad Joke Break Using JSX

Using JSX

Intro to Custom Components

Simple Function

Raw API

JSX Components

Props

Dad Joke Break Custom Components

Custom Components

Intro to TypeScript

Narrow Types

Derive Types

Default Props

Reduce Duplication

Satisfies

Dad Joke Break TypeScript

TypeScript

Intro to Styling

Styling

Custom Component

Size Prop

Dad Joke Break Styling

Intro to Forms

Form

Form Action

Input Types

Submission

Form Actions

Dad Joke Break Forms

Forms

Intro to Inputs

Checkbox

Select

Radios

Hidden Inputs

Default Value

Dad Joke Break Inputs

Inputs

Intro to Error Boundaries

Composition

Other Errors

Reset

Dad Joke Break Error Boundaries

Error Boundaries

Intro to Rendering Arrays

Key prop

Focus State

Key Reset

Dad Joke Break Rendering Arrays

Rendering Arrays

Outro to React Fundamentals 

React Fundamentals

React Fundamentals

Transcript

Hello World in JS

Transcript