React Academy Recap

We couldn’t keep our success and excitement with our React projects to ourselves any longer so we decided to organize a 5-day React training workshop in Zurich from 23-27 January to help grow the local React community.

react-coding-mac-book

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.

Monday

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:

es5-vs-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.

Tuesday

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.

Wednesday

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.

react-workshop

Thursday

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.

Friday

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.


react-workshop

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.

January 30, 2017
Where
Zürich
0 Comments

Get our Newsletter






Comments

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
icon
What is Amazee Labs?