Skip to content
This repository was archived by the owner on Aug 17, 2024. It is now read-only.

Commit d59dd8f

Browse files
GmousseGmousse
committed
An example of react application using rebase/firebase
0 parents  commit d59dd8f

File tree

10 files changed

+257
-0
lines changed

10 files changed

+257
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
npm-debug.log*
2+
logs
3+
node_modules

‎LICENSE‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
Copyright (c) 2015,
2+
All rights reserved.
3+
4+
Redistribution and use in source and binary forms, with or without
5+
modification, are permitted provided that the following conditions are met:
6+
7+
* Redistributions of source code must retain the above copyright notice, this
8+
list of conditions and the following disclaimer.
9+
10+
* Redistributions in binary form must reproduce the above copyright notice,
11+
this list of conditions and the following disclaimer in the documentation
12+
and/or other materials provided with the distribution.
13+
14+
* Neither the name of app-starter nor the names of its
15+
contributors may be used to endorse or promote products derived from
16+
this software without specific prior written permission.
17+
18+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
19+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
20+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
21+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
22+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
23+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
24+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
25+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
26+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
27+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

‎README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Example of React application with firebase connection
2+
3+
### To use it:
4+
Install node_modules:
5+
```bash
6+
npm install
7+
```
8+
9+
Then to launch it:
10+
```bash
11+
npm run dev
12+
```
13+
14+
You can view the result on localhost:8080/public/
15+
16+
If you want to modify the interface, go in ./src/components/Interface.jsx.
17+
18+
With react-hot-loader you can see modifications directly in the browser without refreshing the page.
19+
20+
```.
21+
├── lib
22+
│   ├── components
23+
│   │   └── Interface.js
24+
│   └── index.js
25+
├── LICENSE
26+
├── package.json
27+
├── public
28+
│   ├── index.html
29+
│   └── index.js
30+
├── README.md
31+
├── src
32+
│   ├── components
33+
│   │   └── Interface.jsx
34+
│   ├── css
35+
│   │   └── main.css
36+
│   └── index.js
37+
└── webpack.config.js
38+
```

‎package.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "react-firebase-example",
3+
"version": "0.0.1",
4+
"description": "",
5+
"main": "./lib",
6+
"scripts": {
7+
"compile": "babel -d lib/ src/",
8+
"prepublish": "npm run compile",
9+
"dev": "webpack-dev-server src/index.js"
10+
},
11+
"author": "Guillaume Mousnier",
12+
"license": "BSD",
13+
"dependencies": {
14+
"babel": "^5.8.23",
15+
"d3": "^3.5.6"
16+
},
17+
"peerDependencies": {
18+
"react": "^0.14.0"
19+
},
20+
"devDependencies": {
21+
"babel": "^5.8.23",
22+
"babel-core": "^5.8.25",
23+
"babel-loader": "^5.3.2",
24+
"css-loader": "^0.23.0",
25+
"file-loader": "^0.8.4",
26+
"jsx-loader": "^0.13.2",
27+
"re-base": "^1.3.1",
28+
"react": "^0.14.0",
29+
"react-addons": "^0.9.0",
30+
"react-dom": "^0.14.0",
31+
"react-hot-loader": "^1.3.0",
32+
"style-loader": "^0.13.0",
33+
"webpack": "^1.12.2",
34+
"webpack-dev-server": "^1.11.0"
35+
}
36+
}

‎public/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>React + firebase example</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="icon" type="image/png" href="img/favicon.png" />
8+
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
9+
</head>
10+
<body>
11+
<script src="index.js"></script>
12+
</body>
13+
</html>

‎public/index.js‎

Whitespace-only changes.

‎src/components/Interface.jsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import Rebase from 're-base';
3+
4+
let base = Rebase.createClass('https://mise-en-commun.firebaseio.com/');
5+
import '../css/main.css';
6+
7+
class Interface extends React.Component {
8+
constructor() {
9+
super();
10+
this.state = {
11+
words: [''],
12+
step: 1
13+
}
14+
}
15+
16+
componentDidMount() {
17+
this.ref = base.syncState('words', {
18+
context: this,
19+
state: 'words',
20+
asArray: true,
21+
then() {console.log("pointend connected")}
22+
});
23+
}
24+
25+
_displayWords() {
26+
return this.state.words.map((word)=> <h2 style={{marginRight: "10px"}}> {word} </h2>)
27+
}
28+
29+
_changeState() {
30+
if(this.state.step == 1) {
31+
this.setState({
32+
words: ["You","cant","blame","gravity","for falling in love"],
33+
step: 2
34+
})
35+
} else {
36+
this.setState({
37+
words: ["The","only","source","of","knowledge","is","experience"],
38+
step: 1
39+
})
40+
}
41+
}
42+
43+
render() {
44+
console.log(this.state)
45+
return (
46+
<div id="page" style={{display: "flex", flexDirection: "column"}}>
47+
<h1 style={{textAlign: "center"}}>Mise en commun de code!</h1>
48+
<div style={{margin: "50px auto 0px auto", width: "auto", display:"flex", flexDirection: "row"}}>
49+
{this._displayWords()}
50+
</div>
51+
<button onClick={this._changeState.bind(this,2)} style={{display: "flex", margin: "50px auto 0px auto", width: 200, height:50}} text="Click on Me!">
52+
Vas y cliques là !
53+
</button>
54+
</div>
55+
)
56+
}
57+
}
58+
export default Interface;

‎src/css/main.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
body {
2+
background: #fff;
3+
color: #666;
4+
font: 90%/180% Arial, Helvetica, sans-serif;
5+
width: 800px;
6+
max-width: 96%;
7+
margin: 0 auto;
8+
}
9+
a {
10+
color: #69C;
11+
text-decoration: none;
12+
}
13+
a:hover {
14+
color: #F60;
15+
}
16+
h1 {
17+
font: 1.7em;
18+
line-height: 110%;
19+
color: #000;
20+
}
21+
p {
22+
margin: 0 0 20px;
23+
}

‎src/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import ReactDom from 'react-dom';
2+
import React from 'react';
3+
import Interface from './components/Interface.jsx';
4+
5+
ReactDom.render(<Interface/>, document.body);

‎webpack.config.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
var path = require('path');
2+
var webpack = require('webpack');
3+
4+
module.exports = {
5+
entry: [
6+
'webpack-dev-server/client?http://localhost:8080/',
7+
'webpack/hot/only-dev-server'
8+
],
9+
output: {
10+
filename: 'index.js',
11+
path: path.join(__dirname, '/public/'),
12+
publicPath: '/public/'
13+
},
14+
resolve: {
15+
extensions: [
16+
'', '.js', '.json', '.jsx'
17+
]
18+
},
19+
module: {
20+
loaders: [
21+
{
22+
test: /\.json$/,
23+
loaders: ['json']
24+
}, {
25+
test: /\.jsx$/,
26+
exclude: /node_modules/,
27+
loaders: [
28+
'react-hot', 'jsx-loader', 'babel-loader'
29+
]
30+
}, {
31+
test: /\.js$/,
32+
exclude: /node_modules/,
33+
loaders: [
34+
'react-hot','jsx-loader', 'babel-loader'
35+
]
36+
}, {
37+
test: /\.css$/,
38+
loader: 'style!css'
39+
}, {
40+
test: /\.(ico|jpe?g|png|gif)$/,
41+
loaders: ['file?name=[path][name].[ext]&context=./src']
42+
}, {
43+
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
44+
loaders: ['file?name=[path][name].[ext]&context=./src']
45+
}, {
46+
test: /\.(html|txt)$/,
47+
loaders: ['file?name=[path][name].[ext]&context=./src']
48+
}
49+
]
50+
},
51+
plugins: ([
52+
new webpack.HotModuleReplacementPlugin()
53+
])
54+
};

0 commit comments

Comments
 (0)