Create a React App WITHOUT Create React App
HTML-код
- Опубликовано: 9 июл 2024
- Create a React App from scratch without using create-react-app. Learn about webpack, babel, react, and react-dom.
👩💻 Download Code 👨💻
wittcode.com
🛜 Download My Chrome Extension 🛜
chromewebstore.google.com/det...
💻 Compare Laptop Specs 💻
laptopspectable.com
🔴 Rare Pokemon Cards ⚪️
rarepokemoncards.com
👻 90s Nostalgia 👻
goosebumpsforsale.com
⌛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:19 - What our package.json File should look like
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
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.
this is one of the best 'use react without CRA' tutorials i found on youtube. So simple and so clear.
Woooo! A new WittCode video!!!
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 !
Hey man, amazing job, for real! I learnt a ton, I really enjoy how you explain every concept and step, really insightful. I'll watch more videos from your channel, but keep up the amazing job you are doing ❤
4k subscribers and yet explains this better than anything I've seen on the internet. Keep up the sublime work, you are fantastic!
Solid explanation of how each piece fits together. Love it.
Great video! Very clearly explained and you've laid out the info in an easily digestible manner. Easy as to follow.
Thank you. I was really struggling with create-react-app. This really saved my time.
very detailed and well explained 👏🏻👏🏻 thanks for the tutorial
There was no way I could have done it on my own. Thank you. You deserve 100x views!
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.
really loved the way you explained everything in a crisp and concise yet detailed way. thanks a ton.
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!
Thanks man, helped a lot, Have a great day!
Thanks man, was awesome
Excellent tutorial. love how you explain everything going on, makes for better understanding.Thanks for this.
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.
Wow! indeed very helpful one. Thanks 🤗
THIS TUTORIAL REALLY WORKS I AM FROM PHILIPPINES! THIS MAN DESERVES A SUBSCRIPTION!
Thanks man! It was super helpful
this is a must for any web beginner . thank you so much .
Thank you bro! I learned a lot! Liked and subbed!
I'm glad I didn't take the short cut. It's good to actually know what's going on. Thanks!
Very helpful tutorial, thanks man.
You are really doing great, just simple and telling why for everything we need. Thank you so much for that. Really thankful
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)
this was so so helpful! thank you!
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
Wow man, thank you very much, this was very helpful.
Excellently explained thank you ♥️
Great video! helped me with a recent project.
amazing, thank you!
Really appreciate the effort, learnt from every second of this video. Thank you very much :)
Great to hear Ajay!
that was helpful brother. thank you.
thank you for this tutorial, keep going on.
Just got yourself a subscriber! Thank you!
Omg. i did it. Very thank you from East Europe
Well explained. straightforward
The tutorial is super helpful!
Nice, thanks for uploading 😊😊
This very informative, thank you very much for this bro, and I am subscribing. God bless
it's finally ti. i'm ready to learn.
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)
This video is underrated. DAMN! I learnt a lot thanks
Thanks so much!!
Awsome :)
Awesome 🔥
really surprisingly amazing explanation... keep up
thank u so much, it was verry usefull
Excellent video Thanks!!!
thanks, great video
Thank you for your explanation
Really awesome tutorial. Love from India ❤♥
Amazing, thks sir
Thank you so much for this tutorial! I just started learning React and got used to starting my projects with Vite. I was curious how to build everything from scratch and your video worked like a charm! Pretty straight forward. I event made it work with React v18 :)
Keep it up!
What was wrong when using version 18? It still worked but threw a deprecated reactDOM.render() message in the console. This can be 'fixed' by using createRoot(document.getElementById('root')) from the react-dom/client import.
Great video! Very useful, create-react-app abstracts way too much for someone like me who wants to fully understand react and how to develop with a react environment. Thank you
i love you man
Detailed nice..
Great tutorial
Brilliant
Thank you
great content
Thanks!
your're life saver. having to handle react logo and default style is something that i hate. i prefere having total control on what i'ma doing. i tried this but i didn't test it the way you did it before installing eslint jest and prettier and their plugins. so i've got some errors when compiling and i started thinking that maybe i should use cra or vite anyway. with your explanation i'm sure my problem is in some of my configurations with other libraries. thank you very much.
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?
I second this, although webpack does have some pretty good documentation for using different loaders
Great tutorial man really appreciate you explaining a lot of these dependencies. Obviously using CRA you get a million other dependencies so what kind of issues would you run into down the line using this much more simplified install compared to getting everything with CRA?? I'm guessing you'd just need to know any more specific modules for specific use going forward right
Great video WittCode! By any chance can you make videos of that express series on your website?
Hey there! I am actually working on that now!
how do you add a sample in that you have on your mac already
Fantastic tutorial! How you can develop parts of the application features using this method and integrate it with an existing application that is based on angularjs?
This was informative. Can anyone explain why this method, Node listens on port 8080, while when using CRA it listens on port 3000?
Did you get fruity or producer edition? Im looking to buy soft soft but i dont know if Producer edition is worth it...
so what about, css and other static files like img, png etc.? I expected a complete version. : (
Where does the port of React server come from? Can we change it?
Any way you can follow this tutorial with a simple implementation of SSR?
How to check production build locally ?
Hello! Thanks for your job. It's great!
Could you do a manual on how to configure es-lint and css-lint for react application?
That's a good idea! After I submitted this video I was thinking those wouldve been good to add to the webpack configuration haha
Good Stuff. Keep up the good work.
Not me thinking CLI was C Language Integration prior to this video
when we create a react project using the following command:
create-react-app
The size of the folder turns out to be around 250MB. Guess lots of redundant node_modules are added.
I was wondering how much would be the size of folder when produced the minimal way you have shown in this video?
I have challenged my-self to make a react-app pick node modules from globally installed modules on my hard drive. Struggling no luck so far.
Hey so im doing this again a few months after my initial comment and I'm stuck at the run build section. It's not working. It worked in the past but I don't know what the issue is. Can anybody help me?
Can you upload a tutorial with es-build-loader instead of babel? It's tremendously faster in builds.
Hello,
I have a problem I improve react project and i must data export for excel. Everything very good but then i gave jszip is not a consructure. I researched this error. and faund i can configure webpack. I went nodemodules>react-scripts and i faund webpack.config.js but i did not configure because there very complextive. Please help me bro
It was a nice video. I am still not able to load my images and css files. Any help on it?
awesome man!!!!!!!!!!!!!!!!!
nice title :D :D :D
Hi WittCode, very very usefull tutorial. I was following this and stuck into one package i.e. express server. Actually I am developing react api with mongo. Can you suggest some thing. For ex. error like: "Can't resolve 'async_hooks'"
npm start
output: usr/bin/env: no such file directory
Reply please
I feel ya. I've tried Ableton, Reaper, even shelled out for Cubase and I am no closer to understanding any of tNice tutorials than I was before. I don't
We have a bun now, which is even faster than vite
😍
🤠
I get an error: "Cannot GET /"
Why all these dev tools like webpack, prettier, eslint, stylelint, babel, jest, storybook, and others should be a part of your app?
It is like creating your own unique code editor for each new project.
It makes sense to have only source code in your project.
All these dev tools should be distributed separately as docker containers for example and you can run this docker container against your project's source code in order to build, test, start, lint.
How's it going? Did you learn how to use it?
Aweso tutorial but I dont have a snare anywhere on my list. Wtf
Where your part2 video???
You can't do better then Vite.
what the specific usage of @babel/core, wasn't use in webpack.config.js, Is it neccesary?