Javascript and React Intro

Topics covered in this week are:

• JavaScript as a programming language
• JavaScript in a browser
• SPA (Single Page Application)
• 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.

Learning objectives for the week

Monday

Prepare for the week. No classes or reviews today.

Tuesday (class)

Prepare for the class

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)

In-class exercises

Part I: 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

Part II: 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

Wednesday (CodeLab)

• Exercises

Thursday (class)

Prepare for the class

Orient yourself in this documentation:

1. Importing and Exporting Components
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

In-class exercises

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

Friday Exercise

• Dogma Friday

---

Check TimeEdit for time schedule, teacher, and location - and keep an eye on your inbox for urgent updates.

---

Table of contents

• Learning Objectives
• Exercises