Leading Supermarket chain re-skills FrontEnd Developers in React.JS

A major Supermarket asked JBI to run an intensive ReactJS course for Developers who were already familiar with Javascript, CSS and some of whom may have already experimented with React by themselves.

A course that would normally run over 3 days was adjusted to be delivered in 2 days by cutting out some of the introductory steps.

The course focused on giving Developers an understanding of what React is capable of, the advantages of using React, and how to design and develop webpages using React.

Delegates attending the course saw how this Library is fast, simple and flexible, and is suited to building single page apps with re-usable UI components.

We also talked about the tooling used in React development, demonstrating how to setup and use the React starter apps with Webpack and Jest.

Attendees got the option of building their webpage using these tools or using React without tooling (this helps them understand the React side from the tools side)

Success Factors

The organisation had a technically demanding audience and success was achieved by ensuring we had a technically competent instructor who could really add value and engage delegates in the subject matter through use of technically challenging labs and excellent interpersonal skills. There were varied technical levels within a group, which was managed by the instructor by pairing strong/weak delegates, and supplying the availability of additional more challenging Labs for stronger delegates and extra time spent with lower level delegates.

Wherever possible, Labs were tailored to reflect the Client’s environment, thereby ensuring better delegate engagement.

Success of this course also rested on frequent, connected practical exercises that allowed the attendee to leave with a complete web app.

The practical exercises in this course all built on the previous exercise in order to create a webpage that takes a JSON feed from Flikr and outputs a variable number of panels that show an image along with a title and description.  There was also a search box so that you could choose and change the content that you get from Flikr.  Each panel had a Like and Favourite button, the information was stored so that when you opened the page these settings were retrieved and displayed. All exercises were relevant to the real world of the Software Developers.

Example answers were provided for all exercises, plus examples of all the course code and other associated examples of good practice and procedures.

One of the main challenge with delivering these courses is that React uses a very different way of coding, it uses a Declarative style – many programmers are used to writing code in an Imperative style and changing the way they think about defining their output is sometimes a challenge. This hurdle is overcome by describing to delegates how their React code gets interpreted ‘under the bonnet’, showing the separation between their code, React’s interpretation and the underlying JavaScript.

Delegate feedback was collected using feedback forms with constructive criticism fed back into the next runs of the course:

“Brilliant course instructor – I rarely have women instructors and she had enormous wealth of knowledge, including most modern approaches and how to handle older legacy React which was so hopeful. Great fun, safe, learning space was cultivated in the classroom. Really engaging and creative, interesting practical exercises. Nice breakout room format.” GK, Junior software engineer

For further information on React training course click here

For other articles pertinent to this case study:

Front End Choices: Typescript vs Javascript

Management Consultancy improves Javascript with new Clean Coding skills