├── .babelrc ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── package-lock.json ├── package.json ├── public └── index.html ├── src ├── components │ └── App.jsx ├── index.js └── styles │ └── components │ └── App.styl └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ], 6 | "plugins": [ 7 | "@babel/plugin-transform-runtime", 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "airbnb", 4 | "prettier" 5 | ], 6 | "plugins": [ 7 | "prettier" 8 | ], 9 | "rules": { 10 | "react/jsx-filename-extension": [ 11 | 1, 12 | { 13 | "extensions": [ 14 | ".js", 15 | ".jsx" 16 | ] 17 | } 18 | ], 19 | "react/prop-types": 0, 20 | "no-underscore-dangle": 0, 21 | "import/imports-first": [ 22 | "error", 23 | "absolute-first" 24 | ], 25 | "import/newline-after-import": "error" 26 | }, 27 | "globals": { 28 | "window": true, 29 | "document": true, 30 | "localStorage": true, 31 | "FormData": true, 32 | "FileReader": true, 33 | "Blob": true, 34 | "navigator": true 35 | }, 36 | "parser": "babel-eslint" 37 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node template 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # Typescript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # IDE 63 | .idea/* 64 | *.iml 65 | *.sublime-* 66 | 67 | # OSX 68 | .DS_Store 69 | .vscode 70 | 71 | # Docs Custom 72 | .cache/ 73 | yarn-error.log -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "semi": true, 4 | "singleQuote": true 5 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-base 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-base", 3 | "version": "1.0.0", 4 | "description": "React Base", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack --mode production", 8 | "start": "webpack serve --open", 9 | "format": "prettier --write '{*.js,src/**/*.{js,jsx}}'", 10 | "lint": "eslint src/ --fix" 11 | }, 12 | "keywords": [ 13 | "react", 14 | "webpack" 15 | ], 16 | "author": "Oscar Barajas ", 17 | "license": "MIT", 18 | "dependencies": { 19 | "@babel/core": "7.15.0", 20 | "@babel/preset-env": "7.15.0", 21 | "@babel/preset-react": "7.14.5", 22 | "babel-loader": "8.2.2", 23 | "css-loader": "6.2.0", 24 | "html-loader": "2.1.2", 25 | "html-webpack-plugin": "5.3.2", 26 | "react": "17.0.2", 27 | "react-dom": "17.0.2", 28 | "style-loader": "3.2.1", 29 | "stylus": "0.54.8", 30 | "stylus-loader": "6.1.0", 31 | "webpack": "5.50.0", 32 | "webpack-cli": "4.7.2", 33 | "webpack-dev-server": "3.11.2" 34 | }, 35 | "devDependencies": { 36 | "@babel/plugin-transform-runtime": "^7.15.0", 37 | "babel-eslint": "10.1.0", 38 | "eslint": "7.32.0", 39 | "eslint-config-airbnb": "18.2.1", 40 | "eslint-config-prettier": "8.3.0", 41 | "eslint-plugin-import": "2.24.0", 42 | "eslint-plugin-jsx-a11y": "6.4.1", 43 | "eslint-plugin-prettier": "3.4.0", 44 | "eslint-plugin-react": "7.24.0", 45 | "husky": "7.0.1", 46 | "lint-staged": "11.1.2", 47 | "mini-css-extract-plugin": "2.2.0", 48 | "prettier": "2.3.2" 49 | }, 50 | "husky": { 51 | "hooks": { 52 | "pre-commit": "lint-staged" 53 | } 54 | }, 55 | "lint-staged": { 56 | "*.{js,jsx}": [ 57 | "npm run format", 58 | "npm run lint", 59 | "git add" 60 | ] 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Base 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../styles/components/App.styl'; 3 | 4 | const App = () =>

Hello React!

; 5 | 6 | export default App; 7 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/App'; 4 | 5 | ReactDOM.render(, document.getElementById('app')); 6 | -------------------------------------------------------------------------------- /src/styles/components/App.styl: -------------------------------------------------------------------------------- 1 | body 2 | background-color blue -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebPackPlugin = require('html-webpack-plugin'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | 5 | module.exports = { 6 | entry: './src/index.js', 7 | output: { 8 | path: path.resolve(__dirname, 'dist'), 9 | filename: 'bundle.js', 10 | }, 11 | resolve: { 12 | extensions: ['.js', '.jsx'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.(js|jsx)$/, 18 | exclude: /node_modules/, 19 | use: { 20 | loader: 'babel-loader', 21 | }, 22 | }, 23 | { 24 | test: /\.html$/, 25 | use: [ 26 | { 27 | loader: 'html-loader', 28 | }, 29 | ], 30 | }, 31 | { 32 | test: /\.css|.styl$/, 33 | use: [ 34 | { 35 | loader: MiniCssExtractPlugin.loader, 36 | }, 37 | 'css-loader', 38 | 'stylus-loader', 39 | ], 40 | }, 41 | ], 42 | }, 43 | plugins: [ 44 | new HtmlWebPackPlugin({ 45 | template: './public/index.html', 46 | filename: './index.html', 47 | }), 48 | new MiniCssExtractPlugin({ 49 | filename: 'assets/[name].css', 50 | }), 51 | ], 52 | }; 53 | --------------------------------------------------------------------------------