From the course: Building Modern Projects with React

Creating a React script - React.js Tutorial

From the course: Building Modern Projects with React

Start my 1-month free trial Buy for my team

Creating a React script

“

- [Instructor] Alright, so now that we've created this HTML file that loads this JS file, the next thing that we're going to need to do is have this JS file actually start doing things like rendering React components. So here's what this is going to look like. First of all, we're obviously going to need to install React into our project because, well, so far we haven't done that. So, let's open up a terminal here, which you can do in code spaces just by going to terminal and then new terminal right there. And inside here you're going to need to first of all navigate to the React from scratch directory, with index.js and index.html inside of it, right? I have all of these other files that are just from the GitHub repo, just different settings files for the appearance of this IDE, things like that. So you can just ignore those, but we're going to need to say cd react-from-scratch and change directories into there. And you should be able to type pwd, which shows you the current directory you are in and see that you are in fact in React from scratch. And now the first thing you're going to want to do is create a new package.json file, which will keep track of things like the dependencies for our project, by saying npm.init -y That will just set up a new package.json file with all of the defaults. And now we can install the React libraries that we need by saying npm install react And we're also going to install a library called react-dom, and let's just hit enter, and that should install all of those for us. And now that we've done that, let's go back to our index.js file here. And here's what this is going to look like. We're going to start off by saying import React from 'react'; and then we're going to say import ReactDOM from 'react-dom'; These are the two packages that we just installed there. And now what we're going to do is we're going to say const app = Right, we're just going to create a component here. So let's add a capital A there, and then what we're going to do is we're going to return a simple H1 element that says something pretty similar to what we had in our index do HTML file. What we'll do here is we'll say something like H1, and we'll say something like "This is a React script." All right? Something like that. And then down below that, what we're going to do is we're going to say const container. This is the container element that we want to render our React app inside of. So that's going to be this div id of root that we've created. So here's what that's going to look like. We're going to say document.getElementById, and we're going to use the ID of root, as I said. And now that we have that container, we're going to say const root = createRoot and we're going to pass that container as an argument, right? We're basically saying that we want to create the root of our React application inside that container we just got a reference to. And now in order to render our React app, we just need to say root.render And if we want to render our app component, we can just say App, like so, and that should render our app component. All right, now, one big problem with this right now is that by default React syntax, right? This JSX syntax isn't actually supported by most browsers. So if we try and run this script in our browser now, what we'll see is that we'll get an error, because basically this JSX syntax, the idea of writing HTML elements in JavaScript code isn't something that's supported by most browsers. And what this means is that we actually will need to use a library that will convert this for us automatically to something that the browser can handle. Now, behind the scenes, what this is going to look like, and by the way, let's actually just change this. I had the wrong import here. This should be import { createRoot } from 'React-dom/client'; There we go. But what's actually going on behind the scenes, if we didn't want to use JSX, we could actually just say return React.createElement And to recreate this H1 element with the string inside of it, we could say H1 as the first argument to create element. The second argument would be the props that are getting passed to that. So we could just say null for that since this doesn't have any props. And then the third argument is the children that we're passing to that. So in other words, what you see here, most React developers actually go their entire careers without knowing this. But this is actually what's going on behind the scenes. This is what JSX, this syntax here gets converted to behind the scenes. So, if we wanted to rewrite this root.render thing, we could say React, oops, let's try that again. React.createElement and then pass our app component as the first argument. That's what happens when we want to render actual components. The second argument would be, again, the props. So we'd say null. The props actually would be an object like this, if we wanted to pass props like a: 1, b: 2, but since obviously we don't want to do that, we'll leave that as null. And then since there's no children here, we can just leave that empty. So actually we don't even need to pass the props at all. We can just say React.createElement(App) So, again, if we didn't want to use JSX in our React projects, this is what this would look like. But obviously we do want to use that. So let's actually just change this back to the JSX syntax, and in the next video we'll see how we can actually convert this automatically into that syntax using a tool called webpack.

Contents