Workshop 4 - JavaScript, React, and JSX

Workshop Topics

• Setup

  • Make sure to install Node.js!
  • Have your development environment setup (see previous workshop)

• Introduction to JavaScript
  A brief overview of JavaScript and why it is fundamental to modern web development.

• Introducing React
  We introduced React as a powerful framework for building user interfaces. Topics covered:

  • How React works and why it exists
  • Migrating from simple HTML & CSS to React

• JSX Basics
  We explored JSX as a syntax extension that allows writing HTML-like code in JavaScript. The initial exercise included:

  • Creating a simple to-do list in JSX
  • No state or components; everything in one component

• Building Components
  We broke the to-do list into multiple components, demonstrating how to manage component props. Topics covered:

  • Turning part of the JSX into separate components
  • Passing data using props

• Adding State and Dark Mode
  We introduced state management and enhanced the app with a simple dark mode toggle:

  • Changing the background color and text of the dark mode button
  • Demonstrating debugging with the console

• Handling Arrays and Objects in React
  We discussed how to work with arrays and objects in React. Key topics:

  • Using .map, .filter, and .forEach to iterate over data
  • Managing tricky aspects of array state

  Example dummy data:

  {
    title: "Wash dishes",
    description: "Clean the dishes",
    deadline: "1500",
    done: true
  }
  

Materials

Workshop recording	Slides	Homework
Link	Link	Assignment 4