We all gathered for this month’s React meetup in the new Facebook office at Rathbone Square. The amount of beer, pizza and interesting topics was tremendous.Robbie McCorkell (@robbiemccorkell) was MC’ing, and he took the opportunity to call for volunteers for a new project with London Pride. They are developing a new platform in collaboration with Red Badger and are looking for anyone interested to help in the project. Please send an email to firstname.lastname@example.org if you want to be involved.
React: The Bad Parts
He mentioned a feature of the React API called Context, which allows passing data through the component tree without props. Unfortunately, it is seen as an experimental API and may be removed in the next versions of React. He presented an alternative with the use of publication/subscription pattern.
He finished by talking about Higher Order Components (HOCs), which are functions that take a component and return a new component, allowing you to share and reuse code.
Slides can be found here: https://marcelcutts.github.io/react-the-bad-parts
SSR with Next.js and React
He first shared his enthusiasm for Next.js, with a live demo demonstrating how routing and bootstrapping a React project are simplified when using the Next.js library.
He then took the opportunity to talk about SSR and its advantages, in particular how it is perceived by users. The loading of the page appears to be more instantaneous. However it may involve more work on the server side.
Finally, he shared how SSR may be costly in terms of CPU power but this can be mitigated by caching already rendered pages.
You can find the slides here.
Analytics in a React / Redux SPA
He started by reminding us about analytics and how they can help you better understand your users’ behavior and allow you to make the right decisions regarding UX. He went into more technical detail with Google Tag Manager (GTM) and the different ways you can track events and navigation. For example, by default, SPAs do not track events properly as the data layer is not reset when pages are changed leading to some extra work being needed. He presented the different ways of adding analytics to an SPA, going from the simple custom data attribute to using Redux actions and a middleware to trigger the events tracking. He shared a demo of the latter, using an analytics middleware in charge of watching the action to be tracked and pushing data to the GTM data layer. He concluded by saying that even if analytics is not always the most popular subject, it is important to be conscious of at the beginning of a project in order to keep the coupling with the event tracker to a minimum.
You can get more information on his repo: https://github.com/mhipszki/react-redux-analytics
Thanks to all our speakers, Facebook for hosting us and everyone who came along on the night. If you’d like to find out about future React London meetups head over to meetup.react.london and if you're interested to be a speaker yourself, please submit your proposal here.
See you next month.