React — twitter clone coding

Inhwa M.
2 min readSep 23, 2021

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.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Inhwa M.
Inhwa M.

Written by Inhwa M.

Graduate student of CS, My study notes for programming

No responses yet

Write a response