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