01 JS and React I

Learning objectives for the week

Topics covered in this week are:

1. JavaScript as a programming language
2. JavaScript in a browser
3. SPA (Single Page Application)
4. React intro

We are going to learn Javascript basics and DOM manipulation on the first day of teaching. Since you all know Java, you will see that Javascript is a bit different. But don’t worry, we will guide you through the differences and similarities.

The browser can be used as the excution environment for Javascript, but you can also also exexute Javascript from the command line using Node.js. We will use both environments in this course.

In the browser, Javascript can be used to manipulate the DOM (Document Object Model) of a webpage. In this way we can create dynamic web pages and do all kind of cool stuff. Everything you probably wanted to do on the 2nd semester. Now it’s time to do it!

So that’s why we start with Javascript and DOM manipulation. Later in the week we will introduce React, a library for building user interfaces. React is a Javascript library, so it’s important to understand Javascript first. And we will learn more and more Javascript as we go along.

Prepare for the week. No classes or reviews today.

As a Java developer, you will benefit from jumping right into the differences between Java and Javascript. So read this article for a crash start:

• Java vs JavaScript: What’s the Difference?

Also, you need to get familiar with Javascript documentation. Here are some links to get you started. Check it out and try to understand the basics:

• MDN Web Docs - the official source
• JavaScript.info - great overview

Read these parts of the Javascript.info topics:

• Javascript Datatypes
• DOM
• Debugging Javascript

Below are some great tutorials to watch on the sideline. You don’t need to watch these from start to end, but they are great to have as a reference, and to look up specific language constructs. BUT - at least see the DOM manipulation videos. They are the fundamental building blocks for understanding the rest of the frontend course.

• Javascript DOM part 1 (39:00)
• Javascript DOM part 2 (21:20)
• JavaScript Basics (3:26:42)

Setting up your development environment

1. Install Node.js (LTS version)
2. Install Visual Studio Code
3. Install Live Server extension in Visual Studio Code
4. Install ESLint extension in Visual Studio Code
5. Install Prettier extension in Visual Studio Code
6. More optional extensions for JavaScript and React development in Visual Studio Code:

Main Exercises

1. Exercise 1: Getting comfortable with arrays, filter, map, and forEach
2. Exercise 2: JS, DOM Manipulation and Events

Part III: Bonus exercises (JS training)

1. Exercise 1: Arrow function in JavaScript
2. Exercise 2: Destructuring in JavaScript
3. Exercise 3: Spread Operator in JavaScript
4. Exercise 4: Rest Parameter Syntax in JavaScript

• Exercises

1. Creating your first component
2. Importing and Exporting Components

1. Starting a new react project with Vite
2. Spread operator in JS
3. Destructuring in JS
4. Functional Components
5. Props
6. UseState
7. UseEffect
8. Fetch (GET) in JS
9. Fetching (GET) in React

1. Exercise 1: Import/export + spread, and destructuring
2. Exercise 2: Composing Components and Props
3. Exercise 3: Fetching from an API in React

• Start planning your frontend application for your portfolio project. Use a tool like figma or pen and paper to sketch out the UI and the components you will need.
• Based on this article start thinking about how you will break down your UI into components, and which user interactions should be posible in your application. The interactions we will add later.