├── .gitignore
├── LICENSE
├── Name.jsx
├── README.md
├── entry.js
├── index.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2015 Jordan Scales
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
7 | the Software, and to permit persons to whom the Software is furnished to do so,
8 | 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, FITNESS
15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
19 |
--------------------------------------------------------------------------------
/Name.jsx:
--------------------------------------------------------------------------------
1 | const React = require("react");
2 |
3 | const style = {
4 | width: 200,
5 | borderRadius: 5,
6 | margin: "200px auto",
7 | padding: 80,
8 |
9 | background: "#333",
10 | color: "#fff",
11 |
12 | fontFamily: "Helvetica Neue",
13 | fontSize: 30,
14 | textAlign: "center",
15 | };
16 |
17 | export default (props) => {
18 | return
19 | Hello, {props.name}!
20 |
;
21 | };
22 |
23 | export const props = {
24 | name: "@jdan",
25 | };
26 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## reactme
2 |
3 | A little server to share react components.
4 |
5 | 
6 |
7 | Inspired by: http://blog.vjeux.com/2015/javascript/challenge-best-javascript-setup-for-quick-prototyping.html. This a toy - and you should probably use JSBin instead.
8 |
9 | ### Try it out
10 |
11 | ```
12 | $ git clone https://github.com/jdan/reactme
13 | $ cd reactme
14 | $ npm install
15 | $ npm start
16 | $ open http://localhost:3000/Name.jsx
17 | ```
18 |
19 | ### License
20 |
21 | MIT
22 |
--------------------------------------------------------------------------------
/entry.js:
--------------------------------------------------------------------------------
1 | const React = require("react");
2 | const ReactDOM = require("react-dom");
3 | const componentModule = require(REQUIRE_PATH);
4 |
5 | const Component = (componentModule["default"]) ?
6 | componentModule["default"] : componentModule;
7 |
8 | const el = document.getElementById("main");
9 |
10 | ReactDOM.render(, el);
11 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const connect = require("connect");
4 | const fs = require("fs");
5 | const http = require("http");
6 | const MemoryFS = require("memory-fs");
7 | const webpack = require("webpack");
8 |
9 | const app = connect();
10 | const memoryFs = new MemoryFS();
11 |
12 | app.use(function(req, res) {
13 | const path = req.url;
14 |
15 | if (!fs.existsSync("." + path)) {
16 | return res.end(`No module found at ${path}`);
17 | }
18 |
19 | const compiler = webpack({
20 | entry: "./entry.js",
21 | output: {
22 | path: "/",
23 | filename: "bundle.js",
24 | },
25 | module: {
26 | loaders: [
27 | {
28 | test: /\.jsx?$/,
29 | loader: "babel-loader",
30 | exclude: /node_modules/,
31 | query: {
32 | presets: ["es2015", "react"],
33 | },
34 | },
35 | ],
36 | },
37 | plugins: [
38 | new webpack.DefinePlugin({
39 | REQUIRE_PATH: JSON.stringify("." + path),
40 | }),
41 | ],
42 | });
43 | compiler.outputFileSystem = memoryFs;
44 |
45 | compiler.run(function(err, stats) {
46 | if (err) {
47 | return res.end(err.stack);
48 | }
49 |
50 | const fileContent = memoryFs.readFileSync("/bundle.js");
51 |
52 | res.end(`
53 |
54 |
55 | `);
56 | });
57 | });
58 |
59 | const port = process.env.PORT || 3000;
60 | console.log(`Server listening on port ${port}`);
61 | http.createServer(app).listen(port);
62 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "dependencies": {
3 | "babel-core": "^6.3.26",
4 | "babel-loader": "^6.2.0",
5 | "babel-preset-es2015": "^6.3.13",
6 | "babel-preset-react": "^6.3.13",
7 | "connect": "^3.4.0",
8 | "memory-fs": "^0.3.0",
9 | "react": "^0.14.3",
10 | "react-dom": "^0.14.3",
11 | "webpack": "^1.12.9"
12 | },
13 | "scripts": {
14 | "start": "node index.js"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------