From the course: Building Modern Projects with React

Building a React project from scratch - React.js Tutorial

From the course: Building Modern Projects with React

Start my 1-month free trial Buy for my team

Building a React project from scratch

“

- [Instructor] All right, so now that we're familiar with the different tools that we're going to be taking a look at here, the first thing that we're going to do here actually, is we're going to see how to build a React project from scratch. Now, this might seem like a strange way to start a course on React ecosystem tools is by specifically building a React app that doesn't use any tools. Well, it will use Webpack as we'll see, but the reason that we're going to do this is because I've found that this really gives you a lot of insight into how React works, and really learn to sort of respect its boundaries as you start adding these other tools in. So, let's talk about the basic process here of creating a React app from scratch. The first thing to understand is the basics of how React works. I'm often surprised when I hear that more advanced React developers still don't quite understand the basic process of how a React app renders, so the first thing to know is that when we load a React app, right, when we open up a browser and put in a URL and the thing that we're loading, the site that we're loading is a React app, the first thing that arrives at our browser is actually just a single empty HTML file. It's mostly empty anyway, it doesn't usually have any kind of visual elements on it, and Reacts job is to actually programmatically fill this HTML file with our application, right? This process is called rendering, and it basically just involves creating elements and inserting them into this HTML file that's being displayed in our browser. All right, and finally, in order to make all of this process work for us, I'll explain why this is very shortly, we're going to need a tool called Webpack, which will basically convert the JSX syntax, right? That HTML-like syntax that we see in React files, into plain JavaScript that browsers can execute. Browsers aren't able to execute JSX by default. So, anyway, that is the basic process that we're going to be following here, so let's jump right in and see how to create a React app from scratch before we add these ecosystem tools to it.

Contents