create-react-appを使ったFirebase 3.5.2は動作しません

Question

私はステップバイステップthis official Firebase Youtube guideを続けました。 Firebaseを公式のFirebaseチャンネルの例のように、create-react-appで作成したReactアプリに使用したいと思います。 Iが小さなフォームの中毒と次のコード生成：

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import './index.css'; 
import * as firebase from 'firebase' 

const config = { 
    apiKey: "SUPERSECRET", 
    authDomain: "SUPERSECRET.firebaseapp.com", 
    databaseURL: "https://SUPERSECRET.firebaseio.com", 
    storageBucket: "", 
    messagingSenderId: "SUPERSECRET" 
}; 

firebase.initializeApp(config); 

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
); 

app.js

import React, { Component } from 'react'; 
import * as firebase from 'firebase'; 

export default class PageOne extends Component{ 

    constructor(){ 
     super(); 
     this.state = { 
      name: "example" 
     } 
    } 

    submitValue(e){ 
     e.preventDefault(); 
     console.log("pressed"); 
     const ref = firebase.database().ref().child("names"); 
     ref.set({ 
      name: e.target.value 
     }) 

    } 

    componentDidMount(){ 
     const ref = firebase.database().ref().child("names"); 
     ref.on('value', snapshot => { 
      this.setState({ 
       name: snapshot.val() 
      }); 
     }) 
    } 

    render(){ 
     return(
      <div> 
       <h1>{this.state.name}</h1> 
       <form onSubmit={this.submitValue.bind(this)} className="form"> 
        <input type="text" id="nameField"/> 
        <input type="submit" /> 
       </form> 
      </div> 
     ) 
    } 
} 

なしコンソールログエラーは、何の応答も表示されないがFirebaseから。 どうしたの？ありがとう!!

更新1：今すぐ

componentDidMount(){ 
     const ref = firebase.database().ref().child("names"); 
     ref.on('value', snapshot => { 
      this.setState({ 
       name: snapshot.val().name 
      }); 
     }) 
    } 

私がDBから読み取ることができますが、私は、フォームを送信したとき、私は値を書き込むことができません：私はsnapshot.valueにキーを追加するために逃した

。

Answer 1

[OK]を、エラーが（私は入力値の変化に対処するのを忘れ、私はsnapshot.valで.nameのを書くために逃したということです） これは、次のとおりです。

import firebase from 'firebase/app'; 

そしてapp.js中：index.jsでApp.jsで正しいコード：今すぐ

import React, { Component } from 'react'; 
import * as firebase from 'firebase'; 

export default class PageOne extends Component{ 

    constructor(props){ 
     super(props); 
     this.submitValue = this.submitValue.bind(this); 
     this.handleChange = this.handleChange.bind(this); 
     this.state = { 
      name: "Pippo", 
      value: "" 
     } 
    } 

    handleChange(e) { 
     this.setState({value: e.target.value}); 
    } 

    submitValue(e){ 
     e.preventDefault(); 
     const ref = firebase.database().ref().child("names"); 
     ref.set({ 
      name: this.state.value 
     }) 
    } 

    componentDidMount(){ 
     const ref = firebase.database().ref().child("names"); 
     ref.on('value', snapshot => { 
      this.setState({ 
       name: snapshot.val().name 
      }); 
     }) 
    } 

    render(){ 
     return(
      <div> 
       <h1>{this.state.name}</h1> 
       <form onSubmit={this.submitValue} className="form"> 
        <input type="text" value={this.state.value} onChange={this.handleChange}/> 
        <input type="submit" /> 
       </form> 
      </div> 
     ) 
    } 
} 

値が正しくFirebase値と更新中に送信します私のコンポーネントをリアルタイムで。

Answer 2

私はあなたのインポートステートメントを変更する必要があると思う。

import firebase from 'firebase/app'; 
import 'firebase/database';