Skip to content

Instantly share code, notes, and snippets.

@agoldis
Created April 7, 2018 19:54
Show Gist options
  • Save agoldis/94d9634cc78ab529eb1dac0292ed5b24 to your computer and use it in GitHub Desktop.
Save agoldis/94d9634cc78ab529eb1dac0292ed5b24 to your computer and use it in GitHub Desktop.
Minimal setup for project with react, webpack, babel 7, eslint, prettier
{
"presets": [
"@babel/preset-react",
["@babel/preset-env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]
]
}
module.exports = {
"extends": [
"standard",
"plugin:react/recommended",
"prettier",
"prettier/react",
"prettier/standard"
],
"plugins": [
"react",
"prettier",
"standard"
],
"env": {
"es6": true,
"node": true
},
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"prettier/prettier": "error"
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
<title>
Hello
</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from "react";
import { render } from "react-dom";
const root = document.getElementById("root");
render(<div>Hello from react</div>, root);
{
"name": "",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-serve"
},
"dependencies": {
"@babel/core": "^7.0.0-beta.44",
"@babel/preset-env": "^7.0.0-beta.44",
"@babel/preset-react": "^7.0.0-beta.44",
"babel-loader": "^8.0.0-beta.2",
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.9.0",
"eslint-config-react": "^1.1.7",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-import": "^2.10.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-react": "^7.7.0",
"eslint-plugin-standard": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.11.1",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"webpack": "^4.5.0",
"webpack-serve": "^0.3.1"
}
}
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment