Workshop 6: In-Depth Frontend Development

Workshop External Resources

• Youtube Recording: https://youtu.be/QF_H7ods2Mw
• Slides: https://docs.google.com/presentation/d/1JQRA5FJ1ghw-0EAWJFI9J-2rPbjPzW4wbrR3hClhpYk
• Kahoot: https://create.kahoot.it/share/oasis-workshop-6-in-depth-frontend-development/baecaff3-2569-4bff-aa08-6862a6b9a443
• Oasis Starting Guide: https://github.com/northeastern-oasis/Ultimate-Oasis-Starting-Guide/tree/master/frontend-dev

Congratulations on continuing your React journey! Becoming proficient with it will take practice and persistence, but what we will cover today are some more of the foundational concepts you will need to build powerful applications.

The interactive portion of this workshop will focus on completing a basic app that accesses various public API's and displays the values they return.

Getting Started

Method 1 (RECOMMENDED)

1. Open the following Stackblitz link: https://stackblitz.com/edit/oasis-workshop-6-in-depth-frontend
2. Click Fork at top of window
3. (optional, but recommended) Sign in using Github to save your code (make an account here if you don't have one)
4. Follow along with workshop
5. Note: Make sure you save often!! Stackblitz has occasionally blanked out in the past. As long as you keep saving though, you'll be able to just refresh and pick up where you left off

Method 2 (ONLY IF YOU KNOW WHAT YOU'RE DOING)

1. Clone the Workshop 6 Github repository into a new folder on your machine (in Terminal or Command Prompt, type git clone REPO_URL, where REPO_URL is the clone repository found on the top of this page). This repo does contain quite a bit of stuff, but we'll explain what everything does.
2. Open the parent folder using your favorite IDE. This is important because we will be editing multiple files to build our app.
3. From the same terminal window you used to clone, type npm install. This will install the packages you'll need (defined in package.json), including React and Axios.
4. You're all set! Just have the cloned folder easily accessible and follow along with the workshop to start writing React code

During the workshop

We will be working to finish implementing a simple app to test web API's. Starting by reviewing App.js, we will finish QuoteView and AgeGuesser, then implement ActivityProvider from scratch!

• QuoteView: Shows us the quote of the day
• AgeGuesser: Guesses our age based on our name
• ActivityProvider: Suggests an activity for us to do

After the Workshop

Well done finishing the workshop! You now have more skills to continue creating React applications and access web resources with them. Though today we accessed public web API's, you can also use the same strategies to access your own backend API! To continue learning, we'd recommend the following resources, same as the ones we recommended from Workshop 4. There are a ton of great React/frontend learning resources out there!

• Huge list of public APIs to play around with: https://mixedanalytics.com/blog/list-actually-free-open-no-auth-needed-apis/
• Read through the React docs, starting here. Now that you’ve gotten an introduction to the library learning more from it’s documentation will be much easier
• Check out the Oasis Starting Guide section on frontend development here
• Check out create-react-app for an easy way to get started with making a full-fledged React app on your machine

If you couldn't make the workshop

If you were not able to attend, don't worry! There are still many great ways to get started using React. The React official website has a good tutorial for getting started. You can also read more about frontend development in the Ultimate Oasis Starting Guide. Good luck!