Your Choice JavaScript News

Google maps, Google maps api, React test renderer & more… React News Saturday, February 24

React News TLDR / Table of Contents

  • Simplified Google Maps JavaScript API in a React App 🌎
    • In a previous post I wrote in Frontend Weekly, I explained how to put a pretty awesome Google Map in your React app but not everyone needs all the bells and whistles. This post is how to add a simple…
    • Google Maps, Google Maps API, React app, awesome Google Map, simple Google Map
  • Mocking Moment.js in Jest — A Simple, One-Line Solution
    • Mocking a component’s call to Moment.js seems like a great candidate for our first unit test in Jest. However, it‘s not as straightforward as you might think. You could use a manual mock placed in a…
    • React Test Renderer, import React, shallow rendering React, import moment, import renderer
  • M-Izadmehr/react-slider-kit
    • react-slider-kit is going to be a comprehensive solution to slider feature in react.
    • Range Slider Component, dribble concept design, SingleSlider min, export default class, tooltip label
  • 10 Tips for Better Redux Architecture – JavaScript Scene –
    • When I started using React, there was no Redux. There was only the Flux architecture, and about a dozen competing implementations of it. Now there are two clear winners for data management in React…
    • state, Redux, state management, action,
  • Debugging React Like a Champ with VSCode –
    • Gone are the days where I spend my time bouncing back and forth between the terminal, browser and editor. Ain’t nobody got time for that! In this guide I will show you how to supercharge your React…
    • VSCode, chrome, debugger protocol, Chrome’s debugger, Visual Studio Code
  • This post is how to add a simple Google Map to your React app, just a map and some markers.
  • We will, unfortunately, have to do a bit of configuration here because the Google Maps API does not mesh well with Reactwe are going to be using another package google-maps-react which integrates React and Google Maps beautifully.
  • Open your package.jsonand overwrite it with the following code: – { – name: react-google-map, // your project name – version: 0.1.0, – private: true, – dependencies: { – google-maps-react: ^1.1.0, // adds the google-maps-react – react: ^15.6.1, // sets React to v15 for map compatability – react-dom: ^15.6.1, // also…
  • Parent (App) ComponentHere is the structure of my App.js parent component: – What is happening in this component here is basically were exporting App wrapped inside the GoogleApiWrapper, allowing it access to all of the functionality of the Google Maps API.
  • new google.maps.Marker is coming from the google-maps-react package which allows us to connect to the Google Maps API which has a Marker object.

Tags: Google Maps, Google Maps API, React app, awesome Google Map, simple Google Map

  • Mocking Moment.js in JestA Simple, One-LineSolutionFirst Unit Test – Mocking a components call to Moment.js seems like a great candidate for our first unit test in Jest.
  • import React from ‘react’; – import moment from ‘moment’;const Clock = () = { – return default Clock;Snapshot Test Case with Mock – We use React Test Renderer to compare the component to the previous snapshot.
  • format() is called – jest.mock(‘moment’, () = () = ({format: () = snapshot’, () = { – const tree = renderer.create(Clock /).
  • toJSON(); – Test Case using Shallow Renderer – There are a lot of options available for shallow rendering React components, but the React Test Renderers shallow renderer works just fine and doesnt require additional config or dependencies.
  • format() is called – jest.mock(‘moment’, () = () = ({format: () = snapshot’, () = { – const renderer = new ShallowRenderer(); – const component = renderer.render(Clock /);

Tags: React Test Renderer, import React, shallow rendering React, import moment, import renderer

  • react-slider-kit is going to be a comprehensive solution to slider feature in react.
  • This component was originally inspired by dribble concept design The Range Slider Component.
  • This slider components is going to include: – – The working demo of this component can be find at An image of the original dribble design is shown below: – – Using (use to include it in your package.json) – – Using (this command also adds react-rangeslider to your package.json…
  • In order to use a slider with a module bundler like webpack that supports either CommonJS or ES2015 modules, use as you would anything else: – – React-Slider-Kit is bundled as a combination of multiple components, and by default the single slider is imported.

Tags: Range Slider Component, dribble concept design, SingleSlider min, export default class, tooltip label

  • That said, there are some important features of Redux that MobX doesnt give you, and its important to understand what those features are before you decide whats right for your project.Side side note: Relay and Falcor are other interesting solutions for state management, but unlike Redux and MobX, they must…
  • The main purpose of Redux is to isolate state management from I/O side effects such as rendering the view or working with the network.
  • Additional event listeners dispatch action objects, just like the view: – Importantly, state updates in Flux are transactional.
  • If: – User workflows are simpleUsers dont collaborateYou dont need to manage server side events (SSE) or websocketsYou fetch data from a single data source per viewIt may be that sequence of events in the app is probably sufficiently simple that the benefits of transactional state are not worth the…
  • If: – User workflows are complexYour app has a large variety of user workflows (consider both regular users and administrators)Users can collaborateYoure using web sockets or SSEYoure loading data from multiple endpoints to build a single viewYou could benefit enough from a transactional state model to make it worth the…

Tags: state, Redux, state management, action,

  • Debugging React Like a Champ withVSCodeVSCode debugging tools and Facebooks JestGone are the days where I spend my time bouncing back and forth between the terminal, browser and editor.
  • You will learn how to hook up VSCode and Chrome so you can debug browser code directly from VSCode – Setup the TestProjectBefore we begin with the tutorial we need to create a test application that well use later in the article.
  • VSCode connects to Chrome through Chromes debugger protocol.
  • Instead of using Chromes developer tools you can use VSCode to debug browser code.
  • Start TheDebuggerYou can start the debugger by doing one of the following: – Press F5Press the green play button in the debug paneFrom the menu Debug Start DebuggerIf the debugger starts successfully you will see a small toolbar appear at the top of VSCode similar to the image below -…

Tags: VSCode, chrome, debugger protocol, Chrome’s debugger, Visual Studio Code

Top React Courses

Modern React with Redux (86,762 students enrolled)

By Stephen Grider
  • Build amazing single page applications with React JS and Redux
  • Master fundamental concepts behind structuring Redux applications
  • Realize the power of building composable components
  • Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well
  • Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax

Learn more.


The Complete React Native and Redux Course (53,888 students enrolled)

By Stephen Grider
  • Create real-world native apps using React Native
  • Make truly reusable components that look great
  • Understand the terminology and concepts of Redux
  • Prototype and deploy your own applications to the Apple and Google Play Stores
  • Get up to speed with React design principles and methodologies
  • Discover mobile design patterns used by experienced engineers

Learn more.


Advanced React and Redux (35,016 students enrolled)

By Stephen Grider
  • Build a scaleable API with authentication using Express, Mongo, and Passport
  • Learn the differences between cookie-based and token-based authentication
  • Figure out what a Higher Order Component and how to use it to write dramatically less code
  • Write Redux middleware from scratch to uncover what is happening behind the scenes with Redux
  • Set up your own testing environment with Mocha and Chai
  • Realize the power of building composable components

Learn more.


React Redux React-Router: From Beginner to Paid Professional (11,715 students enrolled)

By Leonardo Daniel
  • Building your amazing web applications with React JS and Redux
  • Getting a high-paying job as a front-end developer
  • Getting experience through doing many exercises. Re-enforcing your knowledge of ES6, advanced JavaScript, Redux, React through attempting a lot of quizzes. Practice makes perfect.
  • Becoming familiar with the technologies supporting React, including NPM, Webpack, Babel, and ES6/ES2015.

Learn more.


React Native: Advanced Concepts (16,058 students enrolled)

By Stephen Grider
  • Make compelling applications using expert-level features of React Native
  • Create amazingly smooth and performant animations
  • Build new React Native apps with Expo
  • Understand the latest Navigation options for new React Native apps
  • Add logic to your Firebase backend with Google Cloud Functions
  • Update your users with cross platform Push Notifications
  • Handle your users going offline with Redux Persist

Learn more.


React JS and Redux - Mastering Web Apps (54,299 students enrolled)

By David Katz
  • Develop entire React JS and Redux applications from scratch.
  • Build applications that deal with APIs and web requests.
  • Discuss ES6 and advanced JavaScript.
  • Create web apps with full authentication, and real-time database.

Learn more.


React basic in just 1 hour (22,331 students enrolled)

By Leo Trieu
  • Taste of how to build your very first React component.
  • How to handle event in components.
  • Understand two key concepts of React: State and Props.
  • How to reuse and nest components.
  • How to transfer data between Parent, Child components.
  • How to work with Array, Form

Learn more.


Meteor and React for Realtime Apps (7,889 students enrolled)

By Stephen Grider
  • Create interactive web apps amazingly fast
  • Build amazing single page applications with Meteor and React JS
  • Master fundamental concepts behind structuring Meteor applications
  • Learn the true purpose of Meteor in a modern application
  • Be the engineer who explains how Meteor works to everyone else, because you know the fundamentals so well
  • Build and prototype interesting personal projects in a weekend

Learn more.


GraphQL with React: The Complete Developers Guide (14,683 students enrolled)

By Stephen Grider
  • Build amazing single page applications with React JS and GraphQL
  • Master fundamental concepts behind structuring GraphQL servers
  • Realize the power of building flexible data schemas
  • Be the engineer who explains how GraphQL works to everyone else, because you know the fundamentals so well
  • Become fluent in the ecosystem supporting GraphQL, including the differences between Apollo and Relay

Learn more.


Essentials in JavaScript ES6 - A Fun and Clear Introduction (40,155 students enrolled)

By David Katz
  • Create ES6 applications from the ground up.
  • Use the terminal/command-line application and a code editor to code.
  • Look at ES6 code and understand keyword and concepts.
  • Create live development servers with Webpack.

Learn more.


The Full JavaScript & ES6 Tutorial - (including ES7 & React) (55,808 students enrolled)

By David Katz
  • Code in JavaScript like a pro.
  • Code in es6 comfortably, using all the new features.
  • Build es6 projects from the ground up using tools like webpack and babel.
  • Create a basic ReactJS application from scratch.

Learn more.