tmpl-cli
api
docs
env
git
hbs
html
husky
jest
lintstaged
lisp
node
prettier
python
react
Summaryreact context [name]react fc [name]react fc [name] -c contextNamereact fc [name] -m mobxStoreNamereact fc [name] -treact initreact mst [name]
readme
schema
style
util
vue
web

$ tmpl react init

Create a new React project.

Files

project
└─src
└──styles
└───__import.css
└───main.css
└───reset.css
└──index.html
└──index.js
└──root.jsx
└─.babelrc
└─package.json
└─webpack.config.js

__import.css

@import "./reset.css";
@import "./main.css";

main.css

reset.css

html {
box-sizing: border-box;
font-size: 16px;
color: #212121;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
margin: 0;
padding: 0;
}
ol,
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
input {
padding: 0.5rem
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
button {
cursor: pointer;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="robots" content="noindex">
<title>React Project</title>
</head>
<body>
<div role="app" id="root"></div>
</body>
</html>

index.js

import { initReact } from "./root";
window.addEventListener("DOMContentLoaded", initReact);

root.jsx

import React from "react";
import { render } from "react-dom";
export const initReact = () => {
const root = "root";
const rootElement = document.getElementById(root);
if (rootElement) {
render(<div>React Working</div>, rootElement);
} else {
console.error(`Could not find element with ID: ${root}`);
}
};

.babelrc

{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

package.json

{
"name": "project",
"version": "0.0.0",
"description": "",
"browserslist": [
"last 2 versions",
"IE 11"
],
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"keywords": [],
"author": "developer<developer@developer.dev>",
"license": "ISC",
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"@babel/core": "^7.12.13",
"@babel/preset-env": "^7.12.13",
"@babel/preset-react": "^7.12.13",
"@testing-library/react": "^11.2.5",
"autoprefixer": "^10.2.4",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"cssnano": "^4.1.10",
"html-webpack-plugin": "^5.0.0",
"mini-css-extract-plugin": "^1.3.5",
"postcss-import": "^14.0.0",
"postcss-loader": "^5.0.0",
"postcss-preset-env": "^6.7.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack": "^4.44.2"
}
}

webpack.config.js

// Tools
const path = require("path");
// Plugins
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// Variables - Directory Target
const dir = path.resolve(__dirname);
const srcDir = path.join(dir, "src");
const distDir = path.join(dir, "dist");
const nodeModulesDir = path.join(dir, "node_modules");
// Variables - File Targets
const srcIndex = "index.js";
const srcTemplate = "index.html";
const distHtml = "index.html";
// Variables - Environment
const webpackMode = process.env.NODE_ENV === "production" ? "production" : "development";
const isProduction = webpackMode === "production";
// Variables - Other
const devPort = process.env.DEV_SERVER_PORT || 8080;
// Main Webpack Config
module.exports = {
target: "web",
mode: webpackMode,
entry: path.join(srcDir, srcIndex),
devServer: {
compress: true,
port: devPort,
open: true,
openPage: distHtml
},
output: {
path: path.resolve(distDir),
filename: "[name].[contenthash].js"
},
resolve: {
alias: [],
extensions: [".js", ".jsx", ".json"],
mainFields: ["browser", "main", "module"],
plugins: []
},
module: {
rules: [
{
test: /.(js|jsx)$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /.(sa|sc|c)ss$/,
include: dir,
enforce: "pre",
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: { importLoaders: 1, sourceMap: !isProduction, url: false }
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
ident: "postcss",
plugins: () => [
require("autoprefixer")(),
require("postcss-import")(),
require("postcss-preset-env")({ stage: 3 }),
isProduction
? require("cssnano")({
preset: [
"default",
{
discardComments: { removeAll: true }
}
]
})
: () => {}
]
}
}
}
]
},
{
test: /.(png|jp(e*)g|svg|ico)$/,
use: [
{
loader: "url-loader",
options: {
limit: 512,
name: "images/[hash]-[name].[ext]"
}
}
],
exclude: nodeModulesDir
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: distHtml,
template: path.join(srcDir, srcTemplate)
// minify: { collapseWhitespace: true }
}),
new MiniCssExtractPlugin({
filename: "main.[contenthash].css",
chunkFilename: "[name].[contenthash].css"
})
]
};