Create a React App WITHOUT Create React App

Create a React App from scratch without using create-react-app. Learn about webpack, babel, react, and react-dom.

💻 My Software 💻

📚 My Courses 📚

👩‍💻 Download Code 👨‍💻

⌛ Timestamps ⌛
0:00 - Introduction
0:12 - What is Create React App?
0:48 - Why not use Create React App?
1:15 - What do we need to Create a React Application?
2:13 - What is a Transpiler? Why do we need one?
2:49 - What is a Module Bundler? Why do we need one?
3:18 - What Transpiler will we be using? What is Babel?
3:40 - What Module Bundler will we be using? What is webpack?
4:14 - Initializing Project as an NPM Project
4:54 - Installing React
5:06 - Installing react-dom. What is react-dom?
5:46 - Installing webpack. What is webpack?
6:16 - Installing webpack-cli. What is webpack-cli?
6:46 - Installing webpack-dev-server. What is webpack-dev-server?
7:14 - Installing @babel/core. What is @babel/core?
7:42 - Installing babel-loader. What is babel-loader?
8:34 - Installing @babel/preset-react. What is @babel/preset-react?
9:21 - Installing @babel/preset-env. What is @babel/preset-env?
9:51 - Installing html-webpack-plugin. What is html-webpack-plugin?
10:33 - Creating our webpack Configuration File
11:21 - Telling webpack the Entry Point of our Application
12:19 - Creating our Entry Point File
13:36 - Creating a React Component
15:08 - Telling webpack where to Place our Production Build
16:42 - Telling webpack where to Place our Bundled Files
18:17 - Configuring our webpack Loaders
20:55 - Creating a npm start Script
22:45 - Debugging
23:11 - Demonstrating our Development Environment
23:48 - Creating a npm run build Script
24:39 - Demonstrating our Production Build
25:47 - Outro

[aaaaanh]

Been doing web dev for quite a while with react but from this tutorial, I realize that I knew nothing about web dev. Really appreciate the clear and succinct demystification of the concepts and tools.

[vosyasabesquien]

this is one of the best 'use react without CRA' tutorials i found on youtube. So simple and so clear.

[azbrestjohn]

Man, if only in the IT school that I was, they had taught me how to create React applications without passing CRA first...
Too much abstraction kept me in the dark when using babel and webpack. Great video !

[filipesommer]

4k subscribers and yet explains this better than anything I've seen on the internet. Keep up the sublime work, you are fantastic!

[PsychticCamel]

Really excellent tutorial, definitely the best one I have seen on this particular topic. I really appreciate how you explain the purpose of each dependency, especially the roles of Webpack and Babel. Love having such a lightweight boilerplate-free React foundation. Cheers!

[webb-developer]

this is a must for any web beginner . thank you so much .

[eyondev]

This video was super helpful!! The thing that has always drawn me away from doing projects in javascript is the amount of abstraction required to start a project and how long create-react-app takes to run. I've followed along with the video, so I hope this reduces my internal reluctance to try out thing in new javascript projects (coming from a backend python dev)

[lucasalves]

Heeey, this is a hugely valuable tutorial. It's easy to get used to CRA and not to explore custom settings in a development environment. I'm not that experienced, so walkthrough bundling and transpiling configs were like a peak into what's going on "under the hood" to me.

[Beastintheomlet]

This single handed filled in so many gaps in my understanding post bootcamp. It wasn’t until recently I came to understand just how much create-react-app not only abstracts away but actively hides from you.

[josecanyousee]

I'm glad I didn't take the short cut. It's good to actually know what's going on. Thanks!

[doubleclickZA]

There was no way I could have done it on my own. Thank you. You deserve 100x views!

[xxxassbeaterxxx]

THIS TUTORIAL REALLY WORKS I AM FROM PHILIPPINES! THIS MAN DESERVES A SUBSCRIPTION!

[vinaysings]

really loved the way you explained everything in a crisp and concise yet detailed way. thanks a ton.

[mahmoudsamy]

You are really doing great, just simple and telling why for everything we need. Thank you so much for that. Really thankful

[SerhiiHromskyi]

Great tutorial. Here is an idea for part 2. Could you please extend this with support of different styling approaches like SCSS, CSS modules, CSS in JS, and maybe postCSS autoprefixer plugin?

[alexruedi]

totally scared how few views this video got!

great content, well explained, everything to know. It leaves me wondering what else CRA does. (Beside listening to all ports and causing weird effects, hiberfile warnings etc)

[PedroGentilOliveira]

Best tutorial I have found so far, worked first try😌. Tried different ones but could never make it work. And the explanations at each step helped greatly. Thanks

[prathameshthorat]

Really awesome tutorial. Love from India ❤♥

[santoshkharel]

This very informative, thank you very much for this bro, and I am subscribing. God bless

[dext]

Omg. i did it. Very thank you from East Europe