React Ninjas Newsletter — Issue #12
Tags: react, redux, javascript, frontend
Published: 2018-07-12 20:36:50

---
title: React Ninjas Newsletter — Issue #12
published: yes
description: 
tags: react, redux, javascript, frontend
---

By <a href="https://medium.com/@andres_49956" data-href="https://medium.com/@andres_49956" data-anchor-type="2" data-user-id="8e5cac1aeeb3" data-action-value="8e5cac1aeeb3" data-action="show-user-card" data-action-type="hover" class="markup--user markup--p-user" target="_blank">Andrés Cidel</a> · Issue #12 · <a href="https://www.getrevue.co/profile/Andres-from-Jexia/issues/react-ninjas-newsletter-issue-12-121460?utm_campaign=Issue&amp;utm_content=view_in_browser&amp;utm_medium=email&amp;utm_source=React+Ninjas+Newsletter" data-href="https://www.getrevue.co/profile/Andres-from-Jexia/issues/react-ninjas-newsletter-issue-12-121460?utm_campaign=Issue&amp;utm_content=view_in_browser&amp;utm_medium=email&amp;utm_source=React+Ninjas+Newsletter" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Join this weekly newsletter</a></p><figure name="58ee" id="58ee" class="graf graf--figure graf-after--p">

<img src="https://thepracticaldev.s3.amazonaws.com/i/t6kxnuqqtpl0hv8bh1dk.jpg"></img><figcaption class="imageCaption">Image by <a href="https://www.linkedin.com/in/danilowoz/" data-href="https://www.linkedin.com/in/danilowoz/" class="markup--anchor markup--figure-anchor" rel="nofollow noopener nofollow noopener nofollow noopener" target="_blank">Danilo Woznica</a></figcaption></figure><p name="f0f5" id="f0f5" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">

