├── .babelrc
├── .csscomb.json
├── .csslintrc
├── .editorconfig
├── .eslintrc
├── .flowconfig
├── .gitattributes
├── .gitignore
├── .jscsrc
├── .npmignore
├── LICENSE.txt
├── README.md
├── app.js
├── index.html
├── package.json
├── src
├── MyComponent.js
├── MyComponent.less
└── package.json
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "stage": 0
3 | }
--------------------------------------------------------------------------------
/.csscomb.json:
--------------------------------------------------------------------------------
1 | {
2 | "always-semicolon": true,
3 | "block-indent": 2,
4 | "color-case": "lower",
5 | "color-shorthand": true,
6 | "element-case": "lower",
7 | "eof-newline": true,
8 | "leading-zero": false,
9 | "remove-empty-rulesets": true,
10 | "space-after-colon": 1,
11 | "space-after-combinator": 1,
12 | "space-before-selector-delimiter": 0,
13 | "space-between-declarations": "\n",
14 | "space-after-opening-brace": "\n",
15 | "space-before-closing-brace": "\n",
16 | "space-before-colon": 0,
17 | "space-before-combinator": 1,
18 | "space-before-opening-brace": 1,
19 | "strip-spaces": true,
20 | "unitless-zero": true,
21 | "vendor-prefix-align": true,
22 | "sort-order": [
23 | [
24 | "position",
25 | "top",
26 | "right",
27 | "bottom",
28 | "left",
29 | "z-index",
30 | "display",
31 | "float",
32 | "width",
33 | "min-width",
34 | "max-width",
35 | "height",
36 | "min-height",
37 | "max-height",
38 | "-webkit-box-sizing",
39 | "-moz-box-sizing",
40 | "box-sizing",
41 | "-webkit-appearance",
42 | "padding",
43 | "padding-top",
44 | "padding-right",
45 | "padding-bottom",
46 | "padding-left",
47 | "margin",
48 | "margin-top",
49 | "margin-right",
50 | "margin-bottom",
51 | "margin-left",
52 | "overflow",
53 | "overflow-x",
54 | "overflow-y",
55 | "-webkit-overflow-scrolling",
56 | "-ms-overflow-x",
57 | "-ms-overflow-y",
58 | "-ms-overflow-style",
59 | "clip",
60 | "clear",
61 | "font",
62 | "font-family",
63 | "font-size",
64 | "font-style",
65 | "font-weight",
66 | "font-variant",
67 | "font-size-adjust",
68 | "font-stretch",
69 | "font-effect",
70 | "font-emphasize",
71 | "font-emphasize-position",
72 | "font-emphasize-style",
73 | "font-smooth",
74 | "-webkit-hyphens",
75 | "-moz-hyphens",
76 | "hyphens",
77 | "line-height",
78 | "color",
79 | "text-align",
80 | "-webkit-text-align-last",
81 | "-moz-text-align-last",
82 | "-ms-text-align-last",
83 | "text-align-last",
84 | "text-emphasis",
85 | "text-emphasis-color",
86 | "text-emphasis-style",
87 | "text-emphasis-position",
88 | "text-decoration",
89 | "text-indent",
90 | "text-justify",
91 | "text-outline",
92 | "-ms-text-overflow",
93 | "text-overflow",
94 | "text-overflow-ellipsis",
95 | "text-overflow-mode",
96 | "text-shadow",
97 | "text-transform",
98 | "text-wrap",
99 | "-webkit-text-size-adjust",
100 | "-ms-text-size-adjust",
101 | "letter-spacing",
102 | "-ms-word-break",
103 | "word-break",
104 | "word-spacing",
105 | "-ms-word-wrap",
106 | "word-wrap",
107 | "-moz-tab-size",
108 | "-o-tab-size",
109 | "tab-size",
110 | "white-space",
111 | "vertical-align",
112 | "list-style",
113 | "list-style-position",
114 | "list-style-type",
115 | "list-style-image",
116 | "pointer-events",
117 | "-ms-touch-action",
118 | "touch-action",
119 | "cursor",
120 | "visibility",
121 | "zoom",
122 | "flex-direction",
123 | "flex-order",
124 | "flex-pack",
125 | "flex-align",
126 | "table-layout",
127 | "empty-cells",
128 | "caption-side",
129 | "border-spacing",
130 | "border-collapse",
131 | "content",
132 | "quotes",
133 | "counter-reset",
134 | "counter-increment",
135 | "resize",
136 | "-webkit-user-select",
137 | "-moz-user-select",
138 | "-ms-user-select",
139 | "-o-user-select",
140 | "user-select",
141 | "nav-index",
142 | "nav-up",
143 | "nav-right",
144 | "nav-down",
145 | "nav-left",
146 | "background",
147 | "background-color",
148 | "background-image",
149 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
150 | "filter:progid:DXImageTransform.Microsoft.gradient",
151 | "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
152 | "filter",
153 | "background-repeat",
154 | "background-attachment",
155 | "background-position",
156 | "background-position-x",
157 | "background-position-y",
158 | "-webkit-background-clip",
159 | "-moz-background-clip",
160 | "background-clip",
161 | "background-origin",
162 | "-webkit-background-size",
163 | "-moz-background-size",
164 | "-o-background-size",
165 | "background-size",
166 | "border",
167 | "border-color",
168 | "border-style",
169 | "border-width",
170 | "border-top",
171 | "border-top-color",
172 | "border-top-style",
173 | "border-top-width",
174 | "border-right",
175 | "border-right-color",
176 | "border-right-style",
177 | "border-right-width",
178 | "border-bottom",
179 | "border-bottom-color",
180 | "border-bottom-style",
181 | "border-bottom-width",
182 | "border-left",
183 | "border-left-color",
184 | "border-left-style",
185 | "border-left-width",
186 | "border-radius",
187 | "border-top-left-radius",
188 | "border-top-right-radius",
189 | "border-bottom-right-radius",
190 | "border-bottom-left-radius",
191 | "-webkit-border-image",
192 | "-moz-border-image",
193 | "-o-border-image",
194 | "border-image",
195 | "-webkit-border-image-source",
196 | "-moz-border-image-source",
197 | "-o-border-image-source",
198 | "border-image-source",
199 | "-webkit-border-image-slice",
200 | "-moz-border-image-slice",
201 | "-o-border-image-slice",
202 | "border-image-slice",
203 | "-webkit-border-image-width",
204 | "-moz-border-image-width",
205 | "-o-border-image-width",
206 | "border-image-width",
207 | "-webkit-border-image-outset",
208 | "-moz-border-image-outset",
209 | "-o-border-image-outset",
210 | "border-image-outset",
211 | "-webkit-border-image-repeat",
212 | "-moz-border-image-repeat",
213 | "-o-border-image-repeat",
214 | "border-image-repeat",
215 | "outline",
216 | "outline-width",
217 | "outline-style",
218 | "outline-color",
219 | "outline-offset",
220 | "-webkit-box-shadow",
221 | "-moz-box-shadow",
222 | "box-shadow",
223 | "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
224 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
225 | "opacity",
226 | "-ms-interpolation-mode",
227 | "-webkit-transition",
228 | "-moz-transition",
229 | "-ms-transition",
230 | "-o-transition",
231 | "transition",
232 | "-webkit-transition-delay",
233 | "-moz-transition-delay",
234 | "-ms-transition-delay",
235 | "-o-transition-delay",
236 | "transition-delay",
237 | "-webkit-transition-timing-function",
238 | "-moz-transition-timing-function",
239 | "-ms-transition-timing-function",
240 | "-o-transition-timing-function",
241 | "transition-timing-function",
242 | "-webkit-transition-duration",
243 | "-moz-transition-duration",
244 | "-ms-transition-duration",
245 | "-o-transition-duration",
246 | "transition-duration",
247 | "-webkit-transition-property",
248 | "-moz-transition-property",
249 | "-ms-transition-property",
250 | "-o-transition-property",
251 | "transition-property",
252 | "-webkit-transform",
253 | "-moz-transform",
254 | "-ms-transform",
255 | "-o-transform",
256 | "transform",
257 | "-webkit-transform-origin",
258 | "-moz-transform-origin",
259 | "-ms-transform-origin",
260 | "-o-transform-origin",
261 | "transform-origin",
262 | "-webkit-animation",
263 | "-moz-animation",
264 | "-ms-animation",
265 | "-o-animation",
266 | "animation",
267 | "-webkit-animation-name",
268 | "-moz-animation-name",
269 | "-ms-animation-name",
270 | "-o-animation-name",
271 | "animation-name",
272 | "-webkit-animation-duration",
273 | "-moz-animation-duration",
274 | "-ms-animation-duration",
275 | "-o-animation-duration",
276 | "animation-duration",
277 | "-webkit-animation-play-state",
278 | "-moz-animation-play-state",
279 | "-ms-animation-play-state",
280 | "-o-animation-play-state",
281 | "animation-play-state",
282 | "-webkit-animation-timing-function",
283 | "-moz-animation-timing-function",
284 | "-ms-animation-timing-function",
285 | "-o-animation-timing-function",
286 | "animation-timing-function",
287 | "-webkit-animation-delay",
288 | "-moz-animation-delay",
289 | "-ms-animation-delay",
290 | "-o-animation-delay",
291 | "animation-delay",
292 | "-webkit-animation-iteration-count",
293 | "-moz-animation-iteration-count",
294 | "-ms-animation-iteration-count",
295 | "-o-animation-iteration-count",
296 | "animation-iteration-count",
297 | "-webkit-animation-direction",
298 | "-moz-animation-direction",
299 | "-ms-animation-direction",
300 | "-o-animation-direction",
301 | "animation-direction"
302 | ]
303 | ]
304 | }
305 |
--------------------------------------------------------------------------------
/.csslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "adjoining-classes": false,
3 | "box-sizing": false,
4 | "box-model": false,
5 | "compatible-vendor-prefixes": false,
6 | "floats": false,
7 | "font-sizes": false,
8 | "gradients": false,
9 | "important": false,
10 | "known-properties": false,
11 | "outline-none": false,
12 | "qualified-headings": false,
13 | "regex-selectors": false,
14 | "shorthand": false,
15 | "text-indent": false,
16 | "unique-headings": false,
17 | "universal-selector": false,
18 | "unqualified-attributes": false
19 | }
20 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # http://editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 |
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 |
19 | [*.md]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "plugins": [
4 | "react"
5 | ],
6 | "env": {
7 | "browser": true,
8 | "es6": true
9 | },
10 | "ecmaFeatures": {
11 | "jsx": true
12 | },
13 | "rules": {
14 | // Strict mode
15 | "strict": [2, "never"],
16 |
17 | // Code style
18 | "indent": [2, 2],
19 | "quotes": [2, "single"]
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 | .*/build
3 | .*/node_modules
4 |
5 | [include]
6 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Automatically normalize line endings for all text-based files
2 | # http://git-scm.com/docs/gitattributes#_end_of_line_conversion
3 | * text=auto
4 |
5 | # For the following file types, normalize line endings to LF on
6 | # checkin and prevent conversion to CRLF when they are checked out
7 | # (this is required in order to prevent newline related issues like,
8 | # for example, after the build script is run)
9 | .* text eol=lf
10 | *.css text eol=lf
11 | *.js text eol=lf
12 | *.json text eol=lf
13 | *.less text eol=lf
14 | *.md text eol=lf
15 | *.sass text eol=lf
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Include your project-specific ignores in this file
2 | # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
3 |
4 | build
5 | node_modules
6 | npm-debug.log
7 |
--------------------------------------------------------------------------------
/.jscsrc:
--------------------------------------------------------------------------------
1 | {
2 | "preset": "google",
3 | "disallowSpacesInAnonymousFunctionExpression": null,
4 | "validateLineBreaks": "LF",
5 | "validateIndentation": 2,
6 | "excludeFiles": ["build/**", "node_modules/**"],
7 | "esprima": "esprima-fb"
8 | }
9 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .babelrc
3 | .csscomb.json
4 | .csslintrc
5 | .editorconfig
6 | .eslintrc
7 | .flowconfig
8 | .gitattributes
9 | .jscsrc
10 | .npmignore
11 | app.js
12 | index.html
13 | webpack.config.js
14 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright (c) 2015 Konstantin Tarkus (@koistya), Kriasoft LLC.
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
13 | all 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
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Component Starter Kit
2 |
3 | > A project template for creating stand-alone [React](http://facebook.github.io/react/)
4 | > components. It is pre-configured with [EditorConfig](http://editorconfig.org/),
5 | > [Babel](http://babeljs.io/), [Webpack](http://webpack.github.io/),
6 | > [ESLint](http://eslint.org/), [CSSLint](http://csslint.net/),
7 | > [CSSComb](https://github.com/csscomb/csscomb.js), [JSCS](http://jscs.info/),
8 | > [Flow](http://flowtype.org/) and [BrowserSync](http://www.browsersync.io/).
9 |
10 | ### Getting Started
11 |
12 | Just [clone](github-windows://openRepo/https://github.com/kriasoft/react-component-starter) or [fork](https://github.com/kriasoft/react-component-starter/fork) the repo and start hacking:
13 |
14 | ```shell
15 | $ git clone -o upstream https://github.com/kriasoft/react-component-starter.git MyComponent
16 | $ cd MyComponent
17 | $ npm install
18 | $ npm start
19 | ```
20 |
21 | ### How to Update
22 |
23 | You can always fetch and merge the recent changes from this repo back into
24 | your own project:
25 |
26 | ```shell
27 | $ git checkout master
28 | $ git fetch upstream
29 | $ git merge upstream/master
30 | $ npm install
31 | ```
32 |
33 | ### How to Test
34 |
35 | ```shell
36 | $ npm test
37 | ```
38 |
39 | ### Related Projects
40 |
41 | - [React Starter Kit](https://github.com/kriasoft/react-starter-kit)
42 | - [React Style Guide](https://github.com/kriasoft/react-starter-kit/blob/master/docs/react-style-guide.md)
43 |
44 | ### Learn More
45 |
46 | * [Getting Started with React.js](http://facebook.github.io/react/)
47 | * [React.js Wiki on GitHub](https://github.com/facebook/react/wiki)
48 | * [React.js Questions on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)
49 | * [React.js Discussion Board](https://groups.google.com/forum/#!forum/reactjs)
50 | * [The Future of React](https://github.com/reactjs/react-future)
51 | * [Learn ES6](https://babeljs.io/docs/learn-es6/), [ES6 Features](https://github.com/lukehoban/es6features#readme)
52 |
53 | ### Support
54 |
55 | Have feedback, feature request or need help? Contact me on [codementor.io/koistya](https://www.codementor.io/koistya).
56 |
57 | ### Copyright
58 |
59 | **MIT** (c) Konstantin Tarkus ([@koistya](https://twitter.com/koistya)), Kriasoft LLC
60 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * React Component Starter Kit
3 | * https://github.com/kriasoft/react-component-starter
4 | * Copyright (c) KriaSoft, LLC. All rights reserved. See LICENSE.txt
5 | */
6 |
7 | import React from 'react';
8 | import Component from './src';
9 | React.render(