Skip to content

Commit 9edee01

Browse files
octopitusoctopitus
committed
🚀
0 parents  commit 9edee01

15 files changed

+416
-0
lines changed

‎.babelrc

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"presets": ["react", "es2015", "stage-0"],
3+
plugins: ["transform-runtime"],
4+
"env": {
5+
"development": {
6+
"plugins": [["react-transform", {
7+
"transforms": [{
8+
"transform": "react-transform-hmr",
9+
"imports": ["react"],
10+
"locals": ["module"]
11+
}, {
12+
"transform": "react-transform-catch-errors",
13+
"imports": ["react", "redbox-react"]
14+
}]
15+
}]]
16+
}
17+
}
18+
}

‎.eslintrc

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"parser": "babel-eslint",
3+
"extends" : [
4+
"standard",
5+
"standard-react"
6+
],
7+
"env": {
8+
es6: true,
9+
"browser": true
10+
},
11+
"rules": {
12+
"quotes": [2, "single"],
13+
"strict": [2, "never"],
14+
"babel/generator-star-spacing": 1,
15+
"babel/new-cap": 1,
16+
"babel/object-shorthand": 1,
17+
"babel/arrow-parens": 1,
18+
"babel/no-await-in-loop": 1,
19+
"react/jsx-uses-react": 2,
20+
"react/jsx-uses-vars": 2,
21+
"react/react-in-jsx-scope": 2
22+
},
23+
"plugins": [
24+
"babel",
25+
"react"
26+
]
27+
}

‎.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
6+
# Runtime data
7+
pids
8+
*.pid
9+
*.seed
10+
11+
# Directory for instrumented libs generated by jscoverage/JSCover
12+
lib-cov
13+
14+
# Coverage directory used by tools like istanbul
15+
coverage
16+
17+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18+
.grunt
19+
20+
# node-waf configuration
21+
.lock-wscript
22+
23+
# Compiled binary addons (http://nodejs.org/api/addons.html)
24+
build/Release
25+
26+
# Dependency directory
27+
node_modules
28+
29+
# Optional npm cache directory
30+
.npm
31+
32+
# Optional REPL history
33+
.node_repl_history
34+
35+
# Builds
36+
dist

‎LICENSE

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

‎README.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
> A minimal skeleton React starter kit
2+
3+
## Why another boilerplate?
4+
5+
Because many projects out there depends on too much technologies, complex structure and with lots of things to care about.
6+
This starter kit aims to give you a good starting point for your projects. No specific implementation of Flux, no data fetching patterns
7+
or universal things inside. **Start small, add what you need.**
8+
9+
## Features
10+
- Include few tools.
11+
- Babel 6 with Webpack and Hot Loader.
12+
- CSS processing with PostCSS.
13+
14+
## Getting started
15+
16+
```bash
17+
npm install
18+
```
19+
20+
### Running development server
21+
22+
```bash
23+
npm start # Navigate to localhost:3000 to view the app
24+
```
25+
26+
This leverages [react-transform-hmr](https://github.com/gaearon/react-transform-hmr) to automatically start a local dev server and refresh file changes on the fly without reloading the page.
27+
It also automatically includes source maps, allowing you to browse code and set breakpoints on the original code.
28+
29+
### Deploy to production
30+
31+
```bash
32+
npm run build
33+
```
34+
35+
Remove old build, runs linter, and then, if success, compiles your application to `dist`. You can just serve this folder and you are good to go.
36+
37+
### Linting
38+
39+
```bash
40+
npm run lint
41+
```
42+
43+
Linting using `eslint` with standard rules and with React plugin.
44+
45+
```bash
46+
npm run lint:fix
47+
```
48+
49+
Fixes linter's common issues ([Learn more](http://eslint.org/docs/user-guide/command-line-interface.html#fix)).
50+
51+
### Test
52+
53+
> Will also be included
54+
55+
## License
56+
57+
MIT

‎bin/dev.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
var path = require('path');
2+
var express = require('express');
3+
var webpack = require('webpack');
4+
var config = require('../webpack.config.dev');
5+
6+
var app = express();
7+
var compiler = webpack(config);
8+
9+
var host = process.env.HOST || 'localhost';
10+
var port = parseInt(config.port, 10) || 3000;
11+
12+
app.use(require('webpack-dev-middleware')(compiler, {
13+
noInfo: true,
14+
publicPath: config.output.publicPath
15+
}));
16+
app.use(require('webpack-hot-middleware')(compiler));
17+
18+
app.get('*', function(req, res) {
19+
res.sendFile(path.join(__dirname, 'templates', 'dev.html'));
20+
});
21+
22+
app.listen(port, function(err) {
23+
if (err) {
24+
console.log(err);
25+
return;
26+
}
27+
console.log('Listening at http://' + host + ':' + port);
28+
});

‎bin/templates/dev.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>React Transform Boilerplate</title>
5+
</head>
6+
<body>
7+
<div id="root"></div>
8+
<script src="/dist/main.js"></script>
9+
</body>
10+
</html>

‎bin/templates/prop.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>React Transform Boilerplate</title>
5+
</head>
6+
<body>
7+
<div id="root"></div>
8+
</body>
9+
</html>

‎package.json

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"name": "re-starter",
3+
"version": "0.1.0",
4+
"description": "A minimal skeleton React starter kit",
5+
"scripts": {
6+
"clean": "rimraf dist",
7+
"build:webpack": "NODE_ENV=production webpack -p --config webpack.config.prod.js",
8+
"build": "npm run clean && npm run build:webpack",
9+
"start": "node bin/dev.js",
10+
"lint": "eslint src --ext .js || true",
11+
"lint:fix": "eslint src --ext .js --fix || true"
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "https://github.com/octopitus/re-starter.git"
16+
},
17+
"keywords": [
18+
"react",
19+
"starterkit",
20+
"minimal"
21+
],
22+
"author": "Luy Tran <[email protected]>",
23+
"license": "MIT",
24+
"bugs": {
25+
"url": "https://github.com/octopitus/re-starter/issues"
26+
},
27+
"homepage": "https://github.com/octopitus/re-starter",
28+
"devDependencies": {
29+
"autoprefixer": "^6.3.3",
30+
"babel-core": "^6.3.17",
31+
"babel-eslint": "^5.0.0-beta6",
32+
"babel-loader": "^6.2.0",
33+
"babel-plugin-react-transform": "^2.0.0",
34+
"babel-plugin-transform-runtime": "^6.3.13",
35+
"babel-polyfill": "^6.5.0",
36+
"babel-preset-es2015": "^6.3.13",
37+
"babel-preset-react": "^6.3.13",
38+
"babel-preset-stage-0": "^6.3.13",
39+
"babel-register": "^6.3.13",
40+
"babel-runtime": "^6.3.19",
41+
"css-loader": "^0.23.1",
42+
"eslint": "^2.0.0-rc.1",
43+
"eslint-config-standard": "^5.1.0",
44+
"eslint-config-standard-react": "^2.3.0",
45+
"eslint-plugin-babel": "^3.0.0",
46+
"eslint-plugin-promise": "^1.0.8",
47+
"eslint-plugin-react": "^3.16.1",
48+
"eslint-plugin-standard": "^1.3.2",
49+
"eventsource-polyfill": "^0.9.6",
50+
"express": "^4.13.3",
51+
"extract-text-webpack-plugin": "^1.0.1",
52+
"html-webpack-plugin": "^2.8.2",
53+
"postcss-loader": "^0.8.1",
54+
"postcss-nested": "^1.0.0",
55+
"react-addons-test-utils": "^0.14.7",
56+
"react-transform-catch-errors": "^1.0.2",
57+
"react-transform-hmr": "^1.0.2",
58+
"redbox-react": "^1.2.2",
59+
"rimraf": "^2.4.3",
60+
"style-loader": "^0.13.0",
61+
"webpack": "^1.12.9",
62+
"webpack-dev-middleware": "^1.4.0",
63+
"webpack-hot-middleware": "^2.6.0"
64+
},
65+
"dependencies": {
66+
"react": "^0.14.3",
67+
"react-dom": "^0.14.3"
68+
}
69+
}

