├── src
    └── MyComponent.js
├── example
    └── src
    │   ├── app.js
    │   ├── index.html
    │   ├── app.less
    │   └── standalone.html
├── .editorconfig
├── .gitignore
├── bower.json
├── gulpfile.js
├── package.json
├── dist
    ├── my-component.min.js
    └── my-component.js
├── LICENSE
├── README.md
└── gulpconfig.js


/src/MyComponent.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | 
 3 | var MyComponent = React.createClass({
 4 | 	
 5 | 	render: function() {
 6 | 		return <div>My Component</div>;
 7 | 	}
 8 | 	
 9 | });
10 | 
11 | module.exports = MyComponent;
12 | 


--------------------------------------------------------------------------------
/example/src/app.js:
--------------------------------------------------------------------------------
 1 | var React = require('react'),
 2 | 	MyComponent = require('my-component');
 3 | 
 4 | var App = React.createClass({
 5 | 	render: function() {
 6 | 		return (
 7 | 			<div>
 8 | 				<MyComponent />
 9 | 			</div>
10 | 		)
11 | 	}
12 | });
13 | 
14 | React.render(<App />, document.getElementById('app'));
15 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # This file is for unifying the coding style for different editors and IDEs
 2 | # editorconfig.org
 3 | root = true
 4 | 
 5 | [*]
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = false
 9 | insert_final_newline = true
10 | indent_style = tab
11 | 
12 | [*.json]
13 | indent_style = space
14 | indent_size = 2
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Coverage tools
11 | lib-cov
12 | coverage
13 | coverage.html
14 | .cover*
15 | 
16 | # Dependency directory
17 | node_modules
18 | 
19 | # Example build directory
20 | example/dist
21 | 
22 | # Editor and other tmp files
23 | *.swp
24 | *.un~
25 | *.iml
26 | *.ipr
27 | *.iws
28 | *.sublime-*
29 | .idea/
30 | *.DS_Store
31 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-component",
 3 |   "main": "dist/my-component.min.js",
 4 |   "version": "0.0.1",
 5 |   "homepage": "https://github.com/JedWatson/react-input-autosize",
 6 |   "authors": [
 7 |     "Jed Watson"
 8 |   ],
 9 |   "description": "My React Component",
