Это мой первый рассказ на английском языке, некоторые предложения могут содержать неправильную грамматику.

Хорошая отправная точка для React + Redux: https://www.babelcoder.com/blog/posts/react-redux-isomorphic-day3-introduction-to-redux (тайский язык)

Эта история о разработке онлайн-приложений в реальном времени с помощью Google Firebase, React.JS и Redux.

Никаких знаний и опыта в области серверной части или баз данных не требуется, потому что мы собираемся использовать Google Firebase.

Вы можете поиграть с демо здесь

Глава 1:
1.1 Создание приложения React с помощью стартового набора
1.2 Настройка Google Firebase для веб-приложения

Давайте начнем…

1.1 Создание приложения React с помощью стартового набора

Сначала давайте создадим пустое приложение для реагирования. Есть 2 способа создать новое приложение React

  1. Использование React Starter Kit от Facebook
  2. Я использую свой собственный проект (на основе React Starter Kit), но включаю реактивный маршрутизатор
$ git clone https://github.com/taweesoft/create-react-app-router.git firebase-realtime-todo
$ cd firebase-realtime-todo
$ npm install

Настоятельно рекомендую второй способ.

После того, как вы создали проект, вы должны получить его на экране.

Поздравляю, у вас есть проект React.

1.2 Настройка Google Firebase

Затем мы настроим бэкэнд и базу данных для нашего проекта.

Перейдите на https://console.firebase.google.com и создайте новый проект

Далее, настройте правила доступа для базы данных в База данных ›Правила. Вы должны получить такой результат.

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Это означает, что когда кто-то хочет прочитать или записать данные в базу данных, он должен быть авторизован сервером. Но в этом случае мы позволяем любому изменять нашу базу данных. Нам нужно перейти на это

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

** Если вы хотите проверить пользователя перед изменением базы данных. "Вот"

Мы создали проект Google Firebase. Затем мы подключим ваше приложение реагирования к firebase. Вернуться, чтобы отреагировать на проект.

Сначала нам нужно установить модуль firebase.

$ npm install --save firebase

Нам нужно что-то, чтобы сообщить Firebase, что наше приложение получит к нему доступ. Это ключ аутентификации. Его можно найти на странице обзора вашего проекта firebase, нажмите Добавить firebase в ваше веб-приложение. Информация об авторизации должна отображаться следующим образом.

Создайте firebase.js в каталоге src/javascripts.

src/javascripts/firebase.js
import * as firebase from 'firebase'
let database
export const init = () => {
  let config = {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "realtime-todo-app.firebaseapp.com",
    databaseURL: "https://realtime-todo-app.firebaseio.com",
    storageBucket: "realtime-todo-app.appspot.com",
    messagingSenderId: "XXXXXXXXXXXX"
  }
  firebase.initializeApp(config)
  database = firebase.database()
}

init () создаст соединение между веб-приложением и firebase.

Установите соединение firebase в root.js, вызвав init () из firebase.js в конструкторе.

src/components/root.js
import React, {Component} from 'react'
import {init as firebaseInit} from 'javascripts/firebase'
import {browserHistory} from 'react-router'
import Routes from './routes'
export default class Root extends Component {
  constructor(props) {
    super(props)
    firebaseInit()
  }
render() {
    return (
      <Routes history={browserHistory}/>
    )
  }
}

Ваше приложение должно быть запущено с тем же результатом. Ничего не изменилось в пользовательском интерфейсе

Поздравляем, мы только что связали firebase и веб-приложение.

Наконец, ваша папка src должна выглядеть так

src/
 |- components
   |- App/
   |- root.js
   |- routes.js
 |- javascripts
   |- firebase.js

Давайте продолжим [Глава 2: Чтение и запись в Firebase]