diff --git a/pages/.babelrc b/pages/.babelrc
new file mode 100644
index 0000000..0960c01
--- /dev/null
+++ b/pages/.babelrc
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ "@babel/preset-env",
+ "@babel/preset-react"
+ ]
+}
\ No newline at end of file
diff --git a/pages/.eslintrc b/pages/.eslintrc
new file mode 100644
index 0000000..60df05f
--- /dev/null
+++ b/pages/.eslintrc
@@ -0,0 +1,13 @@
+{
+ "parser": "babel-eslint",
+ "extends": "react",
+ "env": {
+ "browser": true,
+ "node": true
+ },
+ "settings": {
+ "react": {
+ "version": "detect"
+ }
+ }
+}
\ No newline at end of file
diff --git a/pages/.prettierrc b/pages/.prettierrc
new file mode 100644
index 0000000..3a4d1e8
--- /dev/null
+++ b/pages/.prettierrc
@@ -0,0 +1,5 @@
+{
+ "semi": true,
+ "singleQuote": true,
+ "trailingComma": "es5"
+}
\ No newline at end of file
diff --git a/pages/README.md b/pages/README.md
new file mode 100644
index 0000000..211ffe9
--- /dev/null
+++ b/pages/README.md
@@ -0,0 +1 @@
+[source](https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/)
\ No newline at end of file
diff --git a/pages/index.html b/pages/index.html
new file mode 100644
index 0000000..8de457a
--- /dev/null
+++ b/pages/index.html
@@ -0,0 +1,10 @@
+
+
+
+
+ react-config-tutorial
+
+
+
+
+
diff --git a/pages/package.json b/pages/package.json
new file mode 100644
index 0000000..aeef8c8
--- /dev/null
+++ b/pages/package.json
@@ -0,0 +1,39 @@
+{
+ "name": "react-config-tutorial",
+ "version": "1.0.0",
+ "description": "react config tutorial",
+ "main": "index.js",
+ "scripts": {
+ "start": "webpack-dev-server --mode development",
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "format": "prettier --write \"src/**/*.js\"",
+ "eslint-fix": "eslint --fix \"src/**/*.js\"",
+ "build": "webpack --mode production"
+ },
+ "author": "Stefan Begerad",
+ "license": "GPL-3.0-or-later",
+ "dependencies": {
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.15.5",
+ "@babel/preset-env": "^7.15.4",
+ "@babel/preset-react": "^7.14.5",
+ "babel-eslint": "^10.1.0",
+ "babel-loader": "^8.2.2",
+ "css-loader": "^6.2.0",
+ "eslint": "^7.32.0",
+ "eslint-config-react": "^1.1.7",
+ "eslint-loader": "^4.0.2",
+ "eslint-plugin-react": "^7.25.1",
+ "html-webpack-plugin": "^5.3.2",
+ "less": "^4.1.1",
+ "less-loader": "^10.0.1",
+ "prettier": "2.4.0",
+ "style-loader": "^3.2.1",
+ "webpack": "^5.52.0",
+ "webpack-cli": "^4.8.0",
+ "webpack-dev-server": "^4.1.1"
+ }
+}
diff --git a/pages/src/index.js b/pages/src/index.js
new file mode 100644
index 0000000..76b0c2f
--- /dev/null
+++ b/pages/src/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './style/main.less';
+
+/*
+ *component Welcome
+ *using class syntax from ES6
+ *Webpack needs Babel to process ES6 into ES5 syntaxes in order for this class to work
+ */
+class Welcome extends React.Component {
+ render () {
+ return react-config-tutorial
;
+ }
+}
+ReactDOM.render(, document.getElementById('root'));
diff --git a/pages/src/style/header.less b/pages/src/style/header.less
new file mode 100644
index 0000000..0f63e05
--- /dev/null
+++ b/pages/src/style/header.less
@@ -0,0 +1,3 @@
+.header {
+ background-color: #3d3d;
+}
diff --git a/pages/src/style/main.less b/pages/src/style/main.less
new file mode 100644
index 0000000..af82fe0
--- /dev/null
+++ b/pages/src/style/main.less
@@ -0,0 +1,5 @@
+@import "header.less";
+@color: #f5adad;
+body {
+ background-color: @color;
+}
diff --git a/pages/webpack.config.js b/pages/webpack.config.js
new file mode 100644
index 0000000..25c2dd9
--- /dev/null
+++ b/pages/webpack.config.js
@@ -0,0 +1,49 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+ //tell Webpack to generate src maps
+ devtool: 'inline-source-map',
+ //entry point of app
+ entry: './src/index.js',
+ //put the output of the bundling process at this place
+ output: {
+ path: path.resolve(__dirname, 'build'),
+ publicPath: '/',
+ filename: 'bundle.js'
+ },
+
+ devServer: {
+ static: {
+ //tell server to serve from this place
+ directory: path.join(__dirname, '/build'),
+ },
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: [
+ //use babel-loader to transpile these file types
+ 'babel-loader',
+ //use esling-loader to hook JavaScript linter ESLint into Webpack
+ 'eslint-loader'
+ ]
+ },
+ {
+ test: /\.less$/,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ 'less-loader',
+ ],
+ },
+ ]
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: path.resolve('./index.html'),
+ }),
+ ]
+};