React — twitter clone coding

Reference
1. absolute imports
2. firebase authentication

firebase vs. AWS amplify → both are the web back-end service.

Set up

1. vs code: npx create-react-app ‘name of project’
2. create new Repository in Github
3. firebase -> login -> Go to console
4. vs code: git remote add origin ‘address of repository’
5. 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.