Skip to content

Instantly share code, notes, and snippets.

@JesseObrien
Last active August 2, 2016 14:01
Show Gist options
  • Save JesseObrien/5cbb969c06e20d53b2ce839d26bde3f0 to your computer and use it in GitHub Desktop.
Save JesseObrien/5cbb969c06e20d53b2ce839d26bde3f0 to your computer and use it in GitHub Desktop.
Example quick start for react/webpack.
{
"plugins": [
"react"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"ecmaVersion": 6,
"sourceType": "module",
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"rules": {
"react/prop-types": 0
}
}
/* global fetch */
import React, { Component, PropTypes } from 'react';
import 'whatwg-fetch';
// Remove these when you go live, mocking only!!
import fetchMock from 'fetch-mock';
fetchMock.get('http://example.com/greeting', { data: { greeting: 'Hello', name: 'Mr. Anderson' }});
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
greeting: 'Ayy what up?'
}
}
componentDidMount() {
// make an API call to an api to get the greeting
this.fetch_greeting = fetch('http://example.com/greeting')
.then(response => response.json())
.then(json => {
this.setState({
greeting: json.map(data => {
return data.greeting + " " + data.name;
})
});
});
}
render() {
return (
<div className="app-wrapper">
<h1>{this.state.greeting}</h1>
</div>
);
}
}
/*
Example file structure -- REMOVE ME
app/
|-- components/
|-- my-component.jsx
|-- containers/
|-- app.jsx
|-- main.js
|-- sass/
|-- app.scss
index.html
*/
/* global document require */
import 'es6-shim';
import './sass/app.scss';
import React from 'react';
import { render } from 'react-dom';
import App from './containers/app.jsx';
// Prevent the 300ms click delay on some browsers
var FastClick = require('fastclick');
FastClick.attach(document.body);
render(<App />, document.getElementById('app'));
{
"name": "example-react-app",
"version": "0.0.1",
"description": "Example React App",
"main": "main.js",
"scripts": {
"build": "webpack --progress --colors --inline -p --config webpack.config.js",
"start": "webpack-dev-server --progress --colors --inline",
"start_public": "webpack-dev-server --progress --colors --inline --host 0.0.0.0", // use this line for testing on ipads
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "",
"dependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"classnames": "^2.2.5",
"css-loader": "^0.23.1",
"es6-shim": "^0.35.1",
"eslint": "^3.0.1",
"eslint-loader": "^1.4.1",
"eslint-plugin-react": "^5.2.2",
"extract-text-webpack-plugin": "^1.0.1",
"fastclick": "^1.0.6",
"fetch-mock": "^5.0.1",
"file-loader": "^0.9.0",
"moment": "^2.14.1",
"node-sass": "^3.8.0",
"react": "^15.2.1",
"react-addons-css-transition-group": "^15.2.1",
"react-dom": "^15.2.1",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.14.0",
"whatwg-fetch": "^1.0.0"
}
}
var path = require('path');
var merge = require('webpack-merge');
var webpack = require('webpack');
const common_config = {
devtool: 'eval',
entry: path.join(__dirname, 'app/main.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: "bundle.js"
},
resolve: {
unsafeCache: true,
extensions: [
"",
".js",
".json",
".jsx",
".html",
".css",
".scss",
],
modules: [
"node_modules",
"/app"
]
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: 'node_modules',
loaders: [
"babel-loader",
"eslint-loader"
]
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.jpe?g$|\.gif$|\.png$/i,
loader: "file-loader?name=/img/[name].[ext]"
}
]
}
};
switch(process.env.npm_lifecycle_event) {
case 'build': {
config = merge(common_config, {
devtool: 'cheap-module-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.AggressiveMergingPlugin()
]
});
break;
}
default: {
config = merge(common_config, {});
}
}
module.exports = config;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment