initial

Author: dhassaine

.gitignore

@@ -0,0 +1,49 @@
+/dist
+
+.eslintcache
+
+.DS_STORE
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+/lib/
+
+assets/images/thumbs/
+
+public

LICENSE

@@ -1,6 +1,6 @@
-MIT License
+The MIT License (MIT)
 
-Copyright (c) 2017 Djamel Hassaine
+Copyright (c) 2015 Ali Al Dallal
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,3 +19,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+

README.md

@@ -1,2 +1,97 @@
-# reactPureVsClass
-A comparison of using react pure components with higher order components and standard react classes
+# react-webpack-babel
+Simple React Webpack Babel Starter Kit
+
+Tired of complicated starters with 200MB of dependencies which are hard to understand and modify?
+
+Try this is a simple [React](https://facebook.github.io/react/), [Webpack](http://webpack.github.io/) and [Babel](https://babeljs.io/) application with nothing else in it.
+
+### What's in it?
+
+* Simple src/index.jsx and src/index.css (local module css).
+* Webpack configuration for development (with hot reloading) and production (with minification).
+* CSS module loading, so you can include your css by ```import styles from './path/to.css';```.
+* Both js(x) and css hot loaded during development.
+* [Webpack Dashboard Plugin](https://github.com/FormidableLabs/webpack-dashboard) on dev server.
+
+### To run
+
+* You'll need to have [git](https://git-scm.com/) and [node](https://nodejs.org/en/) installed in your system.
+* Fork and clone the project:
+
+```
+git clone https://github.com/alicoding/react-webpack-babel.git
+```
+
+* Then install the dependencies:
+
+```
+npm install
+```
+
+* Run development server:
+
+```
+npm start
+```
+
+* Or you can run development server with [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard):
+
+```
+npm run dev
+```
+
+Open the web browser to `http://localhost:8888/`
+
+### To build the production package
+
+```
+npm run build
+```
+
+### Nginx Config
+
+Here is an example Nginx config:
+```
+server {
+	# ... root and other options
+
+	gzip on;
+	gzip_http_version 1.1;
+	gzip_types text/plain text/css text/xml application/javascript image/svg+xml;
+
+	location / {
+		try_files $uri $uri/ /index.html;
+	}
+
+	location ~ \.html?$ {
+		expires 1d;
+	}
+
+	location ~ \.(svg|ttf|js|css|svgz|eot|otf|woff|jpg|jpeg|gif|png|ico)$ {
+		access_log off;
+		log_not_found off;
+		expires max;
+	}
+}
+```
+
+### Eslint
+There is a .eslint.yaml config for eslint ready with React plugin.
+To use it, you need to install additional dependencies though:
+
+```
+npm install --save-dev eslint eslint-plugin-react
+```
+
+To do the actual linting, run:
+
+```
+npm run lint
+```
+
+### Notes on importing css styles
+* styles having /src/ in their absolute path are considered part of the application and exported as local css modules.
+* other styles are considered global styles used by many components and are included in the css bundle directly.
+
+### Contribute
+Please contribute to the project if you know how to make it better, including this README :)

package.json

@@ -0,0 +1,58 @@
+{
+  "name": "react-webpack-babel",
+  "version": "0.0.3",
+  "description": "React Webpack Babel Starter Kit",
+  "main": "''",
+  "scripts": {
+    "build": "webpack --config webpack.production.config.js --progress --profile --colors",
+    "start": "webpack-dev-server --progress --profile --colors",
+    "lint": "eslint --ext js --ext jsx src || exit 0",
+    "dev": " webpack-dashboard -- webpack-dev-server --progress --profile --colors",
+    "test": "NODE_PATH=./src mocha --require jsdom-global/register --compilers js:babel-core/register --recursive 'src/**/*.spec.@(js|jsx)'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alicoding/react-webpack-babel"
+  },
+  "author": "Ali Al Dallal",
+  "license": "MIT",
+  "homepage": "https://github.com/alicoding/react-webpack-babel#readme",
+  "dependencies": {
+    "node-sass": "^4.3.0",
+    "react": "15.4.2",
+    "react-dom": "15.4.2",
+    "sass-loader": "^6.0.2"
+  },
+  "devDependencies": {
+    "babel-core": "^6.23.1",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^6.3.2",
+    "babel-plugin-transform-class-properties": "^6.22.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-es2015": "6.22.0",
+    "babel-preset-react": "^6.23.0",
+    "babel-runtime": "^6.22.0",
+    "chai": "^3.5.0",
+    "css-loader": "0.26.1",
+    "enzyme": "^2.8.2",
+    "extract-text-webpack-plugin": "^v2.0.0-rc.1",
+    "file-loader": "^0.10.0",
+    "html-webpack-plugin": "^2.26.0",
+    "jsdom": "^9.4.2",
+    "jsdom-global": "^2.0.0",
+    "mocha": "^3.3.0",
+    "postcss-loader": "^1.2.2",
+    "react-addons-test-utils": "^15.5.1",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "sinon": "^2.1.0",
+    "style-loader": "0.13.1",
+    "url-loader": "0.5.7",
+    "webpack": "^2.2.1",
+    "webpack-cleanup-plugin": "^0.4.2",
+    "webpack-dashboard": "^0.3.0",
+    "webpack-dev-server": "^2.4.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,16 @@
+const AUTOPREFIXER_BROWSERS = [
+  'Android 2.3',
+  'Android >= 4',
+  'Chrome >= 35',
+  'Firefox >= 31',
+  'Explorer >= 9',
+  'iOS >= 7',
+  'Opera >= 12',
+  'Safari >= 7.1',
+];
+
+module.exports = {
+  plugins: [
+    require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS })
+  ]
+}

src/app.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Toggle from './classBased/toggle';
+import Info from './classBased/info';
+
+import PureInfo from './pure/info';
+import PureToggle from './pure/toggle';
+
+export default class App extends React.Component {
+	render() {
+		return (
+			<div>
+				<h1>Keep your react components pure</h1>
+				<section>
+					<Toggle />
+					<div>
+						<Info>Pure functions are easier to reuse</Info>
+					</div>
+				</section>
+
+				<section>
+					<PureToggle />
+					<div>
+						<PureInfo>Pure functions are simpler to reason about</PureInfo>
+					</div>
+				</section>
+			</div>
+		)
+	}
+}

src/classBased/info.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export default class Info extends React.Component {
+	static propTypes = {
+		visible: React.PropTypes.bool,
+		children: React.PropTypes.node.isRequired
+	};
+	static defaultProps = {
+		visible: false
+	};
+	state = {
+		visible: this.props.visible
+	};
+
+	toggle() {
+		this.setState({ visible: !this.state.visible });
+	}
+
+	render() {
+		if (this.state.visible) {
+			return (
+				<span>
+					<span id="toggleInfo" onClick={() => this.toggle()}>Hide info: </span>
+					{this.props.children}
+				</span>
+			);
+		} else {
+			return <span id="toggleInfo" onClick={() => this.toggle()}>Show info</span>;
+		}
+	}
+}

src/classBased/info.spec.js

@@ -0,0 +1,51 @@
+
+import React from 'react';
+import Info from './info';
+import { assert } from 'chai';
+import { shallow } from 'enzyme';
+
+const infoMessage = 'Something important here';
+function renderInfoComponent(visible) {
+	return shallow(
+		<Info visible={visible}>
+			{infoMessage}
+		</Info>
+	);
+}
+
+function assertInfoVisible(wrapper) {
+	assert.isOk(wrapper);
+	const html = wrapper.html()
+	assert.include(html, 'Show info');
+	assert.notInclude(html, infoMessage);
+}
+
+function assertInfoHidden(wrapper) {
+	assert.isOk(wrapper);
+	const html = wrapper.html()
+	assert.include(html, 'Hide info');
+	assert.include(html, infoMessage);
+}
+
+describe('Info', function () {
+	it('Renders "show info"', function () {
+		const wrapper = renderInfoComponent(false);
+		assertInfoVisible(wrapper);
+	});
+
+	it('Renders info and "Hide info" button', function () {
+		const wrapper = renderInfoComponent(true);
+		assertInfoHidden(wrapper);
+	});
+
+	it('Can toggle info', function () {
+		const wrapper = renderInfoComponent(false);
+		assertInfoVisible(wrapper);
+
+		wrapper.find('#toggleInfo').simulate('click');
+		assertInfoHidden(wrapper);
+
+		wrapper.find('#toggleInfo').simulate('click');
+		assertInfoVisible(wrapper);
+	});
+});

src/classBased/toggle.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default class Toggle extends React.Component {
+	static propTypes = {
+		on: React.PropTypes.bool
+	};
+	static defaultProps = {
+		on: false
+	};
+	state = {
+		on: this.props.on
+	};
+
+	toggle() {
+		this.setState({on: !this.state.on});
+	}
+
+	render() {
+		return this.state.on ?
+			<span onClick={() => this.toggle()}>On</span> :
+			<span onClick={() => this.toggle()}>Off</span>
+	}
+}