‎src/App.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.container {
2+
width: 100%;
3+
margin: 0 auto;
4+
background-color: purple
5+
}

‎src/App.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { Component } from 'react'
2+
import { NICE, SUPER_NICE } from './colors'
3+
4+
import styles from './App.css'
5+
6+
class Counter extends Component {
7+
constructor (props) {
8+
super(props)
9+
this.state = { counter: 0 }
10+
this.interval = setInterval(() => this.tick(), 1000)
11+
}
12+
13+
tick () {
14+
this.setState({
15+
counter: this.state.counter + this.props.increment
16+
})
17+
}
18+
19+
componentWillUnmount () {
20+
clearInterval(this.interval)
21+
}
22+
23+
render () {
24+
return (
25+
<h1 style={{ color: this.props.color }}>
26+
Counter ({this.props.increment}): {this.state.counter}
27+
</h1>
28+
)
29+
}
30+
}
31+
32+
export class App extends Component {
33+
render () {
34+
return (
35+
<div className={styles.container}>
36+
<Counter increment={1} color={NICE} />
37+
<Counter increment={5} color={SUPER_NICE} />
38+
</div>
39+
)
40+
}
41+
}

‎src/colors.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const NICE = 'pink'
2+
export const SUPER_NICE = 'darkred'

‎src/index.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import 'babel-polyfill'
2+
3+
import React from 'react'
4+
import { render } from 'react-dom'
5+
import { App } from './App'
6+
7+
render(<App />, document.getElementById('root'))

‎webpack.config.dev.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
var path = require('path');
2+
var webpack = require('webpack');
3+
var port = parseInt(process.env.PORT) || 3000;
4+
5+
module.exports = {
6+
progress: true,
7+
devtool: 'cheap-module-eval-source-map',
8+
entry: {
9+
main: [
10+
'eventsource-polyfill', // necessary for hot reloading with IE
11+
'webpack-hot-middleware/client?path=http://localhost:' + port + '/__webpack_hmr',
12+
'./src/index'
13+
]
14+
},
15+
output: {
16+
path: path.join(__dirname, 'dist'),
17+
filename: '[name].js',
18+
publicPath: 'http://localhost:' + port + '/dist/'
19+
},
20+
plugins: [
21+
new webpack.HotModuleReplacementPlugin(),
22+
new webpack.NoErrorsPlugin()
23+
],
24+
module: {
25+
loaders: [
26+
{ test: /\.jsx?/, loaders: ['babel'], exclude: /node_modules/ },
27+
{ test: /\.css$/, loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss' }
28+
]
29+
},
30+
resolve: {
31+
modulesDirectories: ['node_modules', 'src'],
32+
extensions: ['', '.js', '.jsx', '.css']
33+
},
34+
postcss: [
35+
require('autoprefixer'), // Automatically include vendor prefixes
36+
require('postcss-nested') // Enable nested rules, like in Sass
37+
]
38+
};

0 commit comments

Comments
 (0)