mirror of
https://github.com/zhigang1992/reactfire.git
synced 2026-06-15 02:28:59 +08:00
67 lines
2.1 KiB
HTML
67 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Todo App | ReactFire Demo</title>
|
|
|
|
<!-- React -->
|
|
<script src="https://fb.me/react-15.3.0.min.js"></script>
|
|
<script src="https://fb.me/react-dom-15.3.0.min.js"></script>
|
|
|
|
<!-- Firebase -->
|
|
<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
|
|
|
|
<!-- ReactFire -->
|
|
<script src="https://cdn.firebase.com/libs/reactfire/1.0.0/reactfire.min.js"></script>
|
|
|
|
<!-- throw-in-the-towel -->
|
|
<script src="https://unpkg.com/throw-in-the-towel@2"></script>
|
|
|
|
<!-- Initialize the Firebase SDK -->
|
|
<script>
|
|
var config = {
|
|
apiKey: "AIzaSyCdxGmqWURL8YUfGPK3OVANsyvsE0cHV5s",
|
|
authDomain: "reactfiretodoapp.firebaseapp.com",
|
|
databaseURL: "https://reactfiretodoapp.firebaseio.com"
|
|
};
|
|
firebase.initializeApp(config);
|
|
</script>
|
|
|
|
<!-- Custom JS -->
|
|
<script type="text/babel" src="js/todoAppOriginal.js"></script>
|
|
<script type="text/babel" src="js/todoAppFirebaseExplicit.js"></script>
|
|
<script type="text/babel" src="js/todoAppFirebaseImplicit.js"></script>
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="demoContainer">
|
|
<h1>Todo App | ReactFire Demo</h1>
|
|
<p>
|
|
<a href="https://github.com/firebase/reactfire">ReactFire</a> is a
|
|
<a href="https://facebook.github.io/react/">ReactJS</a> mixin which allows for easy
|
|
integration of <a href="https://firebase.google.com/">Firebase</a> into your React apps.
|
|
See how this was made by reading the
|
|
<a href="https://github.com/firebase/reactfire/tree/master/docs/guide.md">ReactFire documentation</a>.
|
|
</p>
|
|
|
|
<div class="todoAppContainer">
|
|
<h2>Plain React</h2>
|
|
<div id="todoApp1"></div>
|
|
</div>
|
|
|
|
<div class="todoAppContainer">
|
|
<h2>React + Plain Firebase</h2>
|
|
<div id="todoApp2"></div>
|
|
</div>
|
|
|
|
<div class="todoAppContainer">
|
|
<h2>React + ReactFire</h2>
|
|
<div id="todoApp3"></div>
|
|
</div>
|
|
<div style="clear: both; margin-bottom: 10px;"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|