How To Create A React App With React 18, Webpack 5, And Babel (2023 Update)

Create a React App from Scratch without any framework involved!
In this video you'll learn how to create a React application with React 18, Webpack 5 and Babel. Without any framework! The simplest way to kickstart a new React project in 2023 when you don't want to rely on too many external dependencies.
Table of contents:
- 00:00 Introduction
- 01:02 Set up a JS workspace with npm
- 01:47 Webpack 5 installation & set up
- 04:51 Compile JS with Webpack
- 07:50 Install React
- 08:54 Install Babel to render React
- 09:29 Configure Webpack & Babel
- 12:57 Create a React component
- 15:00 ReactDOM and root component
- 17:35 Use HTML Webpack plugin
- 19:40 Compile React for the browser
➡️ Read the blog post here hackteam.io/blog/create-react...
📚 This video is an excerpt of the livestream of React Projects Chapter 1 ( • 🔴 Build a React Projec... )
Learn more? Subscribe to my TH-cam channel (‪@gethackteam‬ ) where I will be live streaming every chapter from React Projects. Every livestream will handle a more complex topic. Or get the book React Projects packt.link/ReactProjects and start learning TODAY.
- - -
Subscribe to this channel to learn everything about web development. This example was taken from my book React Projects, which is available on
- Amazon amzn.to/3GJSy8b
- Packt packt.link/ReactProjects
Follow @gethackteam on Twitter / gethackteam

[@mohammedrafiq499]

Nice way you explained brother.

[@brendanwilding9689]

Thank you. You have no idea how many articles that don't work I had to read through before I found your excellent article. Medium, dev, youtube and other re-posted AI garbage make life hard!

[@gethackteam]

That's so good to hear! Good luck

[@SzymonRuszaa]

This is very useful, novadays everyone want just to create react app with one command, and its fine if you understand how it works under the hood. It's sad that almost every youtube video shouts just use THAT or use THAT, but defenitly dont use THAT!!! (becouse its slow, and there are betterr options!!!) Everyone is looking for shortcuts and easy-way. I'm glad that there are some dudes like you on this platform that make videos to help.

[@gethackteam]

Thanks a lot! Happy to hear you liked it. Personally I like to understand fundamentals before taking the easy path of abstraction

[@paoloose]

thanks, useful

[@brunocosta4889]

Really great video, Roy!👏It gives a deeper understanding of how React works how and webpack bundles JS under the hood. I look forward to your upcoming videos 😉

[@gethackteam]

Glad you enjoyed it! And yes I will definitely create more content to teach fundamentals :)

[@brunocosta4889]

@@gethackteam I would love to see one on React testing, especially when you have API calls and want to test those, as well as how they render in the UI, for example :)

[@gethackteam]

@@brunocosta4889 yes I will cover these in the livestream of chapter 5 / 6. so hang on :)

[@alankuo6666]

very nice content and clear explanation, thanks!

[@gethackteam]

Thanks a lot Alan, appreciate it!

[@simaa3697]

Is there any repo?

[@gethackteam]

You can find it here github.com/PacktPublishing/React-Projects-Second-Edition/tree/main/Chapter01. It’s slightly outdated but the video has the latest syntax

[@user-jw1pc9ls1x]

i'm from Russian. Good video, thanks

[@gethackteam]

Thanks for watching!

[@JoelByrd1]

I was getting an error after adding the HtmlWebpackPlugin and running `npm start` again - it's saying "Cannot find package '@babel/preset-react'" - I had to actually install @babel/preset-env and @babel/preset-react - I think you may have forgotten to include that in the tutorial? Otherwise, great tutorial!

[@gethackteam]

Thanks for mentioning! I’d have to check but could be the requirements changed after posting this video, if you’re not on the same React / Babel versions as in the video. Will verify and get back to you all :)