A three-hour seminar I co-authored with Jamel Eddine Jridi for IFT3225 – Technologie de l’Internet, introducing React through its original class-based style.

Type

Seminar

Duration

3h - 1 bloc/sitting

Co-author

Jamel Eddine Jridi

Course

IFT3225 – Technologie de l’Internet

Materials

2 slide decks (PDF): theory and code

Language

French

View the seminar on GitHub

What the seminar covers

The first half places React in context: where it comes from (a library developed at Facebook and maintained as open source), how the Virtual DOM changes the way pages are rendered, what the library does well, where it falls short (for example its component-scoped CSS-in-JS approach), and how it compares with its main competitors.

The second half moves to code and follows a four-step method: split the interface into components, build a static version with props, make it dynamic with state, then wire up two-way data flow so that the pieces work together. It also walks through the component lifecycle: mounting, updating and unmounting.

A worked example

The method is applied to a small searchable course list. Starting from a mockup, the page is divided into components, rendered statically, then made interactive so that a search bar filters the list. The slides show where the state should live and why.

Why “legacy”

The examples use class components, setState() and ReactDOM.render(), the style React relied on when this seminar was at its peak. I keep it available for architectures that still depend on it; my Next.js courses cover function components and hooks.

View the seminar on GitHub