Skip to content

Instantly share code, notes, and snippets.

@gabsprates
Last active December 19, 2018 21:53
Show Gist options
  • Save gabsprates/f48cf7955cc4c14cf851f1165cab3bf7 to your computer and use it in GitHub Desktop.
Save gabsprates/f48cf7955cc4c14cf851f1165cab3bf7 to your computer and use it in GitHub Desktop.
🌐 💻 boilerplate to start a react app
root = true
[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
}
}
],
"@babel/preset-typescript",
"@babel/preset-react"
];
const plugins = [
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"
];
module.exports = { presets, plugins };
{
"name": "",
"version": "",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},
"author": "Gabriel Prates <gabsprates@gmail.com> (http://gabrielprates.com/)",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.1.0",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"@types/react": "^16.7.6",
"@types/react-dom": "^16.0.9",
"@types/react-select": "^2.0.10",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-select": "^2.1.2"
}
}
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<h1>App</h1>, document.querySelector("#root"));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Biblical Reading</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="root"></div>
</body>
</html>
{
"compilerOptions": {
"target": "esnext",
"moduleResolution": "node",
"allowJs": true,
"noEmit": true,
"strict": true,
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react"
},
"include": ["src"]
}
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
entry: "./src/js/index.tsx",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
},
devServer: {
contentBase: "./dist"
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
{ test: /\.[tj]sx?$/, loader: "babel-loader" },
{ test: /\.s?css$/, use: ["style-loader", "css-loader", "sass-loader"] }
]
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: path.resolve(__dirname, "./templates/index.html")
})
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment