Skip to content

Instantly share code, notes, and snippets.

@lricoy
Last active August 3, 2016 04:31
Show Gist options
  • Save lricoy/40fac3918ac86a0bea65f1c27dce29ca to your computer and use it in GitHub Desktop.
Save lricoy/40fac3918ac86a0bea65f1c27dce29ca to your computer and use it in GitHub Desktop.
"Create React App" modified sample
import React, { Component } from 'react';
import firebase from 'firebase';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor (props) {
super(props);
this.state = {
users: ['Carregando...']
};
}
handleSubmit() {
const newItem = this.refs.itemText.value;
this.usersRef.push(newItem);
this.refs.itemText.value = '';
}
componentWillMount() {
const config = {
apiKey: "XXXXXXXXXX",
authDomain: "<seu-projeto>.firebaseapp.com",
databaseURL: "https://<seu-projeto>.firebaseio.com",
storageBucket: "<seu-projeto>.appspot.com",
};
firebase.initializeApp(config);
this.usersRef = firebase.database().ref('/');
this.usersRef.on('value', (data) => {
data = data.val();
if(data != null) {
const usersArray = Object.keys(data).map(key => data[key])
this.setState({users: usersArray})
}
});
}
render() {
const {users} = this.state;
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<input type="text" ref="itemText" placeholder="Digite um novo item aqui..." />
<button type="button" onClick={() => this.handleSubmit()}>Adicionar</button>
<ul>
{users.map((user, index) => (
<li style={{listStyleType: 'none'}} key={index}>{user}</li>
))}
</ul>
</div>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment