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 : / sofia-goyal
Facebook : / sofigoyal14
Instagram : / sofi_goyal
Twitter : / sofiagoyal14
#reactjs #reactjstutorial #react #sofiagoyal
Watch video Create React App From Scratch without create-react-app online without registration, duration hours minute second in high quality. This video was added by user Sofia Goyal 30 August 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,00 once and liked it 7 people.