Exploring React.js

React: The library for web and native user interfaces

Prerequisites

• try/catch/finally

Day 01: Intro to the React Philosophy of Components

Agenda

• What is React?
• What is the philosophy of React?
• How to think about Components
• React Hello World

Tasks

• Create a personal/professional GitHub account
• Fork GitHub Repository: React-Journey
• Install Live Server VSCode Extension

Study & Practice

Use the Hints and/or Solutions only as a last resort!

The simplest way to start experimenting with React, is by downloading the HTML page example found in the Try React locally section of the documentation and running it locally using Live Server.

• Your First Component
• Importing and Exporting Components
• Writing Markup with JSX
• JavaScript in JSX with Curly Braces

Exercises

Most of the chapters from the documentation above contain small exercises that will give you the chance to practice on the concepts. You can also practice on the exercises below:

• Cookie Notice exercise:
  • Inside the DAY.01 folder, you'll find a folder named exercises which contains a static HTML file (cookie-practice-original.html) which contains a simple Cookie notice widget. Your task is to use the React quickstart HTML found here and convert the Cookie notice widget into a React Component.

Resources

• The Official React Documentation
• Check the assets folder for this lesson.

---

Day 02

• Install Browser Extension: React DevTools

Study & Practice

Use the Hints and/or Solutions only as a last resort!

• Passing Props to a Component
• Conditional Rendering
• Rendering Lists
• Start building your personal portfolio website using React
  • Create a new (official) repository
• The <YouTube> Component challenge.
  • Start by copying the /DAY.02/exercises/youtube-original.html file. Rename to /DAY.02/exercises/youtube.html and start hacking!

Resources

• Live session code:
  • Props: /DAY.02/assets/live-session-14.12.2024-props.html

---

Day 03

Study & Practice

• Create a React Project with vite:

  • npm create vite@latest my-react-app -- --template react
  • cd my-react-app (you can use any name for your app folder)
  • npm install (one-time)
  • npm run dev (run every time you want to develop)
  • https://vite.dev/guide/#scaffolding-your-first-vite-project

• Other ways to start a new React project

  • https://react.dev/learn/start-a-new-react-project

• What is ?

• Creating an Element without JSX

• More material for study and practice coming soon...

---

Day 04

• Topics: useEffect and React Component Lifecycle
  • See README

---

Day 05