Learning React.js Data Visualization [Video]

Preview in Mapt

Code Files

Learning React.js Data Visualization [Video]

Ben Fhala
Tuesday, November 15, 2016

Make the most of your data using React.js

Quick links: > What will you learn?> Table of content

Mapt Subscription

FREE

£24.99/m after trial

Video

£49.98

RRP £58.78

Save 14%

What do I get with a Mapt Pro subscription?

Unlimited access to all Packt’s 5,000+ eBooks and Videos
Early Access content, Progress Tracking, and Assessments
1 Free eBook or Video to download and keep every month after trial

What do I get with an eBook?

Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the Mapt reader

What do I get with Print & eBook?

Get a paperback copy of the book delivered to you
Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the Mapt reader

What do I get with a Video?

Download this Video course in MP4 format
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the Mapt reader

£0.00

£49.98

£25.00 p/m after trial

RRP £58.78

Subscription

Video

Start 14 Day Trial

Frequently bought together

Learning React.js Data Visualization [Video]

£ 58.78

£ 49.98

Learning React.js Data Visualization [Video]

Nov 2016

3 hours 05 minutes

£ 49.98

Architect Android apps with MVP, Dagger, Retrofit & RxJava [Video]

£ 173.98

£ 147.90

Architect Android apps with MVP, Dagger, Retrofit & RxJava [Video]

Jan 2018

4 hours and 09 minutes

£ 147.90

Buy 2 for £31.68
Save £167.58

Add to Cart

Video Details

ISBN 139781787285750

Course Length3 hours 05 minutes

Video Description

React is an incredibly popular part of modern full-stack web development, and is a keystone of fluid SPAs (single page applications). It is capable of rendering data reactively on to the web, enabling users to interact with it and see the results in real time.

Using JSON as the data format, this course will show you how to ingest your data and display it on the web using a variety of techniques, such as charts and grids. It will run through the logic process, meaning that you will be able to take these skills and apply them in your own projects. Along the way, you will also learn more about the new ES6 language and how it can benefit your React skills, and how to create React controllers.

You’ll begin by gaining an understanding of JSON and how to create JSON files, then how to load them using webpack and ES6 and integrate them into a React component. We will then examine different data types, and you’ll find out how to move data between them in order to create a reactive map. Next, we’ll use ChartJS to display data in various chart forms, and finally we’ll look at how to load data dynamically from a MongoDB database and display it in our React component.

Style and Approach

This carefully modulated course will take you every step of the way through importing your data into React and creating visualizations from it. It is a thorough and methodical course, not skipping over technologies or assuming knowledge. It is also a very practical course, with full examples of technologies used along the way.

JSON

Overview and Setting Things Up

Overview of JSON Basics

Importing JSON Files with webpack

Building ES6 React Classes

Integrating JSON into React Components

From Web Services to Maps

Creating a Map

Finding Points on a Map

Calculating a Map’s Latitude and Longitude

Using ES6 String Templates

Connecting to the Web Service

Changing a Component’s State

From CSV to a Bar Chart

Reviewing package.json and webpack Configurations

Modifying Style Attributes in React

Preparing the Chart Data Object

Creating a Bar Chart with ChartJS

Formatting Data

Creating a React Chart Component for ChartJS

Creating Utility Modules

Adding Random Colors

Cleaning Up Memory Leaks

Diving Deep into Properties

Exploring the Options in ChartJS

From JSON to MongoDB

MongoD Versus Mongo

Database, Collection, and Document

Preparing Our Data for MongoDB

Setting Up NodeJS with Express and MongoJS

Creating a Radar Chart with MongoDB

What You Will Learn

Understand how different types of data can be ingested into React
Create different visualizations from your data (charts, grids, maps, and more)
Find out how to create React controllers
Integrate JSON data into your react component using JSX spread and React props
Enable react to be prepared for changes within the component
Create data driven charts

Authors

Ben Fhala

Ben Fhala discovered his passion for data visualization six years ago while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, 02geek.com, and an Adobe ACP. He enjoys spending most of his time learning and teaching and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world. He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

JSON

Overview and Setting Things Up

Overview of JSON Basics

Importing JSON Files with webpack

Building ES6 React Classes

Integrating JSON into React Components

From Web Services to Maps

Creating a Map

Finding Points on a Map

Calculating a Map’s Latitude and Longitude

Using ES6 String Templates

Connecting to the Web Service