Workshop – React from Scratch


Ever since React was released in 2013, it has changed the way we think about web applications and user interface development.

Even though React is conceptually simpler than some alternative JavaScript frameworks, getting started with React is still complicated. The confusion is often caused by the new idioms of its underlying technology (ES2015, often referred to as “ES6”), the extra tools that surface along with its usage, or the corollary technologies that can be integrated with React.

This full-day workshop tackles all of these issues, and will get you started with React. Starting from zero React knowledge it will walk you through React’s tools and features, along with some key parts of ES2015. At the end of this workshop you’ll be familiar with JSX, Components, props, state, refs, hooks, basic testing, etc. and will be able to deploy your freshly created app.

The workshop has already been battle tested during in-house trainings at companies and as part of several pre-conference workshops.



  • Basic knowledge of JavaScript/HTML/CSS

    • (ES5; key parts of ES2015 (aka “ES6”) and up will be covered where necessary)
  • A laptop with a working installation of:


What we’ll cover

In short, the workshop will teach you modern React, Hooks included:

  1. Introduction & Installation
  2. Hello World! (JSX)
  3. Components and Props
  4. Old vs. New: Class Components vs. Function Components, and Hooks
  5. State and the useState Hook
  6. Responding to State Change with useEffect
  7. Referencing DOM Nodes with useRef
  8. Custom Hooks
  9. Complex state, Immutability, and useReducer
  10. (~) No more prop drilling with useContext
  11. (~) Optimizing performance with React.memo(), useMemo and useCallback
  12. (~) Miscellaneous

Corollary technologies such as ES2015+ (“ES6”), webpack, npx, ESLint, etc. are also covered.

Chapters prefixed with a (~) might be omitted due to time constraints. They are however included in the course notes and can be checked out by the students themselves.


Course Materials

💁‍♂️ Not all slides are published online. As a workshop participant you’ll receive an outline covering all topics mentioned.


About the instructor

Bram Van Damme, nicknamed Bramus, is a web developer from Belgium. From the moment he discovered the web at the age of 14 (way back in 1997), he fell in love with it and has been tinkering with it ever since.

With his company 3RDS he works as a freelance developer, tackling both the frontend (HTML, CSS, JS) and the backend (PHP, MySQL). Before launching 3RDS, Bramus worked as a Lecturer Web & Mobile at Odisee, a Belgian Technical University.



The workshop – which takes up a full day – can be planned for individual developers at a fixed location, or can be delivered in-company. Sometimes the workshop is also organised as part of a conference, as a pre-conference workshop. The workshop must be attended in-person.

Workshop for individual developers

Are you an individual developer? Then come join other interested developers at one of the workshop sessions. Default location is Hotel Otus (Wetteren, Belgium), with the option to move to Bruges or Antwerp. A workshop ticket costs € 529 (ex. VAT) and includes entry to the workshop, lunch, and coffee/tea during the breaks. Tickets will be invoiced and must be paid for in advance.

  • 💵 € 529 (ex. VAT) per person
  • ✅ Workshop entrance, lunch, coffee/tea during breaks
  • 🗺 Hotel Otus, Wetteren, Belgium
  • 🗓 A few times per year. See schedule

Contact me in case of interest.

💡 A least 4 participants are required to continue with a planned workshop. Maximum 10 seats per session are available.

In-Company Workshop

Interested with your company? You provide the room+screen+chairs, and I’ll walk your devs through it all. Together we can look for a date that fits well for the both of us. A workshop ticket costs € 479 (ex. VAT) and includes entry to the workshop. Starting from 6 people we can discuss pricing. Tickets will be invoiced and must be paid for in advance.

  • 💵 € 479 (ex. VAT) per person
  • ✅ Workshop entrance
  • 🗺 Your own office
  • 🗓 A date of your choice

Contact me in case of interest.

Pre-Conference Workshop

The workshop is also offered as part of conferences, as a pre-conference workshop. Prices vary as they’re decided upon by the conference organisers. Tickets (subject to availability) can be bought directly at the conference websites themselves.

  • 💵 Decided upon by the conference organisers
  • ✅ Workshop entrance, mostly lunch and coffee/tea during breaks are included. See conference website for details
  • 🗺 Near the conference.
  • 🗓 Mostly a day (or two days) before the conference.

💡 If you’re a conference organiser feel free to contact me if you want this workshop to be part of your pre-conference workshop offering.


Workshop Schedule

Planned Sessions

  • Cancelled due to #coronavirus 🗓 March 18, 2020
    💻 Workshop
    🗺 Hotel Otus, Wetteren, Belgium
    🎫 5/10 seats left (contact me in case of interest)
  • Cancelled due to #coronavirus 🗓 April 22, 2020
    💻 Pre-Conference Workshop at JSHeroes
    🗺 Cluj-Napoca, Romania
    🎫 tickets

🤔 Is a date of your preference not listed? Don’t worry, contact me and perhaps we can work something out.

Previous Sessions

  • October 2019 – Pre-Conference Workshop Full Stack Europe – Antwerp, Belgium
  • November 2019 – In-Company Workshop at Mono – Ghent, Belgium



The lengths that Bram goes into detailing every single small piece of this workshop is phenomenal. Every small thing that passes is abundantly covered, either by Bram himself or the slides. Hard recommend.

— Dries Vints, Developer at Laravel

Over the last couple of years, I’d mainly been doing backend work. My most “recent” serious frontend work dated back to good old jQuery. Having inherited a project with a React frontend, it’s declarative programming approach was difficult to wrap my mind around. Bramus’ workshop helped me get on track again and taught me enough to carry on on my own. I’d highly recommend the workshop for anyone that’s new to React, finds it difficult to see the forest for the trees and wants to quickly become productive again using React.

— Bram Van der Sype, Lead Developer, Antenna