react-boilerplate
This package is a simple home-grown boilerplate to handle my React.Js projects. Creating a React application using modern JavaScript tools is basically broken down into a couple sections: react, redux, babel, and webpack.
Installation Notes
npm install --save react react-dom react-bootstrap react-router-dom react-router-bootstrap
npm install --save-dev babel-core babel-loader babel-preset-react classnames css-loader eslint eslint-plugin-react file-loader node-sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server
Configurations
.eslintrc
By default ESLint expects ECMAScript5 syntax. This can be changed by adding parserOptions
. Also ES6 global variables is managed through env
.
{
"env": { "es6": true },
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"emcaVersion": 6,
"sourceType": "module"
},
"plugins": [ "react" ]
}
.bablelrc
{
"presets": [
"react"
]
}
webpack.config.js
const path = require('path');
module.exports = {
entry: 'path/to/index.js',
output: {
path: path.resolve(__dirname, 'path/to/dist/dir'),
filename: 'bundle.js',
publicPath: '/'
},
devServer: {
contentBase: './dist',
historyApiFallback: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
}
Dev Notes
- npm packages installed, but aren't currently being used are:
react-fontawesome
,classnames
,eslint*
,file-loader
,url-loader
. - react-router-dom is a new package for react-router v4. Some things have changed. I also changed the
Header
component from using react-bootstrap to native bootstrap elements because I couldn't figure out how to useNavbar
withNavItem
andLink
components. It rendered nested anchors. - react-router-bootstrap is an intermittent solution to using bootstrap's
NavItem
with router'sLink
component. It rendered a nested anchor tag. One solution is to manipulate the browser's history object throughonclick
event or use an additional package.
References
- https://reactjs.org/docs/installation.html
- http://babeljs.io/docs/usage/babelrc/
- https://webpack.js.org/guides/installation/
- http://redux.js.org
- https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr
- https://github.com/h5bp/html5-boilerplate
- https://www.orbitmedia.com/blog/website-footer-design-best-practices/
- https://sass-guidelin.es/#the-7-1-pattern
- https://github.com/webpack-contrib/file-loader
- https://www.youtube.com/watch?v=VdyORTskPGA