During the coding workshop we explored React and it’s broader ecosystem with practical coding exercises. The workshop covered everything, from the basics to the more advanced tropics, including React, JSX and Javascript.

Kristijan "Kitze" Ristovski was our coach for the entire week. Working in web development for over 7 years, he experimented and worked with many programming languages and frameworks. He currently focuses on ES6, React, Aphrodite and MobX.


yarn add create-react-app

On Monday we started with an introduction to ES2015 (let, const, arrow functions, classes and modules). We continued with setting up all tools and ran our first React app with some custom components. One thing we used was Babel, a compiler for JavaScript. It can handle all the new ES6 syntax, with built-in support for React’s JSX extensions and Flow type annotations without sacrificing backwards compatibility for older browsers. So, it basically transforms JavaScript into JavaScript, check out a simple example of how nice, short and clean our code looks with ES6:


Besides Babel we need nothing less than a dev server, a CSS loader, autoprefixing, an image loader, linting, and a build script for production to run react. Sounds too complicated? It does! But luckily there’s create-react-app that can help. It’s just one dependency and needs no configuration nor any command line set-up options. So, at the end of day 1 everyone had a good overview of the most important tools around React, cloned the above linked repo and created some custom components in their own app.


import React, {Component} from 'react';

Well-equipped with the latest ES6 syntax from Monday we dived deeper into React state management, interactions, events, stateful vs. stateless components and component lifecycle events. Our application became bigger and smarter.


import CSSModules from 'react-css-modules';

Half-time and finally some styling on our to-do list. But before we learned about prettifying our apps Kitze taught us more about lifecycle events (componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate and componentWillUnmount). After going through all those “shoulda-coulda-woulda-methods” we did a comparison between popular ways of styling in React (CSS, inline styles, CSS-in-JS, css-modules and styled-components). Here’s an overview of many more CSS in JS techniques.



yarn add redux

On Thursday we put our now styled React apps aside and had a look at Redux, a state container for JavaScript apps. It’s mostly used to control data-flows and state management in applications. Redux therefore holds a single immutable object of your app to maintain it’s state. This object is never directly modified, and instead Redux uses reducers and actions and creates a new object if a state changes.


import thunk from 'redux-thunk';

On the last day of the workshop week we combined Redux and React. Connecting them by splitting up our app into smart components (containers) and dumb components. Smart components care about how things work (data fetching, states, etc.) and dumb components (stateless functional components) care about how things look. The workshop ended with a round of Q&A’s on advanced redux topics and a final round of feedback.


Looking back on this intense week of React coding and learning I’m very happy to work on real- life React projects in our next scrum sprints and to put what I’ve learnt to the test.

Stay in the Loop

We will use the personal data you are sharing with us solely for the purpose of sending you our newsletter. See more here: Data Privacy.


Let us know how we can help you.