Master the World of ReactJS — Issue #14
Tags: react, javascript, redux, webpack
Published: 2018-07-23 12:34:22

---
title: Master the World of ReactJS — Issue #14
published: yes
description: Master the World of ReactJS. Each week Andrés Cidel serves the finest articles about the theories, trends, tools and topics.
tags: react, javascript, redux, webpack
---

Weekly · </em><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"><em class="markup--em markup--p-em">Andrés Cidel</em></a><em class="markup--em markup--p-em"> · July 22· </em><a href="https://www.getrevue.co/profile/Andres-at-Jexia/issues/master-the-world-of-reactjs-issue-14-123955" data-href="https://www.getrevue.co/profile/Andres-at-Jexia/issues/master-the-world-of-reactjs-issue-14-123955" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank"><em class="markup--em markup--p-em">Join for free</em></a><em class="markup--em markup--p-em"> or add </em><a href="http://fetchrss.com/rss/5b27d6348a93f858388b4567120524982.xml" data-href="http://fetchrss.com/rss/5b27d6348a93f858388b4567120524982.xml" class="markup--anchor markup--p-anchor" rel="nofollow noopener nofollow noopener" target="_blank"><em class="markup--em markup--p-em">the newsletter rss</em></a></p>

<img src="https://thepracticaldev.s3.amazonaws.com/i/a6xtg5w2o7q4prjy2ue0.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 nofollow noopener nofollow noopener nofollow noopener" target="_blank">Danilo Woznica</a></figcaption></figure>

<strong>Master the World of ReactJS. Each week Andrés Cidel serves the finest articles about the theories, trends, tools and topics.</strong>

