Create a React App WITHOUT Create React App

[@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.

[@filipesommer8253]

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

[@azbrestjohn110]

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 !

[@webb-developer]

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

[@Psych0ticCamel]

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!

[@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)

[@lucasalves1068]

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.

[@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!

[@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.

[@codingwithdidem]

This video is underrated. DAMN! I learnt a lot thanks

[@WittCode]

Thanks so much!!

[@vinaysings7509]

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

[@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?

[@tootyrnt5533]

I second this, although webpack does have some pretty good documentation for using different loaders

[@shahistaahmed4554]

Thank you. I was really struggling with create-react-app. This really saved my time.

[@mahmoudsamy8366]

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

[@nehanalini1606]

Wow! indeed very helpful one. Thanks 🤗

[@alexruedi1995]

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)

[@santoshkharel1083]

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

[@dext430]

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

[@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

[@prathameshthorat4709]

Really awesome tutorial. Love from India ❤♥

[@jeramos409]

Solid explanation of how each piece fits together. Love it.

[@JThompson_VI]

Very helpful tutorial, thanks man.

[@bigdamo21635]

Great video! Very clearly explained and you've laid out the info in an easily digestible manner. Easy as to follow.

[@sagaayoub]

that was helpful brother. thank you.

[@programmed509]

very detailed and well explained 👏🏻👏🏻 thanks for the tutorial

[@kazeemkazeem3204]

Excellent tutorial. love how you explain everything going on, makes for better understanding.Thanks for this.

[@gm8584]

Thanks man, helped a lot, Have a great day!

[@kazmonroy]

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!

[@jaylearn2671]

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.

[@freddiewittmann1494]

Woooo! A new WittCode video!!!

[@hosseinkhalili9758]

thank you for this tutorial, keep going on.

[@Mikelon797]

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 ❤

[@00infinity39]

really surprisingly amazing explanation... keep up

[@xxxassbeaterxxx]

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

[@AwesomeAsh99]

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

[@_werther]

Thanks man, was awesome

[@rafayzia4180]

Excellently explained thank you ♥️

[@unskilled2023]

Well explained. straightforward

[@awabelmahe9700]

Wow man, thank you very much, this was very helpful.

[@AllNaturale11]

this was so so helpful! thank you!

[@bLitzKinG20]

Thank you bro! I learned a lot! Liked and subbed!

[@edumaba]

Just got yourself a subscriber! Thank you!

[@AyooluwaA]

it's finally ti. i'm ready to learn.

[@ajaygovinds]

Really appreciate the effort, learnt from every second of this video. Thank you very much :)

[@WittCode]

Great to hear Ajay!

[@essohanamalou7662]

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.

[@xx-fw1yq]

Nice, thanks for uploading 😊😊

[@lifeisbeautifu1]

amazing, thank you!

[@mightydudegrafuroam8424]

Thanks man! It was super helpful

[@CharlesDeukett]

Great video! helped me with a recent project.

[@filipjovic6815]

thanks, great video

[@caro.girlwithflowers]

thank u so much, it was verry usefull

[@codedByAyush]

The tutorial is super helpful!

[@maiaayaaoo7]

Thank you for your explanation

[@Gin_____]

Great tutorial

[@gofo9974]

Excellent video Thanks!!!

[@sohaibelbokhari8319]

Amazing, thks sir

[@jethrocarreon1527]

Thank you

[@shubhamagrawal7239]

Brilliant

[@jman100001591]

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

[@SauravTiru]

Can you upload a tutorial with es-build-loader instead of babel? It's tremendously faster in builds.

[@HanWae363]

Not me thinking CLI was C Language Integration prior to this video

[@miladmohammadi3233]

Awsome :)

[@adad8795]

Awesome 🔥

[@cursedtrousers8735]

Great video WittCode! By any chance can you make videos of that express series on your website?

[@WittCode]

Hey there! I am actually working on that now!

[@drekogrelord]

i love you man

[@VamviAgripa]

Detailed nice..

[@TarekFaham]

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?

[@SameeraSenarathna]

Good Stuff. Keep up the good work.

[@rohitchandak2482]

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.

[@vaibhavbajpai5521]

great content

[@konstantinvoronin4687]

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?

[@WittCode]

That's a good idea! After I submitted this video I was thinking those wouldve been good to add to the webpack configuration haha

[@tootyrnt5533]

Any way you can follow this tutorial with a simple implementation of SSR?

[@nicowindows4589]

Thanks!

[@scoobyflash9768]

This was informative. Can anyone explain why this method, Node listens on port 8080, while when using CRA it listens on port 3000?

[@Venormous98]

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

[@sayantanbhowmick3308]

how do you add a sample in that you have on your mac already

[@laded2807]

I get an error: "Cannot GET /"

[@shauryamittal1966]

Where does the port of React server come from? Can we change it?

[@jet7077]

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

[@anupsaha8175]

Did you get fruity or producer edition? Im looking to buy soft soft but i dont know if Producer edition is worth it...

[@xtraszone]

We have a bun now, which is even faster than vite

[@scalpertrader61]

How to check production build locally ?

[@gavrshchuk]

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.

[@AllNaturale11]

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?

[@MrHarshitp]

It was a nice video. I am still not able to load my images and css files. Any help on it?

[@py7432]

so what about, css and other static files like img, png etc.? I expected a complete version. : (

[@WittCode]

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

[@cancatalbas5747]

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

[@neerajkanojiya8098]

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'"

[@qismettagiyev3957]

npm start output: usr/bin/env: no such file directory Reply please

[@aminsoraya]

Prefect

[@memduhcevik]

nice title :D :D :D

[@danielasepulveda9942]

Aweso tutorial but I dont have a snare anywhere on my list. Wtf

[@CrimsonSwitz]

Where your part2 video???

[@salmanrazzaq5167]

😍

[@WittCode]

🤠

[@sonhoang2392]

How's it going? Did you learn how to use it?

[@zlackbiro]

You can't do better then Vite.

[@farzanekazemi7458]

awesome man!!!!!!!!!!!!!!!!!

[@DanielGarcia-vc7ci]

what the specific usage of @babel/core, wasn't use in webpack.config.js, Is it neccesary?