如何通过ReactJS和Firebase使用电子邮件自动化构建新闻通讯应用程序

NB：我看到我的草稿中已有将近两年的教程，所以我决定将其发布。

在本教程中，我将构建一个简单的react Js应用程序，该应用程序在注册成功后处理新闻通讯注册和自动邮寄。 React世界的新手可以将本教程作为辅助项目来查找，以帮助您更好地了解React。 享受学习！！！

##要求
-React，BabelJs和ES5的基础知识
-火力地堡
-纱

##安装
我们将通过在终端中运行以下命令，使用“ create-react-app”创建项目来开始

create-react-app newsletter-app

项目完成安装过程后，请运行以下命令以使应用程序运行。

cd newsletter- app < br >yarn start

你应该看到这样的东西

## Firebase集成
我们将使用Firebase存储注册新闻通讯的用户的电子邮件。 您应该执行以下操作：
-在（ Firebase）上注册[https://firebase.google.com ]
-转到控制台并创建一个名为* newsletter-app *的应用程序
-在数据库>规则中为数据库设置访问规则。 您将看到以下内容。

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

有了上述内容，您将无法将任何内容保存到数据库。 因此，我们必须将读写角色设置为true，以便任何用户都可以与数据库进行交互。 您的规则现在应该如下所示：

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

通过运行此命令来安装Firebase react模块

yarn add  firebase

为了使Firebase在我们的应用程序中正常工作，我们需要将身份验证密钥添加到我们的react应用程序中。 可以在您的Firebase项目的概述页面上找到它，单击将Firebase添加到您的Web应用程序。 您应该会看到以下内容：

< script src = "https://www.gstatic.com/firebasejs/4.2.0/firebase.js" > </ script >
< script > 
  // Initialize Firebase
  var config = {
    apiKey: ".................................." ,
    authDomain: "newsletter-app-7b62b.firebaseapp.com" ,
    databaseURL: "https://newsletter-app-7b62b.firebaseio.com" ,
    projectId: "newsletter-app-7b62b" ,
    storageBucket: "newsletter-app-7b62b.appspot.com" ,
    messagingSenderId: "733783383"
  };
  firebase.initializeApp(config);
 </ script >

将其粘贴到“ public / index.html”文件的底部

之后，我们需要在我们的应用程序中有效使用Firebase。 在src文件夹中创建一个名为js的文件夹，然后创建一个名为firebase.js的文件，然后您的文件应类似于以下代码：

import * as firebase from 'firebase'
let database

export const init = () => {
    let config = {
        apiKey : "00000000000000000000000000000000" ,
        authDomain : "newsletter-app-7b62b.firebaseapp.com" ,
        databaseURL : "https://newsletter-app-7b62b.firebaseio.com" ,
        projectId : "newsletter-app-7b62b" ,
        storageBucket : "newsletter-app-7b62b.appspot.com" ,
        messagingSenderId : "0000000000"
    }
    firebase.initializeApp(config)
    database = firebase.database()
}

转到src文件夹，并确保您的App.js文件如下所示：

import React, { Component } from 'react' ;
import {init as firebaseInit} from './js/firebase' ;
import logo from './logo.svg' ;
import './App.css' ;

class App extends Component  {
    constructor (props) {
        super (props)
        firebaseInit()
    }

  render() {
    return (
      < div className = "App" >
         <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div> 
    );
  }
}

export default App;

运行该应用程序，它应该仍然可以正常运行。

##结论
希望您从本教程中学到了吗？ 本教程旨在让您动手使用ReactJs。 谢谢阅读。

你的推动者
天哪Kayode。

From: https://hackernoon.com/how-to-build-a-newsletter-application-with-email-automation-via-reactjs-and-firebase-n5dn32a2