Interested in building applications that scale well, are bug free and easy to maintain?This is a course for you. I will show you how to write reusable React and Redux code.React is the library&nbsp;that modern Javascript developers need to know.&nbsp;Truly knowing how to write reusable React JS views and Redux reducers&nbsp;will get you a job, and enable you to build quality frontend&nbsp;applications.Important: This course is concise and focuses on the ability to write decoupled React.js &amp; Redux code.&nbsp;All videos are professionally edited for your convenience.

React and Redux Masterclass

Splitting into separate files

Smoke test and sanity test

Making Display stateless

Refactoring Operators & Control Panel

Refactoring History to presentational component

Application Introduction

Digit container and digit presentational component

History view refactor

Test coverage reports

Decoupling history from store

Refactoring to function syntax - Button & Digits components

I somehow missed this, but if you follow along,&nbsp;please also&nbsp;make a change to src/index.js file as well! The required change you will find in:<a href="https://github.com/Ajdija/Learning-React-Redux-decoupling-with-stateless-components/commit/ee88b3039b812d28b437ef97989dc5664afd9d06#diff-1fdf421c05c1140f6d71444ea2b27638R6">https://github.com/Ajdija/Learning-React-Redux-decoupling-with-stateless-components/commit/ee88b3039b812d28b437ef97989dc5664afd9d06#diff-1fdf421c05c1140f6d71444ea2b27638R6</a> &nbsp;Thank you for getting that far and sorry for inconvenience :-) PS: In case of any questions please let me know under Q&amp;A&nbsp;tab of the course :)

Important change to src/index.js

Deep dive into source code to refactor

Container Higher Order Components (HOC) to access dispatch

Project Setup

Adding redux actions and  action handlers

Delegate passing store to React Redux provider

Dealing with stateful component - Display

Enzyme public tests

