NB&＃xff1a;我看到我的草稿中已有将近两年的教程&＃xff0c;所以我决定将其发布。
在本教程中&＃xff0c;我将构建一个简单的react Js应用程序&＃xff0c;该应用程序在注册成功后处理新闻通讯注册和自动邮寄。 React世界的新手可以将本教程作为辅助项目来查找&＃xff0c;以帮助您更好地了解React。 享受学习&＃xff01;&＃xff01;&＃xff01;
##要求
-React&＃xff0c;BabelJs和ES5的基础知识
-火力地堡
-纱
##安装
我们将通过在终端中运行以下命令&＃xff0c;使用“ create-react-app”创建项目来开始
create-react-app newsletter-app
项目完成安装过程后&＃xff0c;请运行以下命令以使应用程序运行。
cd newsletter- app
yarn start
你应该看到这样的东西
## Firebase集成
我们将使用Firebase存储注册新闻通讯的用户的电子邮件。 您应该执行以下操作&＃xff1a;
-在&＃xff08; Firebase&＃xff09;上注册[https://firebase.google.com ]
-转到控制台并创建一个名为* newsletter-app *的应用程序
-在数据库>规则中为数据库设置访问规则。 您将看到以下内容。
{"rules" : {".read" : "auth !&＃61; null" ,".write" : "auth !&＃61; null"}
}
有了上述内容&＃xff0c;您将无法将任何内容保存到数据库。 因此&＃xff0c;我们必须将读写角色设置为true&＃xff0c;以便任何用户都可以与数据库进行交互。 您的规则现在应该如下所示&＃xff1a;
{"rules" : {".read" : true ,".write" : true}
}
通过运行此命令来安装Firebase react模块
为了使Firebase在我们的应用程序中正常工作&＃xff0c;我们需要将身份验证密钥添加到我们的react应用程序中。 可以在您的Firebase项目的概述页面上找到它&＃xff0c;单击将Firebase添加到您的Web应用程序。 您应该会看到以下内容&＃xff1a;
src &＃61; "https://www.gstatic.com/firebasejs/4.2.0/firebase.js" >
// Initialize Firebasevar config &＃61; {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);
将其粘贴到“ public / index.html”文件的底部
之后&＃xff0c;我们需要在我们的应用程序中有效使用Firebase。 在src文件夹中创建一个名为js的文件夹&＃xff0c;然后创建一个名为firebase.js的文件&＃xff0c;然后您的文件应类似于以下代码&＃xff1a;
import * as firebase from &＃39;firebase&＃39;
let databaseexport const init &＃61; () &＃61;> {let config &＃61; {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 &＃61; firebase.database()
}
转到src文件夹&＃xff0c;并确保您的App.js文件如下所示&＃xff1a;
import React, { Component } from &＃39;react&＃39; ;
import {init as firebaseInit} from &＃39;./js/firebase&＃39; ;
import logo from &＃39;./logo.svg&＃39; ;
import &＃39;./App.css&＃39; ;class App extends Component {constructor (props) {super (props)firebaseInit()}render() {return (className &＃61; "App" >
![]()
Welcome to React
To get started, edit src/App.js and save to reload.
}export default App;
运行该应用程序&＃xff0c;它应该仍然可以正常运行。
##结论
希望您从本教程中学到了吗&＃xff1f; 本教程旨在让您动手使用ReactJs。 谢谢阅读。
你的推动者
天哪Kayode。
From: https://hackernoon.com/how-to-build-a-newsletter-application-with-email-automation-via-reactjs-and-firebase-n5dn32a2
京公网安备 11010802041100号