in JavaScript

Teaching React to an audience with different levels of mastery

meetup_react_1

Last week we organised in London the first hands-on Meetup of a series of workshops to prepare the upcoming React course we are going to teach in London.

The goal was attendees had to understand React components in about 2 hours. React components are a way to “break down the common design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces”. Those interfaces are called props in React. Another important thing to know to create components is state.  State in React is what makes components dynamic.

There are many tutorials on the Internet to learn the syntax for creating state and props, and how to pass the state to components through props. That’s quite trivial, what is more difficult to understand is how to break the interface into components and determine what is a state, and where the state should be placed. This article called Thinking in React is a good starting point.

The goal of our hands-on Meetup was to make people thinking in React. Our challenge was that people who attended this Meetup varied in their level of experience from very beginners to advanced JS developers.

We created a simple React bookstore app made up off some components. Initially, we thought off breaking the app by removing states and props so that students would have to fix the app. The idea was that students would learn by fixing the problems, once the app was fixed. Then, in theory, students would have learnt how to create components.

However we realised the following problems:

  1. Students who didn’t know much about React would spend a lot of time figuring out what is the actual problem.
  2. Who fixed the app would probably learn how to create states and pass props down to components, but they would not have practised how to break the app down into components, and that is a key point.
  3. How could we break the app and introduce bugs in an incremental level of difficulty so attendees with different skills could work on the same code in such a way that fixing it would not be too easy for some attendees or too difficult for the others.

The solution. We refactored the app and we merged all the components into just two components. In this way, attendees had to break the app down again in as many components as they thought. This is what happened:

meetup_react_1_2

  1. Beginners (students who didn’t know anything about React and were not very advanced in JavaScript) were able to identify at least one component to decompose it into two components and refactored the corresponding piece of code. They learnt what props and state are.
  2. Students that were advance JavaScript devs and knew well other frameworks like Angular were able to break the whole app into different components and “think in React”, a part from learning what props and state are. At the end of the meetup one person demoed and explained his refactored app to all the attendees.
  3. Students that were quite familiar with React refactored the app in many components and improved it adding Redux.  At the end of the meetup they demoed and explained their refactored app to all the attendees. This way everyone saw what could be the next step.

This approach was a good learning for us and we will use it in the next React course in London.

thanks_alex