Starts with this app First Flight on GitHub.

Basically it's just a create-react-app with some extra CSS. Entry point

  //	****		index.js		****

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

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

And

  //	****		App.js		****

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App--header">
          <h2>Welcome to React and Firebase</h2>
        </div>
        <pre className="App--data">
          One day, some data from Firebase will go here.
        </pre>
      </div>
    );
  }
}

export default App;

Starts with $ npm start

Now we need to set up a Firebase project, and connect it to React. We need to $ npm install firebase.

Set up a project in Firebase

http://console.firebase.google.com

button create new project ☛ name it and ☛ create the project button.

Now we have our project created.

Configure (API key, etc)

Go to ☛ Authentication menu, button top right ☛ web setup. Gives you all the copy paste code for your JavaScript app.

He will create a module for initialising the app so that he only needs to provide the keys only once in his app. Then he exports the initialised version of the Firebase SDK and he will use that everywhere in his app.

So he creates firebase.js

  //	****		firebase.js		****

import firebase from 'firebase'

var config = {
// copy pastes the code from config popup in the browser...
}
firebase.initializeApp(config);

export default firebase

Now he has firebase setup.

Question: what would you store in the storage bucket?

binary data, imeages, movies.

Get a connection to the database

firebase.database()

For convenience he will export more methods from the initialisation:

  //	****		firebase.js		****

import firebase from 'firebase'

// copy pastes the code from config popup in the browser...

export default firebase
export const database = firebase.database()

Question: What about saving all these keys here that will be downloaded to the browser?

No, it's not dangerous. We will set up autorisation and anyway you will have to set up the keys so that the client knows what to connect to. We can also whitelist domains that are allowed to make a connection.