Oasis Spring Workshop 4: Intro to Frontend Development

Workshop External Resources

• Slides: https://docs.google.com/presentation/d/110S-rgi2-yMpmkKxpBJwSXvg1qtzUAjvJflO5m-qKOA/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 and why it is useful vs just using plain JavaScript/HTML. We use React because it is extremely popular and easy to get started with. It will help us make a classic—but essential—intro project: a to-do app.

Homework (optional)

• Quick Reading

Getting Started

Method 1 (RECOMMENDED)

Vanilla JS (Part 1):

1. Open the following REPL.it link: https://repl.it/@chessmyers/VanillaTODO
2. Click Fork (the blue button) and sign in with your Github account
3. Follow along to finish a TODO app made with plain JS/HTML/CSS

React (Part 2):

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 (if you know how to do this kinda thing)

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, but more importantly why React is so useful!

We would highly recommend doing the React tutorial on the official site. That is the best way to learn how to write real React code

• Do the official React tutorial here
• After doing the tutorial, start reading through the React docs starting from this page
• To read more about frontend development in general and other popular frameworks, check out the Oasis Starting Guide section on frontend development here

If you couldn't make the workshop

If you were not able to attend, don't worry! There are many great ways on the web to get started using React for free. The resources linked above are an excellent place to start