<h3><p><a href="https://github.com/musghost\">Andrés</a> is full-stack developer at development platform <a href="https://www.jexia.com/">Jexia</a>. Are you an advanced React user? Stay ahead with Andrés’ <a href="https://www.getrevue.co/profile/Andres-from-Jexia">React Ninjas Newsletter</a>.</p></h3>
<hr>
<h2>Fundamentals</h2>
<p>
<strong style='display: block;'><a href="https://blog.usejournal.com/react-from-scratch-8acf7a1b00a4?gi=95e3e06bd621&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">React from scratch</a></strong>
<p>Building applications with JavaScript alone can work, but it quickly becomes unmanageable as your application grows. Let’s say you’re building a todo app.</p>
</p>
<strong style='display: block;'><a href="https://www.robinwieruch.de/javascript-fundamentals-react-requirements/">JavaScript fundamentals before learning React</a></strong>
<p>Often I find myself explaining more JS than React when teaching React in a workshop/online. That's why I have put all the important JS fundamentals (for React) in one extensive article</p>
</p>
<p>
<strong style='display: block;'><a href="https://codeburst.io/graphql-in-react-for-noobs-12ae866bec95?gi=c9df22efe338&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">GraphQL in React for noobs</a></strong>
<p>GraphQL is a syntax that describes how to ask for data. It was released by Facebook publicly in 2015 and since then many companies have adopted it.&nbsp;</p>
</p>
<strong style='display: block;'><a href="https://t.co/sKIT1F58LY>GraphQL in React for noobs</a></strong>
Often I find myself explaining more JS than React when teaching React in a workshop/online. That's why I have put all the important JS fundamentals (for React) in one extensive article
<p>
<strong style='display: block;'><a href="https://blog.bitsrc.io/using-redux-actions-why-and-how-fd5834f13e31?gi=4634cd7602ec&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">Using Redux-Actions - Why and How?</a></strong>
<p>Redux gives us a powerful way to manage the state of our application. But it also gives us a lot of code to take care of.&nbsp;</p>
</p>
<p>
<strong style='display: block;'><a href="https://medium.com/@sarahelson81/using-webpack-4-to-create-browser-compatible-apps-5fd292d7ab4f?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">Using Webpack 4 to create browser compatible apps</a></strong>
<p>Often criticised by the JavaScript community for being a ‘customisation hell’, Webpack has tried to try a new approach.&nbsp;<br></p>
</p>
<h2>Best-practices</h2>
<p>
<strong style='display: block;'><a href="https://itnext.io/matrix-code-animation-in-react-96daeee65d3e?gi=eca843dc0b6e&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">Matrix code animation in React</a></strong>
<p>I wanted to test the rendering speed of React and push it to see where the limit is.<br></p>
</p>
<p>
<strong style='display: block;'><a href="https://medium.com/@thehappybug/using-react-context-in-a-typescript-app-c4ef7504c858?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">Using React Context in a TypeScript App</a></strong>
<p>Recently I had the opportunity to use the new React 16 library which comes with features such as the Context API and Error Boundaries.</p>
<p>
<strong style='display: block;'><a href="https://medium.com/@amanhimself/week-2-with-react-native-building-a-weather-app-ca50fcfcb1e1?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">Building a weather app with React Native</a></strong>
<p>I worked on a small application that I built to fetch weather of a city using a third party API and display a set of data in the form of a card.<br></p>
</p>
<p>
<strong style='display: block;'><a href="https://hackernoon.com/how-to-build-an-online-realtime-bidding-auction-system-with-react-925cc5aa7937?gi=99d04fcca27b&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">Build an online realtime bidding/auction system with React</a></strong>
<p>In this tutorial, we’ll show you how to build an online realtime auction system in React using PubNub Realtime Messaging and React-Bootstrap.</p>
</p>
<p>
<strong style='display: block;'><a href="https://dev.to/pepesenaris/sending-emails-from-a-create-react-app-2gm6?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">Sending emails from a Create-React-App</a></strong>
<p>I’ve found several tutorials on the topic, but mostly outdated or incomplete, so wanted to share a walk through of our solution in case it benefits you as well.<br></p>
</p>
<h2>Tutorials</h2>
<p>
<strong style='display: block;'><a href="https://itnext.io/building-a-react-based-chat-client-with-redux-816b47cb8c74?gi=addebe5bc2ec&amp;utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">Building a React-based chat client with Redux</a></strong>
<p>Build an app as simply as possible using React and ReactDOM alone, and then refactor to use JSX and Redux.<br></p>
</p>
<p>
<strong style='display: block;'><a href="https://scotch.io/tutorials/testing-react-components-with-enzyme-and-jest?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">Testing React Components with Enzyme and Jest</a></strong>
<p>Enzyme is an open source JavaScript testing utility by Airbnb that makes it fun and easy to write tests for React.</p>
<p>
<strong style='display: block;'><a href="https://developer.okta.com/blog/2018/07/19/simple-crud-react-and-spring-boot?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">Use React and Spring Boot to build a simple CRUD app</a></strong>
<p>React is one of the most popular JavaScript frameworks, and Spring Boot is wildly popular in the Java ecosystem.</p>
</p>
<p>
<strong style='display: block;'><a href="https://www.zeolearn.com/magazine/creating-a-simple-search-and-google-react-map-in-a-reactjs-application?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">Creating Google-React-Maps in a ReactJs application</a></strong>
<p>  Learn how to create Google React maps in ReactJS apps used to build HTML. At the end of this tutorial, you will be able to build a React app on your own.</p>
</p>
<h2>Perspectives</h2>
<p>
<strong style='display: block;'><a href="https://jaxenter.com/javascript-still-relevant-146968.html?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS">Is JavaScript still relevant?</a></strong>
In this article, Shusetsu Toda of Lisk explains why JavaScript is alive and well and what role it has in blockchain's journey into the mainstream.
</p>
<h2>Videos</h2>
<p>
<strong style='display: block;'><a href="https://www.youtube.com/watch?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS&amp;v=PBoghEddyHU">ReactJS and Redux Tutorial Part 1:  Introduction</a></strong>
<p><br></p>
<p>
<strong style='display: block;'><a href="https://www.youtube.com/watch?utm_campaign=Revue%20newsletter&amp;utm_medium=Newsletter&amp;utm_source=Master%20the%20World%20of%20ReactJS&amp;v=0tc1hTHnTLo">Building a chat app with Socket.io and ReactJS</a></strong>
<br></br>
<br></br>
Weekly · </em><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"><em class="markup--em markup--p-em">Andrés Cidel</em></a><em class="markup--em markup--p-em"> · July 22· </em><a href="https://www.getrevue.co/profile/Andres-at-Jexia/issues/master-the-world-of-reactjs-issue-14-123955" data-href="https://www.getrevue.co/profile/Andres-at-Jexia/issues/master-the-world-of-reactjs-issue-14-123955" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank"><em class="markup--em markup--p-em">Join for free</em></a><em class="markup--em markup--p-em"> or add </em><a href="http://fetchrss.com/rss/5b27d6348a93f858388b4567120524982.xml" data-href="http://fetchrss.com/rss/5b27d6348a93f858388b4567120524982.xml" class="markup--anchor markup--p-anchor" rel="nofollow noopener nofollow noopener" target="_blank"><em class="markup--em markup--p-em">the newsletter rss</em></a></p>