npm install --save redux react-redux redux-thunk
npm install --save firebase
Tuesday 25 June 2019
React-Redux-Firebase Data Flow
npm install --save redux react-redux redux-thunk
npm install --save firebase
Sunday 23 June 2019
React-Firebase Render Lists
state = { posts: {} };
async componentDidMount () {
await database.on('value', (snap) => {
this.setState({ posts: snap.val() });
});
}
renderPosts = () => {
if (this.state.posts !== null) {
const posts = this.state.posts;
return Object.keys(posts).map((key) => (
<div key={key}>
<h2>{posts[key].title}</h2>
<p>{posts[key].body}</p>
</div>
));
}
};
Sync React App with Firebase Real-time Database
---- fbConfig.js
import * as firebase from 'firebase';
var config = {
apiKey: '',
authDomain: '',
databaseURL: '',
projectId: '',
storageBucket: '',
messagingSenderId: '',
appId: ''
};
firebase.initializeApp(config);
export default firebase;
---- App.js
import firebase from './fbCOnfig';
state = {
speed: 0
};
componentDidMount () {
const rootRef = firebase.database().ref().child('react');
const speedRef = rootRef.child('speed');
speedRef.on('value', (snap) => {
this.setState({ speed: snap.val() });
});
}
Saturday 22 June 2019
Display Data in HTML using Firebase
<!DOCTYPE html>
<html>
<head>
<title>Sandbox</title>
<meta charset="UTF-8" />
<script
src="https://www.gstatic.com/firebasejs/6.2.2/firebase-app.js">
</script>
<script
src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js">
</script>
</head>
<body>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
firebase.initializeApp(firebaseConfig);
var dbRef = firebase.database().ref().child('text');
dbRef.on('value', snap => console.log(snap.val()));
</script>
</body>
</html>
Subscribe to:
Posts (Atom)