Reference
1. absolute imports
2. firebase authentication
firebase vs. AWS amplify → both are the web back-end service.
Set up
- vs code: npx create-react-app ‘name of project’
- create new Repository in Github
- firebase -> login -> Go to console
- vs code: git remote add origin ‘address of repository’
- Delete something we will not use.
1) index.js: reportwebvitals(), ‘./index.css’
2) App.js: ‘./logo.svg’, ‘./App.css’, delete everything in ‘Return’ except div
Return <div></div>
3) delete the files: App.css, App.test.js, index.css, logo.svg, serviceworker.js, setupTest.js, reportwebvitals.js
4) package.json: delete “test”: “react-scriptstest” in “scripts”
6. vs code: git add .
git commit -m “1.0 Initialization”
git push origin master
7. create a project in firebase → set up ‘web’ app → Add Firebase SDK: It’s firebase’s configuration and we need to add this to coding file to connect to firebase.
1) vs code: npm install — save firebase
create a file ‘firebase.js’ inside of ‘src’ folder
2) copy below from Add Firebase SDK to the ‘firebase.js’ file:
import firebase from "firebase/app";
const **firebaseConfig = {.....};**
export default **firebase.initializeApp(firebaseConfig);**
8. vs code: npm run start
9. index.js: import firebase from “./firebase”;
(you can check if we receive the data from firebase → console.log(firebase))
10. To hide my key values in firebase.js from Github
1) create a file ‘.env’
2) .env:
REACT_APP_API_KEY = ‘firebase key values’ (copy and paste)
REACT_APP_AUTH_DOMAIN = ‘firebase key values’ (copy and paste)
….
3) firebase.js:
apikey: process.env.REACT_APP_API_KEY,
…
4) .gitignore:
add ‘.env’ in the last line
11. 1) create ‘components’ and ‘routes’ folder inside of ‘src’ folder
2) move App.js file to components folder + update the App import address in index.js
3) create files: Auth.js, Home.js, Profile.js, EditProfile.js in routes folder
import React from 'react';
const Auth = () => {
return;
};
export default
12. To use router: npm i react-router-dom
and create ‘Router.js’ file inside of components folder.