Skip to content

Commit 941f750

Browse files
chibicodechibicode
committed
Add examples
1 parent cc0c187 commit 941f750

13 files changed

+260
-0
lines changed

Diff for: ‎README.md

+21
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,27 @@ React JSON Viewer Component, Extracted from [redux-devtools](https://github.com/
44

55
![](https://img.shields.io/npm/v/react-json-tree.svg)
66

7+
### Usage
8+
9+
```js
10+
import JSONTree from 'react-json-tree'
11+
12+
// Inside a React component:
13+
const json = {
14+
array: [1, 2, 3],
15+
bool: true,
16+
object: {
17+
foo: 'bar'
18+
}
19+
}
20+
21+
<JSONTree data={ json } />
22+
```
23+
24+
Result:
25+
26+
![](http://cl.ly/image/0P2j2n0n3Y24/screenshot%202015-08-24%20at%207.37.18%20PM.png)
27+
728
### Credits
829

930
- All credits to [Dave Vedder](http://www.eskimospy.com/) ([[email protected]](mailto:[email protected])), who wrote the original code as [JSONViewer](https://bitbucket.org/davevedder/react-json-viewer/).

Diff for: ‎examples/.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"stage": 0
3+
}

Diff for: ‎examples/.eslintrc

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"ecmaFeatures": {
3+
"jsx": true,
4+
"modules": true
5+
},
6+
"env": {
7+
"browser": true,
8+
"node": true
9+
},
10+
"parser": "babel-eslint",
11+
"rules": {
12+
"quotes": [2, "single"],
13+
"strict": [2, "never"],
14+
"react/jsx-uses-react": 2,
15+
"react/jsx-uses-vars": 2,
16+
"react/react-in-jsx-scope": 2
17+
},
18+
"plugins": [
19+
"react"
20+
]
21+
}

Diff for: ‎examples/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
npm-debug.log
3+
.DS_Store

Diff for: ‎examples/.jshintrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"node": true,
3+
"browser": true,
4+
"esnext": true,
5+
"newcap": false
6+
}

Diff for: ‎examples/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2014 Dan Abramov
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.

Diff for: ‎examples/README.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
react-hot-boilerplate
2+
=====================
3+
4+
The minimal dev environment to enable live-editing React components.
5+
6+
### Usage
7+
8+
```
9+
npm install
10+
npm start
11+
open http://localhost:3000
12+
```
13+
14+
Now edit `src/App.js`.
15+
Your changes will appear without reloading the browser like in [this video](http://vimeo.com/100010922).
16+
17+
### Linting
18+
19+
This boilerplate project includes React-friendly ESLint configuration.
20+
21+
```
22+
npm run lint
23+
```
24+
25+
### Using `0.0.0.0` as Host
26+
27+
You may want to change the host in `server.js` and `webpack.config.js` from `localhost` to `0.0.0.0` to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM.
28+
29+
### Missing Features
30+
31+
This boilerplate is purposefully simple to show the minimal configuration for React Hot Loader. For a real project, you'll want to add a separate config for production with hot reloading disabled and minification enabled. You'll also want to add a router, styles and maybe combine dev server with an existing server. This is out of scope of this boilerplate, but you may want to look into [other starter kits](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#starter-kits).
32+
33+
### Dependencies
34+
35+
* React
36+
* Webpack
37+
* [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
38+
* [babel-loader](https://github.com/babel/babel-loader)
39+
* [react-hot-loader](https://github.com/gaearon/react-hot-loader)
40+
41+
### Resources
42+
43+
* [Demo video](http://vimeo.com/100010922)
44+
* [react-hot-loader on Github](https://github.com/gaearon/react-hot-loader)
45+
* [Integrating JSX live reload into your workflow](http://gaearon.github.io/react-hot-loader/getstarted/)
46+
* [Troubleshooting guide](https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md)
47+
* Ping dan_abramov on Twitter or #reactjs IRC

Diff for: ‎examples/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<html>
2+
<head>
3+
<title>Sample App</title>
4+
<style>
5+
body {
6+
font-family: SF UI Text,Roboto,Helvetica Neue,Helvetica,sans-serif;
7+
font-size: 18px;
8+
line-height: 1.5;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
<div id='root'>
14+
</div>
15+
<script src="/static/bundle.js"></script>
16+
</body>
17+
</html>

Diff for: ‎examples/package.json

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "react-hot-boilerplate",
3+
"version": "1.0.0",
4+
"description": "Boilerplate for ReactJS project with hot code reloading",
5+
"scripts": {
6+
"start": "node server.js",
7+
"lint": "eslint src"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/gaearon/react-hot-boilerplate.git"
12+
},
13+
"keywords": [
14+
"react",
15+
"reactjs",
16+
"boilerplate",
17+
"hot",
18+
"reload",
19+
"hmr",
20+
"live",
21+
"edit",
22+
"webpack"
23+
],
24+
"author": "Dan Abramov <[email protected]> (http://github.com/gaearon)",
25+
"license": "MIT",
26+
"bugs": {
27+
"url": "https://github.com/gaearon/react-hot-boilerplate/issues"
28+
},
29+
"homepage": "https://github.com/gaearon/react-hot-boilerplate",
30+
"devDependencies": {
31+
"babel-core": "^5.4.7",
32+
"babel-eslint": "^3.1.9",
33+
"babel-loader": "^5.1.2",
34+
"eslint-plugin-react": "^2.3.0",
35+
"react-hot-loader": "^1.2.7",
36+
"webpack": "^1.9.6",
37+
"webpack-dev-server": "^1.8.2"
38+
},
39+
"dependencies": {
40+
"react": "^0.13.0"
41+
}
42+
}

Diff for: ‎examples/server.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
var webpack = require('webpack');
2+
var WebpackDevServer = require('webpack-dev-server');
3+
var config = require('./webpack.config');
4+
5+
new WebpackDevServer(webpack(config), {
6+
publicPath: config.output.publicPath,
7+
hot: true,
8+
historyApiFallback: true
9+
}).listen(3000, 'localhost', function (err, result) {
10+
if (err) {
11+
console.log(err);
12+
}
13+
14+
console.log('Listening at localhost:3000');
15+
});

Diff for: ‎examples/src/App.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { Component } from 'react';
2+
import JSONTree from 'react-json-tree';
3+
4+
export default class App extends Component {
5+
render() {
6+
const data = {
7+
array: [1, 2, 3],
8+
bool: true,
9+
object: {
10+
foo: 'bar'
11+
}
12+
};
13+
14+
return (
15+
<JSONTree data={ data } />
16+
);
17+
}
18+
}

Diff for: ‎examples/src/index.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react';
2+
import App from './App';
3+
4+
React.render(<App />, document.getElementById('root'));

Diff for: ‎examples/webpack.config.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
var path = require('path');
2+
var webpack = require('webpack');
3+
4+
module.exports = {
5+
devtool: 'eval',
6+
entry: [
7+
'webpack-dev-server/client?http://localhost:3000',
8+
'webpack/hot/only-dev-server',
9+
'./src/index'
10+
],
11+
output: {
12+
path: path.join(__dirname, 'dist'),
13+
filename: 'bundle.js',
14+
publicPath: '/static/'
15+
},
16+
plugins: [
17+
new webpack.HotModuleReplacementPlugin(),
18+
new webpack.NoErrorsPlugin()
19+
],
20+
resolve: {
21+
alias: {
22+
'react-json-tree/lib': path.join(__dirname, '..', 'src'),
23+
'react-json-tree': path.join(__dirname, '..', 'src'),
24+
'react': path.join(__dirname, 'node_modules', 'react')
25+
},
26+
extensions: ['', '.js']
27+
},
28+
resolveLoader: {
29+
'fallback': path.join(__dirname, 'node_modules')
30+
},
31+
module: {
32+
loaders: [{
33+
test: /\.js$/,
34+
loaders: ['react-hot', 'babel'],
35+
include: path.join(__dirname, 'src')
36+
}, {
37+
test: /\.js$/,
38+
loaders: ['react-hot', 'babel'],
39+
include: path.join(__dirname, '..', 'src')
40+
}]
41+
}
42+
};

0 commit comments

Comments
 (0)