As many of you requested in discussions on the Udemy boards - this is the source code of the application we will refactor, it is mobile-friendly and will be far easier to read instead of the GitHub repo. You should get familiar with it on your own. During the lecture 1.4 I go through most of the Calculator.js contents but besides that, all of the other files you can find here.src/Calculator.js<pre><code class="language-javascript">import React, { Component } from 'react';
import './Calculator.css';
import EventEmitter from 'wolfy87-eventemitter';
class Calculator extends Component {
 render() {
 return (
 &lt;main className="react-calculator"&gt;
 &lt;Display /&gt;
 &lt;ControlPanel /&gt;
 &lt;Digits /&gt;
 &lt;Operators /&gt;
 &lt;History /&gt;
 &lt;/main&gt;
 )
 }
}
const ee = new EventEmitter();
let store = {
 displayedExpression: 0,
 get curExpression() {
 return this.displayedExpression;
 },
 set newExpression(curExpression) {
 this.displayedExpression = curExpression;
 ee.emitEvent('displayUpdate', [this.curExpression]);
 ee.emitEvent('historyUpdate', [this.curExpression]);
 }
};
class Display extends Component {
 constructor(props) {
 super(props);
 this.state = { text: this.props.text || '0' };
 this.updateDisplay = this.updateDisplay.bind(this);
 this.onClickHandler = this.onClickHandler.bind(this);
 }
 updateDisplay(newStr) {
 return this.setState({ text: newStr.toString().split(' ').reverse().join(' ') });
 }
 componentWillMount() {
 ee.addListener('displayUpdate', this.updateDisplay);
 }
 onClickHandler() {
 if (this.props.clickHandler) {
 this.props.clickHandler.call(this);
 }
 }
 render() {
 return &lt;div className="display" onClick={this.onClickHandler}&gt;{this.state.text}&lt;/div&gt;
 }
}
class ControlPanel extends Component {
 showHistory() {
 ee.emitEvent('toggle-history');
 }
 clearDisplay() {
 store.newExpression = 0;
 }
 removeOneChar() {
 const curExpression = String(store.curExpression);
 const newExpWithRemovedChar = curExpression.toString().trim().substring(0, (curExpression.length - 1));
 return store.newExpression = newExpWithRemovedChar === '' ? 0 : newExpWithRemovedChar;
 }
 render() {
 return (
 &lt;section className="buttons--controls"&gt;
 &lt;Button buttonClass="control" text="←" clickHandler={this.removeOneChar}/&gt;
 &lt;Button buttonClass="control" text="c" clickHandler={this.clearDisplay}/&gt;
 &lt;Button buttonClass="control" text="history" clickHandler={this.showHistory}/&gt;
 &lt;/section&gt;
 )
 }
}
class Operators extends Component {
 opHandler(type) {
 store.newExpression = `${store.curExpression} ${type} `;
 }
 calculateExpression() {
 /* eslint-disable */
 // This rule is important in production apps!
 // To simplify the functionality in this course we use eval
 const calcFunc = eval;
 /* eslint-enable */
 try {
 store.newExpression = calcFunc(store.curExpression);
 } catch (e) {
 console.error("Error: Incorrect Expression of digits &amp; operators :(")
 }
 }
 render() {
 return (
 &lt;section className="buttons--operators"&gt;
 {["+", "-", "*", "/"]
 .map((op, i) =&gt; (
 &lt;Button key={i} text={op} clickHandler={this.opHandler}/&gt;)
 )}
 &lt;Button text="=" clickHandler={this.calculateExpression}/&gt;
 &lt;/section&gt;
 )
 }
}
class Digits extends Component {
 digitClickHandler(num) {
 if (!store.curExpression) {
 return store.newExpression = num;
 }
 return store.newExpression = `${store.curExpression}${num}`;
 }
 render() {
 return &lt;section className="buttons--digits"&gt;
 {[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
 .map(nr =&gt; &lt;Button key={nr} text={nr} clickHandler={this.digitClickHandler}/&gt;)}
 &lt;/section&gt;
 }
}
class History extends Component {
 constructor(props) {
 super(props);
 this.state = { show: false, history: [] };
 this.toggleHistory = this.toggleHistory.bind(this);
 this.addHistoryItem = this.addHistoryItem.bind(this);
 this.getHistoryItems = this.getHistoryItems.bind(this);
 }
 componentWillMount() {
 ee.addListener('historyUpdate', this.addHistoryItem);
 ee.addListener('toggle-history', this.toggleHistory);
 }
 addHistoryItem(historyItem) {
 const trimmedItem = historyItem.toString().trim();
 if (this.getHistoryItems().filter(i =&gt; i === trimmedItem).length === 0) {
 this.setState({
 ...this.state,
 history: [
 ...this.state.history,
 trimmedItem
 ]
 });
 }
 }
 getHistoryItems() {
 return this.state.history.filter(h =&gt; !!h);
 }
 toggleHistory() {
 this.setState({ ...this.state, show: !this.state.show });
 }
 historyItemClickHandler(history) {
 store.newExpression = history;
 ee.emitEvent('toggle-history');
 }
 render() {
 return (
 &lt;section className={`history ${this.state.show ? 'visible' : ''}`}&gt;
 &lt;Button text="+" clickHandler={this.toggleHistory} buttonClass="toggle-close"/&gt;
 {this.getHistoryItems().map((mem, i) =&gt; (
 &lt;Button key={i} buttonClass="block transparent"
 text={mem} clickHandler={this.historyItemClickHandler}/&gt;
 ))}
 &lt;/section&gt;
 )
 }
}
class Button extends Component {
 constructor(props) {
 super(props);
 this.onClickHandler = this.onClickHandler.bind(this);
 }
 onClickHandler() {
 if (this.props.clickHandler) {
 this.props.clickHandler.call(null, this.props.text);
 }
 }
 render() {
 return (
 &lt;button className={this.props.buttonClass} onClick={this.onClickHandler}&gt;
 &lt;span className="title"&gt;{this.props.text}&lt;/span&gt;
 &lt;/button&gt;
 );
 }
}
export default Calculator;</code></pre>src/Calculator.css<pre><code class="language-css">.react-calculator {
 position: relative;
 margin: 0 auto;
 width: 440px;
 box-shadow: 0 15px 45px rgba(19, 19, 19, .24), 0 15px 45px rgba(19, 19, 19, .12);
}
button {
 outline: none;
 border: 0;
 padding: 1rem;
 background-color: #292f36;
 font-size: 1.5rem;
 line-height: 1;
 color: #FFFDF7;
 -webkit-transition: all 300ms cubic-bezier(1, 1, 1, 1);
 transition: all 300ms cubic-bezier(1, 1, 1, 1);
}
button:hover {
 color: #FFE66D;
}
button .block {
 width: 100%;
}
button .transparent {
 background-color: transparent;
}
button .no-padding {
 padding: 0;
}
button .control {
 font-size: 1rem;
}
-webkit-scrollbar, .display::-webkit-scrollbar, .history::-webkit-scrollbar {
 width: .5rem;
}
-webkit-scrollbar:horizontal,
.display::-webkit-scrollbar:horizontal,
.history::-webkit-scrollbar:horizontal {
 height: .5rem;
}
-webkit-scrollbar-track,
-webkit-scrollbar:horizontal,
.display::-webkit-scrollbar-track,
.display::-webkit-scrollbar:horizontal,
.history::-webkit-scrollbar-track,
.history::-webkit-scrollbar:horizontal {
 background-color: #131313;
}
-webkit-scrollbar-thumb,
-webkit-scrollbar:horizontal,
.display::-webkit-scrollbar-thumb,
.display::-webkit-scrollbar:horizontal,
.history::-webkit-scrollbar-thumb,
.history::-webkit-scrollbar:horizontal {
 background-color: #FFE66D;
}
hover::-webkit-scrollbar-thumb,
hover::-webkit-scrollbar:horizontal,
.display:hover::-webkit-scrollbar-thumb,
.display:hover::-webkit-scrollbar:horizontal,
.history:hover::-webkit-scrollbar-thumb,
.history:hover::-webkit-scrollbar:horizontal {
 background-color: #FFE66D;
}
.display {
 /*Positioning*/
 position: relative;
 width: 440px;
 height: 120px;
 z-index: 10;
 /*Formatting*/
 outline: none;
 box-shadow: 0 4px 2px -2px rgba(19, 19, 19, .64);
 padding: .5rem;
 overflow-y: hidden;
 overflow-x: scroll;
 font-size: 3rem;
 line-height: 2;
 text-align: right;
 direction: rtl;
 white-space: nowrap;
 /*Colors*/
 background-color: rgba(19, 19, 19, .64);
 color: #FFE66D;
}
.history {
 /*Positioning*/
 position: absolute;
 top: 120px;
 left: 0;
 z-index: 10;
 /*Formatting*/
 width: 100%;
 height: 0;
 overflow: hidden;
 padding: 0;
 /*Colors*/
 background-color: rgba(19, 19, 19, .64);
 color: #00a3f5;
 /*Animation*/
 -webkit-transition: height 150ms cubic-bezier(1, 1, 1, 1),
 overflow 1ms cubic-bezier(1, 1, 1, 1) 200ms,
 padding 1ms cubic-bezier(1, 1, 1, 1) 200ms;
 transition: height 150ms cubic-bezier(1, 1, 1, 1),
 overflow 1ms cubic-bezier(1, 1, 1, 1) 200ms,
 padding 1ms cubic-bezier(1, 1, 1, 1) 200ms;
}
.history .toggle-close {
 position: absolute;
 top: 5px;
 right: 5px;
 padding: 2px 5px;
}
.history .toggle-close .title {
 display: inline-block;
 /*Rotation - plus sign*/
 -webkit-transform: rotate(135deg);
 transform: rotate(135deg);
}
.history.visible {
 /*Formatting*/
 height: calc(100% - 120px);
 padding: 10px;
 /*Overflow*/
 overflow-y: auto;
 /*Animation*/
 -webkit-transition: height 200ms cubic-bezier(1, 1, 1, 1), padding 1ms cubic-bezier(1, 1, 1, 1);
 transition: height 200ms cubic-bezier(1, 1, 1, 1), padding 1ms cubic-bezier(1, 1, 1, 1);
}
.buttons--controls,
.buttons--operators {
 background-color: #292f36;
}
.buttons--controls button, .buttons--operators button {
 /*Formatting*/
 display: inline-block;
 width: 110px;
 height: 110px;
 vertical-align: top;
 /*Color*/
 color: #FFE66D;
 /*Uppercase transform*/
 text-transform: uppercase;
 -webkit-font-feature-settings: "c2sc", "c2sc", "c2sc";
 -moz-font-feature-settings: "c2sc", "c2sc", "c2sc";
 font-feature-settings: "c2sc", "c2sc", "c2sc";
 font-variant: small-caps;
}
.buttons--controls button:hover, .buttons--operators button:hover {
 color: #c41c4f;
}
.buttons--digits {
 /*Formatting*/
 width: 330px;
 float: left;
 /*Color*/
 background-color: #292f36;
}
.buttons--digits button {
 /*Formatting*/
 display: block;
 position: relative;
 width: 110px;
 height: 110px;
 float: left;
 /*Color*/
 background-color: #292f36;
 /*Transforms*/
 -webkit-transition: box-shadow 300ms cubic-bezier(1, 1, 1, 1);
 transition: box-shadow 300ms cubic-bezier(1, 1, 1, 1);
}
.buttons--digits button:last-child {
 width: 100%;
}
.buttons--controls {
 clear: left;
 float: left;
 width: 330px;
 height: 110px;
}</code></pre>package.json<pre><code class="language-javascript">{
 "name": "decouple-react-redux",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "react": "^15.6.1",
 "react-dom": "^15.6.1",
 "react-scripts": "1.0.11",
 "wolfy87-eventemitter": "^5.2.2"
 },
 "scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test --env=jsdom",
 "eject": "react-scripts eject"
 }
}</code></pre>src/index.js<pre><code class="language-javascript">import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Calculator from './Calculator';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(&lt;calculator&gt;&lt;/calculator&gt;, document.getElementById('root'));
registerServiceWorker();</code></pre>src/index.css<pre><code class="language-css">*,
*:before,
*:after {
 box-sizing: border-box;
}
html,
body {
 position: relative;
 /*Formatting*/
 padding-top: 20px;
 font-size: 16px;
 width: 100%;
 height: 100%;
 /*Font*/
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 /*Select clear*/
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}</code></pre>src/registerServiceWorker.js<pre><code class="language-javascript">// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// This link also includes instructions on opting out of this behavior.
const isLocalhost = Boolean(
 window.location.hostname === 'localhost' ||
 // [::1] is the IPv6 localhost address.
 window.location.hostname === '[::1]' ||
 // 127.0.0.1/8 is considered localhost for IPv4.
 window.location.hostname.match(
 /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 )
);
export default function register() {
 if (process.env.NODE_ENV === 'production' &amp;&amp; 'serviceWorker' in navigator) {
 // The URL constructor is available in all browsers that support SW.
 const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 if (publicUrl.origin !== window.location.origin) {
 // Our service worker won't work if PUBLIC_URL is on a different origin
 // from what our page is served on. This might happen if a CDN is used to
 return;
 }
 window.addEventListener('load', () =&gt; {
 const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 if (!isLocalhost) {
 // Is not local host. Just register service worker
 registerValidSW(swUrl);
 } else {
 // This is running on localhost. Lets check if a service worker still exists or not.
 checkValidServiceWorker(swUrl);
 }
 });
 }
}
function registerValidSW(swUrl) {
 navigator.serviceWorker
 .register(swUrl)
 .then(registration =&gt; {
 registration.onupdatefound = () =&gt; {
 const installingWorker = registration.installing;
 installingWorker.onstatechange = () =&gt; {
 if (installingWorker.state === 'installed') {
 if (navigator.serviceWorker.controller) {
 // At this point, the old content will have been purged and
 // the fresh content will have been added to the cache.
 // It's the perfect time to display a "New content is
 // available; please refresh." message in your web app.
 console.log('New content is available; please refresh.');
 } else {
 // At this point, everything has been precached.
 // It's the perfect time to display a
 // "Content is cached for offline use." message.
 console.log('Content is cached for offline use.');
 }
 }
 };
 };
 })
 .catch(error =&gt; {
 console.error('Error during service worker registration:', error);
 });
}
function checkValidServiceWorker(swUrl) {
 // Check if the service worker can be found. If it can't reload the page.
 fetch(swUrl)
 .then(response =&gt; {
 // Ensure service worker exists, and that we really are getting a JS file.
 if (
 response.status === 404 ||
 response.headers.get('content-type').indexOf('javascript') === -1
 ) {
 // No service worker found. Probably a different app. Reload the page.
 navigator.serviceWorker.ready.then(registration =&gt; {
 registration.unregister().then(() =&gt; {
 window.location.reload();
 });
 });
 } else {
 // Service worker found. Proceed as normal.
 registerValidSW(swUrl);
 }
 })
 .catch(() =&gt; {
 console.log(
 'No internet connection found. App is running in offline mode.'
 );
 });
}
export function unregister() {
 if ('serviceWorker' in navigator) {
 navigator.serviceWorker.ready.then(registration =&gt; {
 registration.unregister();
 });
 }
}</code></pre>.gitignore<pre><code class="language-plaintext"># IDE
.idea
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
*.swp
*~
Thumbs.db
.project
.nvm-version
/tags
/atom-shell/
/out/
docs/output
docs/includes
out/
/electron/
debug.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*</code></pre>public/index.html<pre><code class="language-html">&lt;!doctype html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
 &lt;meta name="theme-color" content="#000000"&gt;
 &lt;link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"&gt;
 &lt;!--
 Notice the use of %PUBLIC_URL% in the tags above.
 It will be replaced with the URL of the `public` folder during the build.
 Only files inside the `public` folder can be referenced from the HTML.
 Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
 work correctly both with client-side routing and a non-root public URL.
 Learn how to configure a non-root public URL by running `npm run build`.
 --&gt;
 &lt;title&gt;React App&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;noscript&gt;
 You need to enable JavaScript to run this app.
 &lt;/noscript&gt;
 &lt;div id="root"&gt;&lt;/div&gt;
 &lt;!--
 This HTML file is a template.
 If you open it directly in the browser, you will see an empty page.
 You can add webfonts, meta tags, or analytics to this file.
 The build step will place the bundled scripts into the &lt;body&gt; tag.
 To begin the development, run `npm start` or `yarn start`.
 To create a production bundle, use `npm run build` or `yarn build`.
 --&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>

React and Redux Masterclass

This course includes

Reviews (0)

This course includes

Instructor

Mateusz Grzesiukiewicz

React and Redux Masterclass

This course includes

Introduction

Refactoring ES6 classes to React stateless components

Decoupling React view from Redux store

Refactoring to reusable Presentational Components using React Redux library

Testing decoupled application

Source code lectures

Reviews (0)

This course includes

Instructor

Mateusz Grzesiukiewicz