chore(webpack-react-babel-prettier): npm run prettier:fix

webpack-react-babel-prettier/.prettierignore

@@ -0,0 +1 @@
+TODO

webpack-react-babel-prettier/.prettierrc

@@ -0,0 +1,5 @@
+{
+ "semi": true,
+ "singleQuote": true,
+ "trailingComma": "es5"
+}

webpack-react-babel-prettier/config/webpack.common.js

@@ -3,39 +3,39 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 //path is used to resolve properly across the OS
 const path = require('path');
 module.exports = {
-    //bundle *.js from this entry point
-    entry: path.resolve(__dirname, '../src/index.jsx'),
-    //create output file to be linked to index.html
-    output: {
-        filename: '[name].bundle.js',
-	path: path.resolve(__dirname, '../dist'),
-	clean: true,
-    },
-    module: {
-	rules: [
-	    {
-		//test all *.js using babel-loader
-		//test all *.jsx (e.g. React.js) using babel-loader
-		test: /\.(js|jsx)$/,
-		exclude: /node_modules/,
-		include: path.resolve(__dirname, '../src'),
-		use: ['babel-loader'],
-	    },
-	    {
-		//test all *.css using style-loader and css-loader
-		test: /\.css$/i,
-		use: ["style-loader", "css-loader"],
-	    },
-	]
-    },
-    resolve: {
-	extensions: ['*', '.js', '.jsx'],
-    },
-    plugins: [
-	// create a plugin instance so that you can use it several times anywhere
-	new HtmlWebpackPlugin({
-	    title: 'Production',
-	    template: path.resolve(__dirname, "../public/index.html")
-	}),
+  //bundle *.js from this entry point
+  entry: path.resolve(__dirname, '../src/index.jsx'),
+  //create output file to be linked to index.html
+  output: {
+    filename: '[name].bundle.js',
+    path: path.resolve(__dirname, '../dist'),
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        //test all *.js using babel-loader
+        //test all *.jsx (e.g. React.js) using babel-loader
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        include: path.resolve(__dirname, '../src'),
+        use: ['babel-loader'],
+      },
+      {
+        //test all *.css using style-loader and css-loader
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
     ],
+  },
+  resolve: {
+    extensions: ['*', '.js', '.jsx'],
+  },
+  plugins: [
+    // create a plugin instance so that you can use it several times anywhere
+    new HtmlWebpackPlugin({
+      title: 'Production',
+      template: path.resolve(__dirname, '../public/index.html'),
+    }),
+  ],
 };

webpack-react-babel-prettier/config/webpack.dev.js

@@ -4,13 +4,13 @@ const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 //merge() calls in the environment-specific configuration to include commons
 module.exports = merge(common, {
-    //set development mode
-    mode: 'development',
-    //enable strong source mapping
-    devtool: 'inline-source-map',
-    devServer: {
-	static: path.resolve(__dirname, '../dist'),
-	//When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true.
-	historyApiFallback: true,
-    },
+  //set development mode
+  mode: 'development',
+  //enable strong source mapping
+  devtool: 'inline-source-map',
+  devServer: {
+    static: path.resolve(__dirname, '../dist'),
+    //When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true.
+    historyApiFallback: true,
+  },
 });

webpack-react-babel-prettier/config/webpack.prod.js

@@ -1,8 +1,8 @@
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 module.exports = merge(common, {
-    mode: 'production',
-    //source maps encouraged in production
-    //choose mapping with fairly quick build speed like source-map
-    devtool: 'source-map',
+  mode: 'production',
+  //source maps encouraged in production
+  //choose mapping with fairly quick build speed like source-map
+  devtool: 'source-map',
 });

webpack-react-babel-prettier/package.json

