maribel1995/.eslintrc.json

## .eslintrc.json
{
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "parser": "babel-eslint",
    "rules": {
        "semi": "error"
    }
}

## babel.config.json
{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

## package.json
{
  "name": "projectName",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production",
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/yourUrls.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/yourUrls/issues"
  },
  "homepage": "https://github.com/yourUrls#readme",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.6.0",
    "eslint": "^7.2.0",
    "eslint-plugin-react": "^7.20.0",
    "file-loader": "^6.0.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "jest": "^26.0.1",
    "source-map-loader": "^1.0.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

## public-index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

## src-index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <Router>
      <App />
  </Router>,
  document.getElementById("root")
);

## webpack.config.js
const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|gif|jpeg)$/,
        use: ["file-loader"],
      },
    ],
  },
  devtool: false,
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),
    new webpack.SourceMapDevToolPlugin({}),
  ],
};
	{
	"parserOptions": {
	"ecmaVersion": 7,
	"sourceType": "module",
	"ecmaFeatures": {
	"jsx": true
	}
	},
	"parser": "babel-eslint",
	"rules": {
	"semi": "error"
	}
	}
	{
	"presets": [
	"@babel/preset-react",
	[
	"@babel/preset-env",
	{
	"useBuiltIns": "usage",
	"corejs": 3
	}
	]
	]
	}
	{
	"name": "projectName",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "webpack-dev-server --open --mode development",
	"build": "webpack --mode production",
	"test": "jest"
	},
	"repository": {
	"type": "git",
	"url": "git+https://github.com/yourUrls.git"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"bugs": {
	"url": "https://github.com/yourUrls/issues"
	},
	"homepage": "https://github.com/yourUrls#readme",
	"devDependencies": {
	"@babel/core": "^7.10.2",
	"@babel/preset-env": "^7.10.2",
	"@babel/preset-react": "^7.10.1",
	"babel-eslint": "^10.1.0",
	"babel-loader": "^8.1.0",
	"css-loader": "^3.6.0",
	"eslint": "^7.2.0",
	"eslint-plugin-react": "^7.20.0",
	"file-loader": "^6.0.0",
	"html-loader": "^1.1.0",
	"html-webpack-plugin": "^4.3.0",
	"jest": "^26.0.1",
	"source-map-loader": "^1.0.0",
	"style-loader": "^1.2.1",
	"webpack": "^4.43.0",
	"webpack-cli": "^3.3.11",
	"webpack-dev-server": "^3.11.0"
	},
	"dependencies": {
	"core-js": "^3.6.5",
	"react": "^16.13.1",
	"react-dom": "^16.13.1",
	"react-router-dom": "^5.2.0"
	},
	"jest": {
	"moduleNameMapper": {
	"\\.(jpg\|jpeg\|png\|gif\|eot\|otf\|webp\|svg\|ttf\|woff\|woff2\|mp4\|webm\|wav\|mp3\|m4a\|aac\|oga)$": "<rootDir>/__mocks__/fileMock.js",
	"\\.(css)$": "<rootDir>/__mocks__/styleMock.js"
	}
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>React App</title>
	</head>
	<body>
	<div id="root"></div>
	</body>
	</html>
	import React from "react";
	import ReactDOM from "react-dom";
	import App from "./App";
	import { BrowserRouter as Router } from "react-router-dom";

	ReactDOM.render(
	<Router>
	<App />
	</Router>,
	document.getElementById("root")
	);
	const webpack = require("webpack");
	const HtmlWebPackPlugin = require("html-webpack-plugin");

	module.exports = {
	module: {
	rules: [
	{
	test: /\.(js\|jsx)$/,
	exclude: /node_modules/,
	use: {
	loader: "babel-loader",
	},
	},
	{
	test: /\.html$/,
	use: [
	{
	loader: "html-loader",
	},
	],
	},
	{
	test: /\.js$/,
	enforce: "pre",
	use: ["source-map-loader"],
	},
	{
	test: /\.css$/i,
	use: ["style-loader", "css-loader"],
	},
	{
	test: /\.(png\|svg\|jpg\|gif\|jpeg)$/,
	use: ["file-loader"],
	},
	],
	},
	devtool: false,
	devServer: {
	historyApiFallback: true,
	},
	plugins: [
	new HtmlWebPackPlugin({
	template: "./public/index.html",
	filename: "./index.html",
	}),
	new webpack.SourceMapDevToolPlugin({}),
	],
	};