Hi guys! We’re back to making our website with Firebase and React JS, but before we start, I want to give you a brief HTML dictionary so you know what I’m doing:
<h1> — A tag that will make a big piece of text that is bold
<h2> — A tag that will make a smaller piece of text that is bold
<h3> — A tag that will make a even smaller piece of text that is bold
And so on until <h6>
<input> — A very bad looking text field
<button onClick={}> — A Button, you can change onClick
And that is a brief dictionary of most of the HTML we will use. Now, remember that code you copied in Part 1, if it isn’t still copied, from the home page, go to the console and click on your project. Then, click the top left corner then click settings. Find the Your apps (it might be called Web apps) section and go to your app. After that, copy what’s between the <script> tags. <script> tags are never used in React JS. Only in old HTML. Then, go to your terminal and type npm i —save firebase. Now, go to your code and in the src folder, create a new folder called “firebase” and inside the firebase folder, create a new fail called “utils.js”. Fill it with this code:
————————————————————————————————————-
// This is getting firebase and all it’s utils
import * as firebase from ‘firebase’
// This is getting firebase auth
import ‘firebase/auth’
firebase.initializeApp(
// What we copied from the website here
)
// This is creating a variable storing firebase auth and allowing other files to view it
export var auth = firebase.auth();
————————————————————————————————————-
Now it App.js, we will add auth. Enter this code:
————————————————————————————————————-
import React, { useState } from ‘react’
// Get the auth variable
import { auth } from ‘./firebase/utils’
const App = () => {
// Create the variables containing the email and password along with the functions // to set them
const [email, setEmail] = useState(‘’)
const [password, setPassword] = useState(‘’)
const login = () => {
// Sign In
auth.signInWithEmailAndPassword(email, password)
.then((data) => {
// Do whatever you want here
})
}
const signup = () => {
// Sign In
auth.createUserWithEmailAndPassword(email, password)
.then((data) => {
// Do whatever you want here
})
}
return (
<div>
{/* Create the email field */}
<input onChange={(e) => setEmail(e.target.value)} placeholder=“Email” />
{/* Create the password field */}
<input onChange={(e) => setPassword(e.target.value)} placeholder=“Password” />
<button onClick={() => signup()}>Signup</button>
<button onClick={() => login()}>Login</button>
</div>
)
}
————————————————————————————————————-
And you have created a fully functional website with logins and logouts! You can customize your website with JavaScript in the code when I say ‘Do whatever you want here’. I suggest doing it cause nothing can hurt from messing around with code, but if you’re a beginner, I don’t suggest messing around. Now, if you want to publish the code, go to terminal and type npm run-script build and a folder in you main project folder (not src) will appear. It’s name will be build. You then should upload it to GoDaddy or Heroku. Congratulations! You have finished your website!