├── src
├── components
│ └── .gitkeep
└── index.jsx
├── .gitignore
├── .babelrc
├── assets
└── stylesheets
│ └── application.scss
├── templates
└── index.html
├── .eslintrc.json
├── README.md
├── webpack.config.js
└── package.json
/src/components/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | dist
3 | /node_modules
4 | yarn-error.log
5 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [ "@babel/preset-env", "@babel/preset-react" ],
3 | "plugins": [ "transform-class-properties" ]
4 | }
5 |
--------------------------------------------------------------------------------
/assets/stylesheets/application.scss:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Helvetica;
3 | }
4 |
5 | #root {
6 | height: 100vh;
7 | display: flex;
8 | align-items: center;
9 | justify-content: center;
10 | }
11 |
--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React boilerplate
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb",
3 | "rules": {
4 | "no-console": "off",
5 | "comma-dangle": "off",
6 | "quotes": "off",
7 | "react/prop-types": 0,
8 | "arrow-body-style": 0,
9 | "space-before-function-paren": 0,
10 | "array-bracket-spacing": "off"
11 | },
12 | "env": {
13 | "browser": true
14 | },
15 | "parser": "babel-eslint"
16 | }
17 |
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import '../assets/stylesheets/application.scss';
5 |
6 | const Hello = ({ name }) => {
7 | return (
8 |
9 | Hello,
10 | {name}
11 |
12 | );
13 | };
14 |
15 | const root = document.getElementById('root');
16 | if (root) {
17 | ReactDOM.render(, root);
18 | }
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-boilerplate
2 |
3 | Simple react starter with the following config:
4 |
5 | - React, ReactDOM
6 | - Webpack 4
7 | - Babel with es2015 and react presets
8 | - Bootstrap (css only, loaded from a cdn in `index.html`)
9 | - work with `.js` or `.jsx` files
10 | - main `application.scss` stylesheet is imported in `index.js` as a module to enjoy hot reloading
11 |
12 | ## Scripts
13 |
14 | To start the local Webpack Dev Server (usually on port `8080`):
15 |
16 | ```bash
17 | yarn start
18 | ```
19 |
20 | To lint all JavaScript files in the `src` folder:
21 |
22 | ```bash
23 | yarn lint
24 | ```
25 |
26 | To build and deploy your app to `gh-pages` branch on the GitHub repo:
27 |
28 | ```bash
29 | yarn deploy
30 | ```
31 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require('html-webpack-plugin');
2 | const path = require('path');
3 |
4 | module.exports = {
5 | output: {
6 | path: path.resolve(__dirname, 'dist'),
7 | filename: 'bundle.js'
8 | },
9 | plugins: [
10 | new HtmlWebpackPlugin({
11 | template: '!!html-loader!templates/index.html'
12 | })
13 | ],
14 | devtool: 'sourcemap',
15 | mode: "development",
16 | module: {
17 | rules: [
18 | {
19 | test: /\.jsx?$/,
20 | exclude: /node_modules/,
21 | loader: 'babel-loader'
22 | },
23 | {
24 | test: /\.s?css$/,
25 | exclude: /node_modules/,
26 | loaders: [ 'style-loader', 'css-loader', 'sass-loader' ]
27 | },
28 | {
29 | test: /\.html$/,
30 | loader: 'html-loader'
31 | },
32 | ]
33 | },
34 | resolve: {
35 | extensions: [ '.js', '.jsx' ]
36 | }
37 | };
38 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "license": "UNLICENSED",
3 | "devDependencies": {
4 | "@babel/cli": "^7.1.5",
5 | "@babel/core": "^7.1.6",
6 | "@babel/preset-env": "^7.1.6",
7 | "@babel/preset-react": "^7.0.0",
8 | "babel-eslint": "^10.0.1",
9 | "babel-loader": "^8.0.4",
10 | "babel-plugin-transform-class-properties": "^6.24.1",
11 | "babel-preset-es2015": "^6.24.1",
12 | "babel-preset-react": "^6.24.1",
13 | "css-loader": "^1.0.1",
14 | "eslint": "^5.9.0",
15 | "eslint-config-airbnb": "^17.1.0",
16 | "eslint-plugin-import": "^2.14.0",
17 | "eslint-plugin-jsx-a11y": "^6.1.2",
18 | "eslint-plugin-react": "^7.11.1",
19 | "gh-pages": "^2.0.1",
20 | "html-loader": "^0.5.5",
21 | "html-webpack-plugin": "^3.2.0",
22 | "node-sass": "^4.14.0",
23 | "sass-loader": "^7.1.0",
24 | "style-loader": "^0.23.1",
25 | "webpack": "^4.26.1",
26 | "webpack-cli": "^3.1.2",
27 | "webpack-dev-server": "^3.1.14"
28 | },
29 | "dependencies": {
30 | "react": "16.2",
31 | "react-dom": "16.2"
32 | },
33 | "scripts": {
34 | "start": "webpack-dev-server --mode development",
35 | "lint": "eslint './src/**/*.js*'",
36 | "deploy": "webpack -p && gh-pages -d dist"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------