Skip to content

Instantly share code, notes, and snippets.

@mrsimpson

mrsimpson/ React starter kit.md

Last active October 30, 2018 07:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mrsimpson/f7bca4435a13f392c9a6fd51ff1b61a5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mrsimpson/f7bca4435a13f392c9a6fd51ff1b61a5 to your computer and use it in GitHub Desktop.
Download ZIP
React starter
Raw
React starter kit.md

React starter kit

This holds yet another (my) configuration for starting a react frontend project - for simple copying to an empty folder.

Purpose

This gist provides elementary configuration for starting a React project. It does not contain any backend framework, this can be added as per the requirements.

Features

  • ES6
  • fetch API
  • Sane linting config based on Airbnb

Contents

Configuration of

  • Webpack
  • Babel
  • necessary polyfills

Folder Structure

|- app  # the entire code which is going to be delivered to the client or server
  |- components # all React components, suffix .jsx
  |- lib    # other reusable code, preferrable pure functions
|- dist # the generated code - don't create or change this folder's contents
Raw
.eslintrc
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"classes": true
}
},
"env": {
"browser": true,
"node": true
},
"plugins": [
"react",
"react-native"
],
"extends": [
"airbnb"
],
"rules": {
"comma-dangle": 0,
"react-native/no-unused-styles": 2,
"react-native/split-platform-components": 2,
"import/prefer-default-export": "off",
"jsx-a11y/label-has-for": "off",
"no-plusplus": "off"
},
"settings": {
"react": {
"pragma": "React",
"version": "0.14.8"
}
}
}
Raw
.gitignore
**/node_modules
dist
.env
.DS_Store
Raw
package.json
{
"name": "<meaningful name>",
"version": "0.0.1",
"description": "",
"main": "index.js",
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-runtime"
]
},
"scripts": {
"build": "webpack",
"lint": "eslint ./app",
"lint-fix": "eslint ./app --fix",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/runtime": "^7.1.2",
"babel-polyfill": "^6.26.0",
"history": "^4.7.2",
"lodash": "^4.17.11",
"parse-link-header": "^1.0.1",
"prop-types": "^15.6.2",
"qs": "^6.5.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.0",
"dotenv": "^6.1.0",
"eslint": "^5.7.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-react-native": "^3.5.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
}
}
Raw
webpack.config.js
const path = require('path');
const webpack = require('webpack'); // remember to require this, because we DefinePlugin is a webpack plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const dotenv = require('dotenv');
module.exports = () => {
// call dotenv and it will return an Object with a parsed key
const env = dotenv.config().parsed;
// reduce it to a nice object, the same as before
const envKeys = Object.keys(env).reduce((prev, next) => {
prev[`process.env.${next}`] = JSON.stringify(env[next]);
return prev;
}, {});
return {
mode: 'development',
entry: ['babel-polyfill', 'whatwg-fetch', './app/index.jsx'],
resolve: {
extensions: ['.js', '.jsx']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
module: {
rules: [{
test: /.(js|jsx)$/,
use: 'babel-loader'
},
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './app/index.html'
}),
new webpack.DefinePlugin(envKeys)
],
devServer: {
historyApiFallback: true,
},
devtool: 'eval-source-map'
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment