React Workshop #3

1. Hang on… we are starting soon!
While we wait, make sure you have the code from the second workshop!
If you don’t have it:
❏ run npx create-react-app chatroom
❏ go into chatroom/ and run npm install --save firebase
❏ replace the src/ folder with rb.gy/fo4dug
Afterwards (or if you do have it):
❏ run npm install -g firebase-tools

2. Add a Backend and
Deploy!
Zhenghui (Zheng) Wang
Boston University DSC
Boston University Developer Student Club

3. Firebase
Sounds cool… but what is it?
Application for developing applications
Can help us perform a variety of tasks:
❏ Host websites
❏ Maintain database
❏ Store static information
❏ Has easy to use implementations of common tasks such as authentication

4. JavaScript: async and listeners
Scary words...
async: asynchronous code
❏ involves promises
❏ load page w/o database fetch
listeners: implementing handlers for events
❏ change page upon new data

5. React: component life cycles
Components are alive!?!

6. If you don’t have the code from last workshop:
❏ run npx create-react-app chatroom
❏ go into chatroom/ and run npm install --save firebase
❏ replace the src/ folder with rb.gy/fo4dug
Afterwards (or if you do have it):
❏ run npm install -g firebase-tools
Let’s Finish Up!
Online Chat Room

7. Now I should share
my screen...
Zhenghui (Zheng) Wang
Boston University DSC
Boston University Developer Student Club

8. Other Hosting Options
I like the sound of free...
❏ Heroku (CRA tutorial link)
❏ Firebase (CRA tutorial link)
❏ GitHub Pages (CRA tutorial link) [static pages only]
❏ Netlify (CRA tutorial link)
❏ Or… look through github student developer pack!

9. That’s all!
Thanks for stopping by <3
Zhenghui (Zheng) Wang
Boston University DSC
Boston University Developer Student Club