React from Scratch

David Joseph Katz
A free video tutorial from David Joseph Katz
Software Engineer
4.4 instructor rating • 19 courses • 230,605 students

Lecture description

Explore React more thoroughly from a truly ground 0 "from scratch" perspective.

Learn more from the full course

React JS Web Development - The Essentials Bootcamp

Bootcamp on the React.js essentials. Gain a strong foundation of the core concepts, and build exciting and useful apps!

10:33:13 of on-demand video • Updated August 2019

  • Learn React the right and learn best practices.
  • Dive into the React engine, and learn how it works under the hood.
  • See how React fits in the big picture of web development.
  • Learn how to build applications from scratch.
  • Cover the crucial concepts of bundling and transpiling, and create frontend application build systems.
English Hey I think we can all agree that create-react-app is quite magic. It's perfect for diving into react code really fast and that's exactly why we started with it. That way you get hands on experience with react right away. But I don't think it's the approach you should take 100 percent of the time. Since create-react-app is magic, it hides many of the underlying details of react web development. You can't ignore those details, otherwise you're going to be stumped when it comes to small challenges like when you attempt to deploy your own react app. For these situations, it's crucial to know the overarching web development details like how exactly react is loaded on the browser, how it manipulates the core document that is represented by the html and more. So that's the purpose of this section. We're going to take a step back and get that big picture understanding of react's overall relationship with web development. And we'll start with one main goal to run a line of real code without any magic tools, without create-react-app, just all of our own code from ground zero. That way you truly understand react from scratch. All right. Since react is a Web application framework, if the goal is to run real code that means you have a sub goal of setting up a web application. So let's set one up. First off make sure in the react-bootcamp directory for this course then create a blank project to work with with the mkdir command. And how about calling this starter. Navigate into the starter directory and then go ahead and open it up in your code. And Ok, so as a web application a react project must have a core HTML document. So the default html page is the index.html file. Setting up as html will be a bit of a review. Since we already saw some examples from create-react-app but we actually haven't written the whole html ourselves from scratch. So let's do that now. All right. To start we write this !DOCTYPE tag and this identifies to the browser that we're serving an HTML document. After that we can write pairs of tags to destructure the overall page and we always start with the root level pair up HTML attacks then the HTML is split up into a head and body section. Again I think it's a little weird that they chose a medical analogy to go with it but it's actually quite useful since everything for the structure goes in the body and all the meta information goes in the head. For the first div within the actual body, let's have a div that says hello react. Right cool. Next let's load in some CSS and JavaScript. When serving up a web app the html is only one of the three core pillars the html is a structure. The CSS is the styling and then the javascript provides a dynamic functionality. We're gonna get to the CSS later but let's load in some js by providing a script tag at the end of the body section. This script tag is going to have a src attribute and this is going to point to an index.js file which we're going to create right now. So the default file is index.js and that's, go ahead and place it locally. Now it's important that you place this script reference at the end of the body section. And the reason is that JavaScript has the ability to insert elements into the. HTML document but when you run this kind of functionality within javascript it actually stops a browser from reading the rest of the HTML. So if you had divs over here and other tags after the script the browser would start passing those until it finished loading whatever was in this index.js file. Now you don't want the browser to stop reading the html and delay presenting content to the user because of a slow script. So as a quick and straightforward solution what we do is we place the script tag at the end of the body so that way it doesn't delay anything loading within the actual browser. OK back to the index.js file which you should have created. Let's do something simple. We're going to add a console.log of hi. All right cool. Now even though we haven't even written a single line or even a single character of react yet this is already pretty far for setting up the web app. We have two of the core pillars down each html and JavaScript. So let's go ahead and open up the browser and check this out. All right go ahead and open up a window on the browser and then instead of the regular html:// protocol we're going to directly use the file:// protocol. That way we can access the file system right from the browser. And if you specify a / you going to find the root of your overall operating system. Go in and find your react-bootcamp directory. For me that's in Users. And then David and then react-bootcamp and there is the overall project open up the starter directory and within theere, head to the index.html file. And if you look inside there it is the hello react div. Very cool! Go ahead and inspect the elements to open up the developer tools and what you find in the console is that indeed we get the message of Hi. Awesome. The html and JavaScript files are working. So now we're ready to move on to the big moment. We're ready to achieve the primary goal of running our own react code from scratch. First up we'll somehow need to get access to the react libraries. For now we don't need to install modules. The quickest way to actually do this is to get react loaded into your javascript using a content delivery network. In other words a CDN lookup react CDN. And this is essentially all the react code hosted on the cloud. So you'll find the CDN links right away from reactjs.org and the ones that you want are these top two for react.development as well as react-dom.development. All right. Head back to your index at html file once you have those and paste them above your script source index.js file. Now these scripts are loaded in order so in order for the index.js file to have access to the react code you need to make sure that react and react-dom are above the index.js file. All right. What do you have that head back to the index. js file. For now let's get to it the react code for our first bit of real code let's generate an element for the web page to appear using react. So remember how we explored the concept of React elements when we first explored react earlier with create-react-app. As a refresher, React elements are inner JavaScript objects for you act that represent HTML elements like divs paragraph tags image tags etc. Now normally we write the syntax for elements using JSX but in this case let's use a more verbose alternative syntax to create this element and that is React.createElement. This takes three arguments. First is the div. The second one are the elements props. Now props are another topic that we've looked into before and we won't have props for this element. So instead of providing an object let's use the null keyword. And finally as the third argument we have what we want to appear in the element itself. So how about some text that says react element. And since it's so exciting Why not an exclamation point. Cool! So that should create a react element, object. Now the reason we have this react code available without importing it again is because in our index .html. We've already loaded the entire react library above the script. So since it's loaded in the same index.html file is indexed.js file should have a valid react element defined Ok we go ahead and make the index.js file the full window again now with his element let's set it to a constant. Also called element now that we have this element Let's insert it to insert it we can use the React DOM.render method which we explored previously. The first argument to this is an element. So let's go ahead and pass in our element object. And the second argument is where we want the element to render. So right now we don't have any divs with an id yet. So why not just use the document body to insert the actual elemen. Cool! Now we still haven't fully explored this object of the document. There's a lot more to it. It's a very powerful and crucial object on its own for all of web development. Even beyond React for that matter. So we're going to return to it in greater detail later. All right, with that the goal has been achieved. We've written our React code so let's see the result back in the browser. Once you've saved the file with these changes go ahead and reload. And what you're going to find is that well, indeed we have the react element on the page. Awesome! But if you inspect the element what you're going to find is that we have a warning and it says rendering components directly into document body is discouraged. So Ouch. It's actually a bad practice to directly use the document body. So we already know the solution to this or a potential solution and that's within the index. html, to add a div with the id of root. Let's go ahead and get rid of his div of Hello react so that we have the one did with the id of root and now that we have that div back in the index.js file instead of document body you can use the document.getElementById function in its target the div with the id of root nice. All right. Make sure you have those changes. And then back in the browser now if you refresh the react element is still there and now the error is gone. Cool we got react running all considering the setup was very minimal. What's necessary is the html. The javascript reacts library code and then our own JavaScript file. Now one thing that's missing from before is a JSX syntax that we saw when we had to create-react-app started application. So as the next step in the project it's refactor our main element to not use react.createElement but instead to use the nice and clean JSX syntax.