Skip to content

Commit b48607c

Browse files
andrerpenaandrerpena
committed
Initial commit
1 parent c753e05 commit b48607c

File tree

12 files changed

+255
-0
lines changed

12 files changed

+255
-0
lines changed

‎.babelrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"presets": ["es2015", "react", "stage-0"],
3+
"plugins": ["add-module-exports", "react-hot-loader/babel"],
4+
"env": {
5+
"development": {
6+
"presets": [
7+
"react-hmre"
8+
]
9+
}
10+
}
11+
}

‎.gitignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Logs
2+
logs
3+
*.log
4+
.idea
5+
/lib/
6+
node_modules
7+
.idea

‎.npmignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
src
2+
webpack
3+
.npmignore
4+
.idea
5+
demo

‎demo/client.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
import React from 'react';
3+
import {render} from 'react-dom';
4+
import MyAwesomeComponent from '../src/MyAwesomeComponent.js';
5+
render(
6+
<MyAwesomeComponent>
7+
</MyAwesomeComponent>,
8+
document.getElementById('#app_container')
9+
);

‎demo/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html>
2+
<head>
3+
<title>My awesome React component</title>
4+
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
5+
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
6+
<link rel='stylesheet' href=''/>
7+
</head>
8+
<body>
9+
<div>
10+
<div id="#app_container"></div>
11+
</div>
12+
<script src='/bundle.js'></script>
13+
</body>
14+
</html>

‎demo/server.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import fs from 'fs';
2+
import React from 'react';
3+
import express from 'express';
4+
import webpackConfig from '../webpack.config.demo.dev';
5+
import colors from 'colors';
6+
import webpackMiddleware from 'webpack-dev-middleware';
7+
import webpackHotMiddleware from 'webpack-hot-middleware';
8+
import webpack from 'webpack';
9+
import packageJson from '../package.json';
10+
11+
const webpackCompiler = webpack(webpackConfig);
12+
13+
require.extensions['.html'] = function (module, filename) {
14+
module.exports = fs.readFileSync(filename, 'utf8');
15+
};
16+
17+
let app = express();
18+
19+
app.use(webpackMiddleware(webpackCompiler));
20+
app.use(webpackHotMiddleware(webpackCompiler));
21+
app.use((req, res) => res.status(200).send(require('./index.html')));
22+
23+
app.listen(4000, '0.0.0.0', function () {
24+
console.log(colors.green(`${packageJson.name} at http://localhost:4000/`));
25+
});

‎gulpfile.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
var gulp = require('gulp');
2+
var babel = require("gulp-babel");
3+
4+
gulp.task('copy_styles', function() {
5+
return gulp.src('./src/styles/**/*')
6+
.pipe(gulp.dest('./lib'));
7+
});
8+
9+
gulp.task('build', ['copy_styles'], function () {
10+
return gulp.src("./src/index.js")
11+
.pipe(babel())
12+
.pipe(gulp.dest("./lib"));
13+
});

‎package.json‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"name": "react-mde",
3+
"version": "0.0.1",
4+
"description": "A boilerplate for creating react components",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "cross-env NODE_ENV=development babel-node ./demo/server.js",
8+
"build": "cross-env NODE_ENV=production gulp build"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/andrerpena/react-mde.git"
13+
},
14+
"keywords": [
15+
"boilerplate",
16+
"react",
17+
"component"
18+
],
19+
"author": "Andre Pena",
20+
"license": "MIT",
21+
"bugs": {
22+
"url": "https://github.com/andrerpena/react-mde.git/issues"
23+
},
24+
"devDependencies": {
25+
"babel-cli": "^6.18.0",
26+
"babel-loader": "^6.2.8",
27+
"babel-plugin-add-module-exports": "^0.2.1",
28+
"babel-preset-es2015": "^6.18.0",
29+
"babel-preset-react": "^6.16.0",
30+
"babel-preset-react-hmre": "^1.1.1",
31+
"babel-preset-stage-0": "^6.16.0",
32+
"colors": "^1.1.2",
33+
"cross-env": "^3.1.3",
34+
"express": "^4.14.0",
35+
"extract-text-webpack-plugin": "^1.0.1",
36+
"file-loader": "^0.9.0",
37+
"gulp": "^3.9.1",
38+
"gulp-babel": "^6.1.2",
39+
"gulp-cli": "^1.2.2",
40+
"less": "^2.7.1",
41+
"less-loader": "^2.2.3",
42+
"node-sass": "^3.13.0",
43+
"react-hot-loader": "^3.0.0-beta.6",
44+
"react-redux": "^4.4.6",
45+
"redux": "^3.6.0",
46+
"sass-loader": "^4.0.2",
47+
"style-loader": "^0.13.1",
48+
"webpack": "^1.13.3",
49+
"webpack-dev-middleware": "^1.8.4",
50+
"webpack-hot-middleware": "^2.13.2"
51+
},
52+
"homepage": "https://github.com/andrerpena/react-mde.git#readme",
53+
"dependencies": {
54+
"react": "^15.4.1",
55+
"react-dom": "^15.4.1"
56+
}
57+
}

‎readme.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# react-component-boilerplate
2+
3+
A dead simple and little opinionated template for creating react-components that will be published to NPM.
4+
5+
## Features
6+
7+
- Dead simple
8+
- Demo and publish scripts. The publish script uses Babel to export a ES5 compatible version of your component.
9+
The Styles (CSS, LESS or SASS) are copied as is to the lib folder. It's responsability of the consumer app to add the styles to its bundle using Webpack or whatever.
10+
- Hot module replacement in demo
11+
- Webpack configuration for the demo and production
12+
- Sass and LESS loaders for the demo
13+
- Absolutely no dependencies on the final component besides `react` and `react-dom`.
14+
15+
## Non-Features, pick your own...
16+
17+
- No Redux or any state management
18+
- No Routing
19+
- No Testing
20+
21+
## Using
22+
23+
- Create a GitHub repo for your awesome component
24+
- Clone the boilerplate -> `git clone https://github.com/andrerpena/react-component-boilerplate.git `
25+
- Copy its contents to the folder of your awesome component
26+
- Open the `package.json` file and change these properties: `name`, `version`, `description`, `repository.url`, `author`, `bugs.url` and `homepage`.
27+
- Set `NODE_ENV` to developoment and `npm install`.
28+
- Commit and push your awesome component
29+
30+
*I know you can clone the boilerplate directly to directory of your component and change the remote but let's keep it simple.
31+
32+
## Commands
33+
34+
- `npm start`: Starts the demo
35+
- `npm run publsh`: Creates a `lib` folder containing what is going to be published to NPM.
36+
37+
## Publishing to NPM
38+
39+
- `npm-adduser` // will let you create a user / login
40+
- `npm-publish` // will deploy your binaries to `npmjs.org`.
41+
42+
## File structure:
43+
44+
- `demo`: Contains the demo. The `server.js` is what is triggered when you type `npm start`
45+
- `src`: Contains the source code of your awesome component. `index.js` is the entry point of your library.

‎src/MyAwesomeComponent.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, { Component } from 'react';
2+
3+
class MyAwesomeComponent extends Component {
4+
render() {
5+
return (
6+
<div>
7+
<h1>I'm an awesome component</h1>
8+
<p>No I'm not... Make an awesome component of me</p>
9+
</div>
10+
);
11+
}
12+
}
13+
14+
export default MyAwesomeComponent;

0 commit comments

Comments
 (0)