create-react-app를 사용하는 Firebase 3.5.2가 작동하지 않습니다.

Question

나는 단계 this official Firebase Youtube guide을 따라갔습니다. Firebase를 공식 Firebase 채널의 예와 같이 create-react-app로 만든 React 앱에 사용하고 싶습니다.

하는 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') 
); 

이 없음 콘솔 로그 오류가 나타납니다

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> 
     ) 
    } 
} 

, 응답을 app.js 없습니다 : 나는 작은 형태의 중독에 다음 코드를 생성 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

좋아, 오류가 이는) 내가 입력 값의 변화를 처리하는 것을 잊었다 내가 snapshot.val (에 .name을 작성 놓친 있습니다 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> 
     ) 
    } 
} 

가치를 제대로 중포 기지 값 및 업데이트에에 보내 실시간으로 내 구성 요소.

Answer 2

귀하의 수입 명세서를 변경해야한다고 생각합니다. index.js에서 :

import firebase from 'firebase/app'; 

그리고 app.js에서 :

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