Use Cmder to be happy
https://cmder.net/
Step by step new React app without create-react-app command.
Next steps helped me to run clean react-app without additional commands:
Create folder hello-world
Go to the folder
Create filepackage.json
Runnpm init -y
Runnpm install react react-dom
Create file.gitignore
Insert in it next linesnode_modulesdist
Create folder app
Inside of «app»-folder create
file index.css and leave it empty
file index.js and insert next snippet
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component{
render(){
return(
<div>Hello World</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))file index.html and insert next snippet
<!DOCTYPE html>
<html>
<head>
<title>
Hello world application with React
</title>
</head>
<body>
<div id="app"></div>
</body>
</html>Run npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
To root folder add file webpack.config.js
Insert next code inside
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : './app/index.js',
output : {
path : path.resolve(__dirname , 'dist'),
filename: 'index_bundle.js'
},
module : {
rules : [
{test : /\.(js)$/, use:'babel-loader'},
{test : /\.css$/, use:['style-loader', 'css-loader']}
]
},
devServer: {
open: true
},
mode:'development',
plugins : [
new HtmlWebpackPlugin ({
template : 'app/index.html'
})
]
}Insert next code to package.json file right after main section
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
},
"scripts": {
"start": "webpack serve --mode development"
},After editing your package.json shoud look like this
{
"name": "check",
"version": "1.0.0",
"description": "",
"main": "index.js",
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
},
"scripts": {
"start": "webpack serve --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"style-loader": "^2.0.0",
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
}
}Runnpm run start
If it doesn’t work — suffer and search for any available solution.
I took initial version of this tutorial from here https://dev.to/vish448/create-react-project-without-create-react-app-3goh but on the 25th of December 2020 it didn’t work properly, because webpack version changed.
GLHF