Workshop 4: Intro Frontend Development

Workshop External Resources

• Youtube Recording: https://youtu.be/If-Ir0UGU_A
• Slides: https://docs.google.com/presentation/d/1vjyrYvydJ1cE061qeL7tjAB85MeoePw2JYYMB9YfmEQ/edit?usp=sharing
• Oasis Starting Guide: https://github.com/northeastern-oasis/Ultimate-Oasis-Starting-Guide/tree/master/frontend-dev

Congratulations on taking your NEXT step in the world of web development! Creating browser-based apps and experiences is an extremely rewarding process and one of the most popular ways to make software that many can easily access.

The interactive portion of this workshop will focus on learning the basics of React, one of the most popular libraries available for creating responsive frontend applications. We will be making a classic—but essential—intro project: a to-do app.

Homework (optional)

• Quick Reading

Getting Started

Method 1 (RECOMMENDED)

1. Open the following Stackblitz link: https://stackblitz.com/edit/workshop-4-intro-react
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 4 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. You're all set! Just have the cloned folder easily accessible and follow along with the workshop to start writing React code

After the Workshop

Well done finishing the workshop! You now have the necessary skills to create basic React components and render them in your app! In future workshops, we will be diving into more advanced concepts, such as making network requests from your frontend and rendering the result. Moving forward, we would recommend the follow steps to continue developing and learning:

• 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!