Sub4Sub network gives free YouTube subscribers
Get Free YouTube Subscribers, Views and Likes

Create React App From Scratch without create-react-app

Follow
Sofia Goyal

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 createreactapp 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 reactdom

install webpack packages
npm install savedev webpack webpackcli webpackdevserver
npm install savedev htmlwebpackplugin webpackmerge

install babel packages
npm install savedev @babel/core babelloader @babel/presetreact

.babelrc config file

{
"presets": [
["@babel/presetreact", {
"runtime" : "automatic"
}]
]
}

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('htmlwebpackplugin');
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: 'babelloader' }],
},
],
},
};

webpack.dev.js

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

webpack.prod.js

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

run react app using webpack commands:

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

install parcel

npm install savedev parcelbundler

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 createreactapp
create react app without using createreactapp
create react app without createreactapp 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 :   / sofiagoyal  
Facebook :   / sofigoyal14  
Instagram :   / sofi_goyal  
Twitter :   / sofiagoyal14  

#reactjs #reactjstutorial #react #sofiagoyal

posted by tiggie45kt