10 |   "moduleType": [
11 |     "amd",
12 |     "globals",
13 |     "node"
14 |   ],
15 |   "keywords": [
16 |     "react",
17 |     "react-component"
18 |   ],
19 |   "license": "MIT",
20 |   "ignore": [
21 |     ".editorconfig",
22 |     ".gitignore",
23 |     "package.json",
24 |     "src",
25 |     "node_modules",
26 |     "example",
27 |     "test"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp'),
 2 | 	initGulpTasks = require('react-component-gulp-tasks');
 3 | 
 4 | 
 5 | /**
 6 |  * Task configuration is loaded from config.js
 7 |  * 
 8 |  * Make any changes to the source or distribution files
 9 |  * and directory configuration there
10 |  */
11 | 
12 | var config = require('./gulpconfig');
13 | 
14 | 
15 | /**
16 |  * Tasks are added by the react-component-gulp-tasks package
17 |  * 
18 |  * See https://github.com/JedWatson/react-component-gulp-tasks
19 |  * for documentation.
20 |  * 
21 |  * You can also add your own additional gulp tasks if you like.
22 |  */
23 | 
24 | initGulpTasks(gulp, config);
25 | 


--------------------------------------------------------------------------------
/example/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 | 	<title>React Starter Component</title>
 4 | 	<link rel="stylesheet" href="app.css">
 5 | </head>
 6 | <body>
 7 | 	<div class="container">
 8 | 		<h1>React Starter Component</h1>
 9 | 		<h2><a href="http://github.com/JedWatson/react-component-starter">View project on GitHub</a></h2>
10 | 		<!-- the example app is rendered into this div -->
11 | 		<div id="app"></div>
12 | 		<!-- put any hints about your component example here -->
13 | 		<div class="hint">
14 | 			The example React app is rendered above.
15 | 		</div>
16 | 		<div class="footer">
17 | 			Copyright &copy; Jed Watson 2014. MIT Licensed.
18 | 		</div>
19 | 	</div>
20 | 	<script src="common.js"></script>
21 | 	<script src="bundle.js"></script>
22 | 	<script src="app.js"></script>
23 | </body>
24 | 


--------------------------------------------------------------------------------
/example/src/app.less:
--------------------------------------------------------------------------------
 1 | /* 
 2 | // Examples Stylesheet
 3 | // -------------------
 4 | */
 5 | 
 6 | body {
 7 | 	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 8 | 	font-size: 14px;
 9 | 	color: #333;
10 | 	margin: 0;
11 | 	padding: 0;
12 | }
13 | 
14 | a {
15 | 	color: #08c;
16 | 	text-decoration: none;
17 | }
18 | 
19 | a:hover {
20 | 	text-decoration: underline;
21 | }
22 | 
23 | .container {
24 | 	margin-left: auto;
25 | 	margin-right: auto;
26 | 	max-width: 720px;
27 | 	padding: 1em;
28 | }
29 | 
30 | .footer {
31 | 	margin-top: 50px;
32 | 	border-top: 1px solid #eee;
33 | 	padding: 20px 0;
34 | 	font-size: 12px;
35 | 	color: #999;
36 | }
37 | 
38 | h1, h2, h3, h4, h5, h6 {
39 | 	color: #222;
40 | 	font-weight: 100;
41 | 	margin: 0.5em 0;
42 | }
43 | 
44 | label {
45 | 	color: #999;
46 | 	display: inline-block;
47 | 	font-size: 0.85em;
48 | 	font-weight: bold;
49 | 	margin: 1em 0;
50 | 	text-transform: uppercase;
51 | }
52 | 
53 | .hint {
54 | 	margin: 15px 0;
55 | 	font-style: italic;
56 | 	color: #999;
57 | }
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-component",
 3 |   "version": "0.0.1",
 4 |   "private": true,
 5 |   "description": "My React Component",
 6 |   "main": "src/Component.js",
 7 |   "author": "Jed Watson",
 8 |   "license": "MIT",
 9 |   "homepage": "https://github.com/JedWatson/react-component-starter",
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/JedWatson/react-component-starter.git"
13 |   },
14 |   "bugs": {
15 |     "url": "https://github.com/JedWatson/react-component-starter/issues"
16 |   },
17 |   "dependencies": {
18 |     "react": "^0.12.2",
19 |     "reactify": "^0.17.1"
20 |   },
21 |   "devDependencies": {
22 |     "react-component-gulp-tasks": "^0.1.1",
23 |     "gulp": "^3.8.10"
24 |   },
25 |   "browser": "src/AutosizeInput.js",
26 |   "browserify": {
27 |     "transform": [
28 |       "reactify"
29 |     ]
30 |   },
31 |   "browserify-shim": {
32 |     "react": "global:React"
33 |   },
34 |   "scripts": {
35 |     "test": "echo \"no tests yet\" && exit 0"
36 |   },
37 |   "keywords": [
38 |     "react",
39 |     "react-component"
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/dist/my-component.min.js:
--------------------------------------------------------------------------------
1 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;"undefined"!=typeof window?n=window:"undefined"!=typeof global?n=global:"undefined"!=typeof self&&(n=self),n.MyComponent=e()}}(function(){return function e(n,o,t){function f(i,d){if(!o[i]){if(!n[i]){var u="function"==typeof require&&require;if(!d&&u)return u(i,!0);if(r)return r(i,!0);var l=new Error("Cannot find module '"+i+"'");throw l.code="MODULE_NOT_FOUND",l}var p=o[i]={exports:{}};n[i][0].call(p.exports,function(e){var o=n[i][1][e];return f(o?o:e)},p,p.exports,e,n,o,t)}return o[i].exports}for(var r="function"==typeof require&&require,i=0;i<t.length;i++)f(t[i]);return f}({1:[function(e,n){(function(e){var o="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,t=o.createClass({displayName:"MyComponent",render:function(){return o.createElement("div",null,"My Component")}});n.exports=t}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});


--------------------------------------------------------------------------------
/example/src/standalone.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 | 	<title>React Starter Component</title>
 4 | 	<link rel="stylesheet" href="app.css">
 5 | </head>
 6 | <body>
 7 | 	<div class="container">
 8 | 		<h1>React Starter Component</h1>
 9 | 		<h2><a href="http://github.com/JedWatson/react-component-starter">View project on GitHub</a></h2>
10 | 		<div id="app"></div>
11 | 		<div class="hint">
12 | 			The component above is provided by the standalone build, and React is loaded from cdnjs.
13 | 		</div>
14 | 		<div><a href="/">Back to the main example</a></div>
15 | 		<div class="footer">
16 | 			Copyright &copy; Jed Watson 2014. MIT Licensed.
17 | 		</div>
18 | 	</div>
19 | 	<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
20 | 	<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
21 | 	<script src="standalone.js"></script>
22 | 	<script type="text/jsx">
23 | 		var Example = React.createClass({
24 | 			render: function() {
25 | 				return <MyComponent />
26 | 			}
27 | 		});
28 | 		React.render(<Example />, document.getElementById('app'));
29 | 	</script>
30 | </body>
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Jed Watson
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | React Component Starter
 2 | =======================
 3 | 
 4 | __COMPONENT DESCRIPTION GOES HERE__
 5 | 
 6 | 
 7 | ## Demo & Examples
 8 | 
 9 | Live demo: __LINK TO LIVE DEMO__
10 | 
11 | To build the examples locally, run:
12 | 
13 | ```
14 | npm install
15 | gulp dev
16 | ```
17 | 
18 | Then open [`localhost:8000`](http://localhost:8000) in a browser.
19 | 
20 | 
21 | ## Installation
22 | 
23 | The easiest way to use My-Component is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).
24 | 
25 | You can also use the standalone build by including `dist/my-component.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.
26 | 
27 | ```
28 | npm install my-component --save
29 | ```
30 | 
31 | 
32 | ## Usage
33 | 
34 | __EXPLAIN USAGE HERE__
35 | 
36 | ```
37 | var MyComponent = require('my-component');
38 | 
39 | <MyComponent>Example</MyComponent>
40 | ```
41 | 
42 | ### Properties
43 | 
44 | * __DOCUMENT PROPERTIES HERE__
45 | 
46 | ### Notes
47 | 
48 | __ADDITIONAL USAGE NOTES__
49 | 
50 | ### License
51 | 
52 | MIT. Copyright (c) 2014 Jed Watson.
53 | 
54 | 


--------------------------------------------------------------------------------
/dist/my-component.js:
--------------------------------------------------------------------------------
 1 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;"undefined"!=typeof window?n=window:"undefined"!=typeof global?n=global:"undefined"!=typeof self&&(n=self),n.MyComponent=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 2 | (function (global){
 3 | var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
 4 | 
 5 | var MyComponent = React.createClass({displayName: 'MyComponent',
 6 | 	
 7 | 	render: function() {
 8 | 		return React.createElement("div", null, "My Component");
 9 | 	}
10 | 	
11 | });
12 | 
13 | module.exports = MyComponent;
14 | 
15 | }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
16 | },{}]},{},[1])(1)
17 | });


--------------------------------------------------------------------------------
/gulpconfig.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * This file controls the behaviour of the build tasks in gulpfile.js
 3 |  */
 4 | 
 5 | var COMPONENT_NAME = 'MyComponent';
 6 | 
 7 | // Read the package.json to detect the package name and dependencies
 8 | var pkg = JSON.parse(require('fs').readFileSync('./package.json'));
 9 | 
10 | // Default dependencies from package.json, except reactify (which is used for
11 | // the build). Dependencies can be customised by hard-coding this array.
12 | var dependencies = [];
13 | Object.keys(pkg.dependencies).forEach(function(i) {
14 | 	if (i !== 'reactify') dependencies.push(i);
15 | });
16 | 
17 | module.exports = {
18 | 	
19 | 	component: {
20 | 		// This is the source (entry) file for the component
21 | 		file: COMPONENT_NAME + '.js',
22 | 		// The component name controls the standalone module name
23 | 		name: COMPONENT_NAME,
24 | 		// This is the directory to load the source file from
25 | 		src: 'src',
26 | 		// This is the directory to build the distribution to
27 | 		dist: 'dist',
28 | 		// This is the name of the package that will be exported
29 | 		// by the component file. It must match the name of your
30 | 		// package on npm
31 | 		pkgName: pkg.name,
32 | 		// The package dependencies are automatically build into
33 | 		// a common bundle for the examples and excluded from the
34 | 		// package build.
35 | 		dependencies: dependencies
36 | 	},
37 | 	
38 | 	example: {
39 | 		// This is the directory to load the source files from
40 | 		src: 'example/src',
41 | 		// This is the directory to build the distribution to
42 | 		dist: 'example/dist',
43 | 		// Files will be copied as-is into the example dist folder
44 | 		files: [
45 | 			'index.html',
46 | 			'standalone.html'
47 | 		],
48 | 		// Scripts will be bundled by browserify and reactify
49 | 		scripts: [
50 | 			'app.js'
51 | 		],
52 | 		// Stylesheets will be built by less 
53 | 		stylesheets: [
54 | 			'app.less'
55 | 		]
56 | 	}
57 | 	
58 | };
59 | 


--------------------------------------------------------------------------------