Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/colemars/react-config
A minimal react configuration with webpack, babel, hot-loader, and eslint
https://github.com/colemars/react-config
Last synced: 8 days ago
JSON representation
A minimal react configuration with webpack, babel, hot-loader, and eslint
- Host: GitHub
- URL: https://github.com/colemars/react-config
- Owner: colemars
- Created: 2019-02-12T19:31:57.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-11T04:58:43.000Z (almost 6 years ago)
- Last Synced: 2024-12-24T16:53:53.017Z (12 days ago)
- Language: JavaScript
- Homepage:
- Size: 141 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Application Configuration
#### By **Phil Mass**
## Description
_This is a configuration setup for a React application. In this setup, I use the latest versions of all of the npm packages and the most current recommendations to be as future-proof as possible_
_You can see the deployed app [here](https://philrmass.github.io/react-config/)._
## To Build a New Project from this Configuration
* Git clone the repository at https://github.com/philrmass/react-config.git to a local directory
* Add your own project code
## Steps to Recreate this Configuration
* Create the directory, init git and npm (you can accept the defaults, creates package.json)
```console
mkdir react-config
cd react-config
git init
npm init
```
* Install webpack, webpack-cli, and webpack-dev-server
* _Note: all packages are installed locally in the project (no globals) and can be accessed via package.json scripts_
```console
npm install --save-dev webpack webpack-cli webpack-dev-server
```
* Install the babel packages
```console
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
```
* Install the hot module replacement
```console
npm install --save-dev react-hot-loader
```
* Install eslint and the eslint webpack loader
```console
npm install --save-dev eslint eslint-loader eslint-plugin-react
```
* Install react and react-dom
```console
npm install --save react react-dom
```
* Add scripts to `./package.json` by adding the content:
```text
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode production",
"lint": "eslint src/** src/**/**"
},
```
* Create `./.gitignore` with the content:
```text
# npm and build, allow index.html
node_modules/
public/*
!public/index.html
# mac
.DS_STORE/
# vim
*.swp
```
* Add the webpack configuration file `./webpack.config.js` with the content:
```text
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.jsx',
module: {
rules: [
{
test: /\.(js|jsx)$/,
enforce: 'pre',
exclude: /node_modules/,
use: ['eslint-loader']
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
publicPath: '/',
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './public',
hot: true
}
};
```
* Create a babel configuration file at `./.babelrc` with the content:
```text
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
```
* Create an eslint configuration file at `./.eslintrc.json` with the content:
```text
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
```
* Create a `./public` directory and base file `.public/index.html` with the content:
```html
React Application
```
* Create a `./src` directory and entry point file `./src/index.jsx` with the content:
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(
,
document.getElementById('app')
);
module.hot.accept();
```
* Create a `./src/components` directory and an app component file `./src/components/App.jsx` with the content:
```javascript
import React from 'react';
function App() {
return (
React Application
);
}
export default App;
```
I put together the information contained here from the following sources:
* https://webpack.js.org/guides/installation/
* https://webpack.js.org/guides/getting-started/
* https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
* https://github.com/webpack-contrib/eslint-loader
* https://www.learnhowtoprogram.com/react
## Known Bugs
_None_
## Support and Contact Details
If you have any issues or questions, please email me at [email protected]
## Legal
Copyright (c) 2018 Phil Mass
This software is licensed under the MIT License