This is genuinely one of THE best-constructed tutorial videos I have ever watched in my life. This guy is making my life 10,000 times easier right now than it could be.
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.
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 !
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!
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.
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
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.
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)
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)
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.
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 ❤
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?
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
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?
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.
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
Dev server auto config is 8080 but with react I assume its at 3000 If you want to change it though you can include in your webpack.config.js in the devserver section "port: 3000" or whatever port number you prefer
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
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?
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'"
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
Yeah just covered JavaScript in this but the rest should be fairly similar. Find a plugin/module that handles those file extensions! Webpack also has some built in ones for assets like images
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.
This is genuinely one of THE best-constructed tutorial videos I have ever watched in my life. This guy is making my life 10,000 times easier right now than it could be.
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.
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 !
I'm glad I didn't take the short cut. It's good to actually know what's going on. Thanks!
4k subscribers and yet explains this better than anything I've seen on the internet. Keep up the sublime work, you are fantastic!
this is a must for any web beginner . thank you so much .
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!
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.
There was no way I could have done it on my own. Thank you. You deserve 100x views!
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
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.
This video is underrated. DAMN! I learnt a lot thanks
Thanks so much!!
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)
really loved the way you explained everything in a crisp and concise yet detailed way. thanks a ton.
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)
Thank you. I was really struggling with create-react-app. This really saved my time.
You are really doing great, just simple and telling why for everything we need. Thank you so much for that. Really thankful
This very informative, thank you very much for this bro, and I am subscribing. God bless
Great video! Very clearly explained and you've laid out the info in an easily digestible manner. Easy as to follow.
Solid explanation of how each piece fits together. Love it.
Omg. i did it. Very thank you from East Europe
Really awesome tutorial. Love from India ❤♥
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.
Thanks a lot!!!! Spend 2 days until found some video explaining how to create react app corectly, without CRA🎉🥳👍
Great to hear! Thanks for watching!
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 ❤
Excellent tutorial. love how you explain everything going on, makes for better understanding.Thanks for this.
Wow! indeed very helpful one. Thanks 🤗
very detailed and well explained 👏🏻👏🏻 thanks for the tutorial
Very helpful tutorial, thanks man.
Thanks man, helped a lot, Have a great day!
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 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
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.
really surprisingly amazing explanation... keep up
Wow man, thank you very much, this was very helpful.
Just got yourself a subscriber! Thank you!
Thank you bro! I learned a lot! Liked and subbed!
thank you for this tutorial, keep going on.
Well explained. straightforward
this was so so helpful! thank you!
it's finally ti. i'm ready to learn.
Nice, thanks for uploading 😊😊
Excellently explained thank you ♥️
Great video! helped me with a recent project.
Thanks man, was awesome
thank u so much, it was verry usefull
Thanks man! It was super helpful
Excellent explanation❤🎉
😀
Good Stuff. Keep up the good work.
amazing, thank you!
The tutorial is super helpful!
Woooo! A new WittCode video!!!
Thank you for your explanation
Not me thinking CLI was C Language Integration prior to this video
thanks, great video
Can you upload a tutorial with es-build-loader instead of babel? It's tremendously faster in builds.
Great tutorial
Excellent video Thanks!!!
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?
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.
Any way you can follow this tutorial with a simple implementation of SSR?
Awesome tutorial
Glad you liked it
Amazing, thks sir
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
Where does the port of React server come from? Can we change it?
how do you add a sample in that you have on your mac already
Did you get fruity or producer edition? Im looking to buy soft soft but i dont know if Producer edition is worth it...
This was informative. Can anyone explain why this method, Node listens on port 8080, while when using CRA it listens on port 3000?
Dev server auto config is 8080 but with react I assume its at 3000
If you want to change it though you can include in your webpack.config.js in the devserver section "port: 3000" or whatever port number you prefer
Thank you
Detailed nice..
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!
Awesome 🔥
Brilliant
It was a nice video. I am still not able to load my images and css files. Any help on it?
I get an error: "Cannot GET /"
Thanks!
great content
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
How to check production build locally ?
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?
i love you man
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'"
awesome man!!!!!!!!!!!!!!!!!
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
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
this is the long way of getting react. Vite does it so quick. in both cases I don't know what I am doing
haha yeah this is certainly a longer way of doing it but I personally like to know how it all comes together! But hey if it works it works!
npm start
output: usr/bin/env: no such file directory
Reply please
so what about, css and other static files like img, png etc.? I expected a complete version. : (
Yeah just covered JavaScript in this but the rest should be fairly similar. Find a plugin/module that handles those file extensions! Webpack also has some built in ones for assets like images
Awsome :)
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.
We have a bun now, which is even faster than vite
Where your part2 video???
Prefect
nice title :D :D :D
How's it going? Did you learn how to use it?
Aweso tutorial but I dont have a snare anywhere on my list. Wtf
😍
🤠