<strong>Stay up-to-date and ahead of your peers with Andrés Cidel’s newsletter for React Ninjas. <a href="https://github.com/musghost">Andrés</a> currently uses React to build developer platform <a href="https://www.jexia.com/">Jexia</a>. Just learning React? Join his newsletter ’<a href="https://www.getrevue.co/profile/Andres-at-Jexia\">Master the World of ReactJS</a>’.</p></strong>
<hr>
<h2>Fundamentals</h2>
<p>
<strong style='display: block;'><a href="https://blog.logrocket.com/5-common-practices-that-you-can-stop-doing-in-react-9e866df5d269?gi=77946135ee4b&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">5 common practices that you can stop doing in React</a></strong>
Sometimes best practices can compromise performance, readability, and make things unproductive in the long run.
</p>
<h2>Tutorials</h2>
<p>
<strong style='display: block;'><a href="https://medium.com/javascript-inside/transforming-elements-in-react-8e411c0f1bba?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">Transforming elements in React</a></strong>
<p>Transforming elements is interesting if you’re a library author, but is also valuable when writing components to abstract behaviour in your existing code base.</p>
</p>
<p>
<strong style='display: block;'><a href="https://stephenmann.io/post/designing-reusable-react-components/?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">Designing Reusable React components</a></strong>
<p>If you’ve worked on any large React project, you’ve probably run into a component or two that gave you quite a headache when you tried to reuse it.</p>
</p>
<p>
<strong style='display: block;'><a href="https://codeburst.io/build-a-live-paint-application-with-react-ed534b403706?gi=7b199472e53e&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">Build a live paint application with React</a></strong>
<p>A realtime application is a program that functions within a time frame that the user senses as immediate or current.</p>
</p>
<p>
<strong style='display: block;'><a href="https://hackernoon.com/upgrade-your-react-ui-with-state-machines-30d1298e90be?gi=a8f3b883845&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">Upgrade your React UI with state machines</a></strong>
<p>This article is about React-Machinery, a library for creating and using state machines in react to control UI.</p>
</p>
<p>
<strong style='display: block;'><a href="https://hackernoon.com/writing-better-reduxs-code-with-typescript-b7a3c1209bca?gi=2d8e6f90ecd1&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">Writing better Redux’s code with TypeScript</a></strong>
<p>TypeScript typings power, when used properly, could help us write better code.</p>
</p>
<p>
<strong style='display: block;'><a href="https://medium.com/@elisegev/running-tests-and-creating-code-coverage-reports-for-react-nodejs-project-continuously-with-60312b6a2dd0?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">Running tests and creating code coverage for React/NodeJS</a></strong>
<p>The foundation for a healthy project is a high standard of automated tests.</p>
</p>
<p>
<strong style='display: block;'><a href="https://blog.expo.io/so-you-want-to-build-a-chat-app-with-react-native-expo-and-microsofts-bot-framework-4d2327f76ce3?gi=f590f3618ce9&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">Chat app with React Native, Expo and Microsoft’s bot framework</a></strong>
<p>It seems like everyone and their dog wants to build a chat app or incorporate chat into their app, but for most it ends up being a big undertaking.</p>
</p>
<h2>Best-practices</h2>
<p>
<strong style='display: block;'><a href="https://hackernoon.com/virtual-reality-with-react-360-ce24b611f0f5?gi=f7425fce2aca&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">Virtual reality with React 360</a></strong>
<p>As a software developer, I spend my time building websites and web apps, but for a long time, I’ve also had a side interest in virtual reality.</p>
</p>
<p>
<strong style='display: block;'><a href="https://medium.com/@luciano.hg4/improving-react-runtime-performance-dec0a5a4ffda?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">Improving React runtime performance</a></strong>
<p>At QuintoAndar we've been working hard on building our Single Page Application, Progressive Web App as a way to improve the experience of our users.</p>
</p>
<p>
<strong style='display: block;'><a href="https://medium.com/react-native-training/improving-communication-between-react-native-webviews-and-the-webpages-they-render-792c8f7db3e5?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">Better synergy React Native webviews and their webpages</a></strong>
<p>Simplify your code by making your webview and React Native components run each other's functions.<br></p>
</p>
<p>
<strong style='display: block;'><a href="https://engineering.udacity.com/react-native-a-retrospective-from-the-mobile-engineering-team-at-udacity-89975d6a8102?gi=b93ae7d45aef&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">React Native: retrospective from the mobile team at Udacity</a></strong>
<p>The mobile team at Udacity recently removed the last features in our apps written with React Native. In this post, we share what worked, and what didn't.</p>
</p>
<p>
<strong style='display: block;'><a href="https://medium.com/weedmaps-engineering/how-we-migrated-weedmaps-to-react-and-cut-our-load-times-in-half-a7f50816f6dc?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">How we migrated Weedmaps to React and cut load times in half</a></strong>
<p>Weedmaps was a monolithic server rendered Rails app that was not mobile friendly. To address mobile demand, we introduced a full split of the application.</p>
</p>
<h2>Tools</h2>
<p>
<strong style='display: block;'><a href="https://blog.g2i.co/react-native-gesture-handling-with-reasonml-7307151f73f?gi=caa064324082&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">React Native gesture handling with ReasonML</a></strong>
<p>In this post, I’m going to go over leveraging ReasonML’s powerful variant types to create a React wrapper to handle React Native gestures.</p>
</p>
<p>
<strong style='display: block;'><a href="https://blog.hichroma.com/chromatic-1-0-continuous-ui-testing-for-react-2ad10fd01cfe?gi=1cd2b02e3c7&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">Chromatic 1.0 — continuous UI testing for React</a></strong>
<p>Chromatic monitors the look of React UI components from commit-to-commit and notifies you of visual changes automatically. You save time by automating…</p>
</p>
<p>
<strong style='display: block;'><a href="https://medium.com/@swizec/a-lesson-about-react-d3-and-animation-performance-a97552325f78?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">A lesson about React, D3 and animation performance</a></strong>
<p>You can totally use JavaScript to build performant 60 fps animation. Even with thousands of elements all moving on every frame of your animation.</p>
</p>
<h2>Videos</h2>
<p>
<strong style='display: block;'><a href="https://medium.com/graphql-europe/watch-all-talks-from-graphql-europe-2018-4a47ee28570a?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=React%20Ninjas%20Newsletter">Watch all talks from GraphQL Europe 2018</a></strong>
<p>The conference has left everyone energized and inspired thanks to insightful talks and fruitful discussions all around GraphQL.</p>

By <a href="https://medium.com/@andres_49956" data-href="https://medium.com/@andres_49956" data-anchor-type="2" data-user-id="8e5cac1aeeb3" data-action-value="8e5cac1aeeb3" data-action="show-user-card" data-action-type="hover" class="markup--user markup--p-user" target="_blank">Andrés Cidel</a> · Issue #12 · <a href="https://www.getrevue.co/profile/Andres-from-Jexia/issues/react-ninjas-newsletter-issue-12-121460?utm_campaign=Issue&amp;utm_content=view_in_browser&amp;utm_medium=email&amp;utm_source=React+Ninjas+Newsletter" data-href="https://www.getrevue.co/profile/Andres-from-Jexia/issues/react-ninjas-newsletter-issue-12-121460?utm_campaign=Issue&amp;utm_content=view_in_browser&amp;utm_medium=email&amp;utm_source=React+Ninjas+Newsletter" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Join this weekly newsletter</a></p>