Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:22Length:2 hours
Practical react fundamentals 400x277
  • Overview
  • Transcript

2.2 Hello World

One of the best ways to get started with a new language, library, or framework is to create a simple Hello World app. React is no different. Here, you'll remove most of the boilerplate code that was created by the create-react-app utility and start from absolute scratch to display some text on the screen.

2.2 Hello World

So here we are inside of the application that we just created and as you can see, it's fairly simplistic as far as a structure is concerned. I have this opened in Visual Studio code, node modules is obviously all of the dependent packages that our React app is needing in order to run. Then we have a public folder which has three files in it. It has our favorite icon, which is important for most websites that you create, a manifest file that kinda describes a little bit about our application. And then we have index.html, and if you take a look at this, it's actually fairly small. There's really not a whole lot going on in here we have a fairly basic head here, we do have a link to our favorite icon as well as some meta information in here. Then we also have a link to that manifest file. And then other than that, there's really not a whole lot going on in here. We have a title, it's called React app. Let's go ahead and modify that. We're gonna call this Hangman, or Hangman Clone if you will and then we have a new script section in here because obviously this is a React app which is basically built on JavaScript. So you need to have JavaScript to be able to run this application. Then we have a single div in here that has an idea of root. And this is gonna become very important when it comes to learning about creating React apps but really all that is is it's kind of a hook for us or a spot for us to hook into so that we can take our React app and load it into this page. And so we need to have some sort of div some sort o element on the on the page with an ID so that we can grab on to it and inject our application into it. And really, that's it. So this is just a very simple template that we're gonna be using for our app. So let's go ahead and save those changes and then we also have a source folder. Now the source folder is where pretty much all of the magic is going to take place. Now there's several different files in here and we're not gonna worry too much about them, but really all you really want to pay attention at this point is going to be index.js. So think of that is kind of our loading point for our application. This is where we're going to be loading in React and ReactDOM and you can bring in some CSS. If you want, you can bring in your app and you can do several different things. We're gonna kind of strip all of this away and we're gonna start from the bare bones. We're going to start from scratch and build this up and talk about this a little bit as we go. So now we understand some of the basics here, what I wanna do is I really want to blow everything in here away. So let's just go ahead and highlight everything that's in the source directory and let's go ahead and delete it all. So let's go ahead and hit Delete and it's okay, everything's gonna be all right. So now that we've got rid of all of that, let's come back into source and we're going to create a new file and we're simply gonna call this index.js. Now one of the things that I really like to do when I am working on a new programming language or a new framework is, I like to bring in the old hello world. And I'd like to talk a little bit about that, I like to start there so I can see what it takes to actually get up and running with a, like I said, with a new programming language or with a new framework, like React. So the first thing that we need to do is we need to bring in some of our dependencies, we need to get references to those so we can start to use them in our application. So typically when you're working with React, you're going to need two in this index file. So we're gonna import React, and import React is gonna be coming from React and since we've used the create React app, we know that's already going to be available for us. We're also going to need to bring in ReactDOM and we're gonna say that's coming from react-dom. So we have these two references that we're importing and then at this point we need to be able to take our application and go ahead and inject it into that index.html page. Now remember, within here we have this div called root and so what I want to do is hook into that and put something on this page. I need to put something in there so you can actually see it. So let's start very simple here and let's go ahead and create this application and let's inject something into that page. And the way that we do that is by using ReactDOM. So we're gonna say ReactDOM. And what I wanna do is I want to render something. And this is gonna take in a couple of different parameters. And so what I wanna do is I wanna be able to inject some React component in here I wanna inject some code in here. And I wanna specify where I wanna put it in the application. So let's say if I just came in and said I wanna put in here a paragraph tag and I want it to say, hello world and then I want to say, that I want to go into my document. And I wanted to get an element by ID. Now remember that there is a root element on there. I wanna go ahead and inject my code whatever my element is right here, into that element. So let's go ahead and save those changes and if everything is saved correctly, and if I head over here to my browser again, you can see I see hello world here now. So how did all of this work? What exactly is going on? Let's take a brief look at this right here. Now this might seem a little odd because I'm calling this render function. And if you take a look at this, you're gonna see that it's taking in an element, a React element. And all I did was put in here some what seems to be like HTML, and technically it kind of is, but it's not strictly HTML, it's actually JSX. So it's a JavaScript markup that allows us to create markup, create what seems to be HTML and ultimately React components, which we'll talk about in the next lesson when we start to work on that and create those. And it allows us to put all that together and inject that onto the page as HTML. But the nice thing about this is it's not a string, I don't have to send this over as a string and rendering in the DOM, it's actually going to allow me to be a little bit more flexible and to inject some expressions in there. So I can do more dynamic things in here than I could, if I was just using strings. And you're gonna see this kind of play out a little bit more as we get a little bit more in depth into creating our React app. So now you can see how I can start to build a simple React app and then get a hold of an ID on my index.html page and inject some JSX or ultimately kind of like some HTML on the page. Now we're gonna take this a step further, and we're going to start by creating the fundamental constructs that you're gonna be spending a lot of time using in React, and that's known as a component.

Back to the top