Hello World Demo 💻

Hello. Welcome to the Hello World demo and example how to run it. So, I am in the React-foundation folder and I can take a look. There is a code folder in it. And if I go inside of the code, I can see there is a hello-world folder. So, inside of that folder, all I have is just one index.html file, and this is how it looks like. I'm pulling the dependencies from the CDN on pkg.com, and then I have my ReactDOM.render.

So, now let me go and step outside into the root folder and launch static node server. If you don't have it installed, you can type npm i node-static -g. I will not do it right now, because I already have it. So, the package name is node-static or node-static.

So, I open my browser at localhost port 8080. This is because I have static node server which is the node-static package running and it's serving my single HTML file from this path code/hello-world. This is because I've launched it from the root of my repository, so that's why I need to specify the path. The advantage of that, I can run other projects as well, not just Hello world.

So, what I'm seeing here, I have my heading h1 and then I have data-reactroot, data-reactroot. So, this is how React lets the browser and other technologies like JSX, because you might want to style this particular root or the entire structure of the directory differently or some other plugins they might rely on this notion. So, basically React is letting me know that this is my element. And then for equals yes. It's a special attribute. It's special because it's different in JSX. So, in the JSX and then in the React it's called htmlFor. So, if you go back you can see in my code htmlFor equals yes. This is my second argument which I'm passing to createElement.

So, it's very basic example. All I'm doing is creating element. I'm using an attribute, htmlFor, which gets translated into the for attribute in the HTML and then I'm mounting it in the ID content, div with ID content and the other result I can see that my h1 has data-reactroot.