Create React App From Scratch without create-react-app

Hey guys, here is the another video from our react js series - which is about create react app from scratch. In this video I have explained how to build react app without create react app using webpack. This can be considered as a create-react-app alternative

I hope you get a good understanding from this video and you are also enjoying my react tutorial in hindi. If you like it please like and share it and do let me know your feedback in the comment section. Stay tuned and happy learning.. :)

Good Luck,
Sofia Goyal

If you like my work you can support me and buy me a coffee at:
https://buy.stripe.com/14k2aI2if8apad...

----------------------------------------------------------------------------------------------------
Commands used in this video:

create package.json
npm init

install react packages
npm install react
npm i react-dom

install webpack packages
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev html-webpack-plugin webpack-merge

install babel packages
npm install --save-dev @babel/core babel-loader @babel/preset-react

.babelrc config file

{
   "presets": [
     ["@babel/preset-react", {
       "runtime" : "automatic"
     }]
   ]
 }

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry: './index.js',
 output: {
   path: path.join(__dirname, 'dist'),
   filename: 'bundle.js',
   clean: true,
 },
 plugins: [
   new HTMLWebpackPlugin({
     template: './index.html',
   }),
 ],
 module: {
   rules: [
     {
       test: /\.(js|jsx)/,
       exclude: /node_modules/,
       use: [{ loader: 'babel-loader' }],
     },
   ],
 },
};

webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');
module.exports = merge(common, {
 mode: 'development',
 devtool: 'inline-source-map',
 devServer: {
   static: './dist',
   port: 3000,
   open: true,
   hot: true,
   compress: true,
 },
});

webpack.prod.js

const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');
module.exports = merge(common, {
 mode: 'production',
 devtool: 'source-map',
});

run react app using webpack commands:

npx webpack serve --config webpack.dev.js
npx webpack --config webpack.prod.js

install parcel

npm install --save-dev parcel-bundler

run react app using parcel commands:

npx parcel index.html
----------------------------------------------------------------------------------------------------

HTML/CSS Interview Questions Series
HTML/CSS Interview Qustions

Javascript Closures
Closures In Javascript | JS Closures ...

Introduction to Promises:
Promises In Javascript - callback hel...

Event Loop Tutorial
Event Loop Javascript | Javascript Ev...

React interview questions series:
React Interview Questions | Basic Rea...

Javascript interview questions series:
Javascript Interview Questions

If you are looking for resume making tips, please checkout :
How to Make a Resume | Resume kaise b...

If you are willing to become a web developer, check this out :
How to become a Web Developer | The c...

For other interview tips and job change tips:
how to get job during covid | How I c...
how to prepare for an interview | int...
interview tips and techniques | inter...

I will keep making these tutorials and will try to put my best into this so that i can provide you with the most relevant content.

Please keep supporting and if you like it please share with your friends.

create react app from scratch
create react app from scratch 2022
create react app from scratch 2023
create react app from scratch using webpack
create react app from scratch typescript
create react app from package.json
create react app from existing project
create react app alternative
create react app with typescript
create react app without create-react-app
create react app without using create-react-app
create react app without create-react-app typescript


react tutorial
react tutorial for beginners
react tutorial 2023
react tutorial in hindi
react tutorial for beginners in hindi
reactjs tutorial for beginners
reactjs tutorial
reactjs tutorial in hindi
reactjs tutorial 2023
reactjs tutorial for beginners in hindi
react js tutorial
tutorial for react js
react js tutorial hindi
typescript tutorial for react js
tutorial for react

Stay Connected:

Linkedin : LinkedIn: sofia-goyal
Facebook : Facebook: sofigoyal14
Instagram : Instagram: sofi_goyal
Twitter : Twitter: SofiaGoyal14

#reactjs    #reactjstutorial   #react   #sofiagoyal

• #education
• #create_react_app_from_scratch_2022
• #create_react_app_from_scratch_2023
• #create_react_app_from_scratch_using_webpack
• #create_react_app_from_scratch_typescript
• #create_react_app_from_packagejson
• #create_react_app_from_existing_project
• #create_react_app_alternative
• #create_react_app_with_typescript
• #create_react_app_without_create_react_app
• #create_react_app_without_using_create_react_app
• #create_react_app_alternative
• #build_react_app_from_scratch
• #create_react_app