@@ -1,38 +1,42 @@
 {
-    "private": true,
-    "name": "react-example",
-    "description": "React.js example",
-    "version": "0.1.0",
-    "main": "index.js",
-    "keywords": [
-        "react",
-        "webpack"
-    ],
-    "author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
-    "license": "GPL-3.0-or-later",
-    "engines": {
-        "node": ">=18.17.0"
-    },
-    "scripts": {
-        "start": "webpack serve --config config/webpack.dev.js",
-        "build": "webpack --config config/webpack.prod.js"
-    },
-    "devDependencies": {
-        "@babel/core": "7.23.9",
-        "@babel/preset-env": "7.23.9",
-        "@babel/preset-react": "7.23.3",
-        "babel-loader": "9.1.3",
-        "css-loader": "6.7.3",
-        "html-webpack-plugin": "5.5.3",
-        "style-loader": "3.3.2",
-        "webpack": "5.89.0",
-        "webpack-cli": "5.1.4",
-        "webpack-dev-server": "4.15.1",
-        "webpack-merge": "5.10.0"
-    },
-    "dependencies": {
-        "prop-types": "15.8.1",
-        "react": "18.2.0",
-        "react-dom": "18.2.0"
-    }
+  "private": true,
+  "name": "react-example",
+  "description": "React.js example",
+  "version": "0.1.0",
+  "main": "index.js",
+  "keywords": [
+    "react",
+    "webpack"
+  ],
+  "author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
+  "license": "GPL-3.0-or-later",
+  "engines": {
+    "node": ">=18.17.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack serve --config config/webpack.dev.js",
+    "build": "webpack --config config/webpack.prod.js",
+    "prettier": "prettier src --check",
+    "prettier:fix": "prettier --write \"**/*.+(js|jsx|json|css|md)\""
+  },
+  "devDependencies": {
+    "@babel/core": "7.23.9",
+    "@babel/preset-env": "7.23.9",
+    "@babel/preset-react": "7.23.3",
+    "babel-loader": "9.1.3",
+    "css-loader": "6.7.3",
+    "html-webpack-plugin": "5.5.3",
+    "prettier": "3.2.5",
+    "style-loader": "3.3.2",
+    "webpack": "5.89.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.1",
+    "webpack-merge": "5.10.0"
+  },
+  "dependencies": {
+    "prop-types": "15.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
 }

webpack-react-babel-prettier/readme.md

@@ -1,6 +1,7 @@
 # React.js Example
 
 ## Table of Contents
+
 0. [General](#general)
 1. [Links](#links)
 
@@ -8,10 +9,10 @@
 
 # Links
 
-* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
-* [Production](https://webpack.js.org/guides/production/)
-* [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
-* [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
-* [load CSS](https://masteringjs.io/tutorials/webpack/css-loader)
-* [load CSS](https://webpack.js.org/loaders/css-loader/)
-* [load CSS](https://blog.jakoblind.no/css-modules-webpack/)
+- [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k)
+- [Production](https://webpack.js.org/guides/production/)
+- [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
+- [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
+- [load CSS](https://masteringjs.io/tutorials/webpack/css-loader)
+- [load CSS](https://webpack.js.org/loaders/css-loader/)
+- [load CSS](https://blog.jakoblind.no/css-modules-webpack/)

webpack-react-babel-prettier/src/components/hello.jsx

@@ -2,16 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 //destructure props
-const Hello = ({msg}) => {
-    return (
-	<>
-	    <div>{msg}</div>
-	</>
-    );
-}
+const Hello = ({ msg }) => {
+  return (
+    <>
+      <div>{msg}</div>
+    </>
+  );
+};
 
-export default Hello
+export default Hello;
 
 Hello.propTypes = {
-    msg: PropTypes.string,
+  msg: PropTypes.string,
 };

webpack-react-babel-prettier/src/index.jsx

@@ -3,15 +3,15 @@ import ReactDOM from 'react-dom';
 import App from './main';
 //TODO remove debugging
 if (process.env.NODE_ENV !== 'production') {
-    console.log('development mode');
+  console.log('development mode');
 }
 //since react 18
 import { createRoot } from 'react-dom/client';
 //create root container
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById('root'));
 //render root app
 root.render(
-    <React.StrictMode>
-	<App />
-    </React.StrictMode>
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );

webpack-react-babel-prettier/src/main.jsx

@@ -3,8 +3,8 @@ import Home from './pages/home';
 export default function App() {
   return (
     <div>
-	<h1>React.js</h1>
-	<Home />
+      <h1>React.js</h1>
+      <Home />
     </div>
-  )
+  );
 }

webpack-react-babel-prettier/src/osm-query.json

@@ -1,20 +1,20 @@
 {
-    "queries": [
-	{
-	    "title": "Second hand shops",
-	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop=second_hand](area)->.shops;nwr[second_hand=yes](area)->.secondHands;(.shops;.secondHands;);out body center qt;"
-	},
-	{
-	    "title": "Organic bakeries",
-	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop=bakery][organic=yes](area);out body center qt;"
-	},
-	{
-	    "title": "Organic only shops",
-	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop][organic=only](area);out body center qt;"
-	},
-	{
-	    "title": "Public bookcases",
-	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[amenity=public_bookcase](area);out body center qt;"
-	}
-    ]
+  "queries": [
+    {
+      "title": "Second hand shops",
+      "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop=second_hand](area)->.shops;nwr[second_hand=yes](area)->.secondHands;(.shops;.secondHands;);out body center qt;"
+    },
+    {
+      "title": "Organic bakeries",
+      "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop=bakery][organic=yes](area);out body center qt;"
+    },
+    {
+      "title": "Organic only shops",
+      "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop][organic=only](area);out body center qt;"
+    },
+    {
+      "title": "Public bookcases",
+      "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[amenity=public_bookcase](area);out body center qt;"
+    }
+  ]
 }

webpack-react-babel-prettier/src/pages/home.jsx

@@ -6,27 +6,26 @@ import '../style.css';
 import jsonOsmQuery from '../osm-query.json';
 
 const Home = () => {
+  const rryOsmQuery = jsonOsmQuery.queries;
 
-    const rryOsmQuery = jsonOsmQuery.queries;
-
-    return (
-	<>
-	    <h2>Home</h2>
-	    <h3>(React.js Lambda Function Component)</h3>
-	    <Hello msg="Hello World!" />
-      <div className='container'>
+  return (
+    <>
+      <h2>Home</h2>
+      <h3>(React.js Lambda Function Component)</h3>
+      <Hello msg="Hello World!" />
+      <div className="container">
         <p>Blog RryOsmQuery</p>
-        <div className='rryOsmQuery'>
+        <div className="rryOsmQuery">
           {rryOsmQuery.map((query) => (
-            <div className='query' key={query.id}>
-              <p className='title'>{query.title}</p>
-              <p className='content'>{query.query}</p>
+            <div className="query" key={query.id}>
+              <p className="title">{query.title}</p>
+              <p className="content">{query.query}</p>
             </div>
           ))}
         </div>
       </div>
-	</>
-    );
-}
+    </>
+  );
+};
 
-export default Home
+export default Home;

webpack-react-babel-prettier/src/style.css

@@ -1,3 +1,9 @@
-h1 { color: red; }
-h2 { color: green; }
-h3 { color: blue; }
+h1 {
+  color: red;
+}
+h2 {
+  color: green;
+}
+h3 {
+  color: blue;
+}