Learning React.js Data Visualization

Learning React.js Data Visualization
Learning React.js Data Visualization
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 3 Hours | 775 MB

Make the most of your data using React.js

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.

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
Table of Contents

01.Overview and Setting Things Up
02.Overview of JSON Basics
03.Importing JSON Files with webpack
04.Building ES6 React Classes
05.Integrating JSON into React Components

From Web Services to Maps
06.Creating a Map
07.Finding Points on a Map
08.Calculating a Map-s Latitude and Longitude
09.Using ES6 String Templates
10.Connecting to the Web Service
11.Changing a Component-s State

From CSV to a Bar Chart
12.Reviewing package.json and webpack Configurations
13.Modifying Style Attributes in React
14.Preparing the Chart Data Object
15.Creating a Bar Chart with ChartJS
16.Formatting Data

Creating a React Chart Component for ChartJS
17.Creating Utility Modules
18.Adding Random Colors
19.Cleaning Up Memory Leaks
20.Diving Deep into Properties
21.Exploring the Options in ChartJS

From JSON to MongoDB
22.MongoD Versus Mongo
23.Database, Collection, and Document
24.Preparing Our Data for MongoDB
25.Setting Up NodeJS with Express and MongoJS
26.Creating a Radar Chart with MongoDB