From the course: Building Modern Projects with React

Building a React project from scratch

From the course: Building Modern Projects with React

Start my 1-month free trial

Building a React project from scratch

“

- [Instructor] To start off this course, what we're going to do is build a React project from scratch. That is, without the help of Create React App or other boilerplate generators. This is a good experience for React developers to go through, at least once, since it gives a lot of insight into what goes on behind the scenes in a React app. And these are things that most developers don't ever think about. So, since this is not an introductory React course, I'm going to assume that you're already familiar with Create React App and might want to go a little deeper into the inner workings of a React project. Once we've built this rudimentary React application from scratch, we'll use it throughout the rest of the course to demonstrate how to incorporate each of the ecosystem tools and concepts one by one. So, the first thing you might be wondering is what do we actually need in order to create a React app from scratch without using a boilerplate generator? Well, the main things we need, each of which we'll cover in coming videos, are, one, an index.html file. This is what will be sent to the client and what React will render our app into. Two, we need support for ES6, since obviously, we'd rather write our code using modern JavaScript syntax. Three, we need webpack. This will take care of the actual building our app, as well as allow us to use things like CSS modules to style our app and we'll also use it to serve our app during development. The fourth thing we need is a root component. This is the base of our component tree. You can think of it as the container that holds the rest of our application components. And finally, the last thing we need is something called react-hot-loader, which will allow us to see the changes that we make to our app immediately in development without having to refresh our app every time. And that's really all we need. We'll see how to do each of these steps in the following videos.

Contents