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.
About The Author
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.
For us to dive right into the deep, we need to have our environment up with a lot of configurations. To save us time, in this video, I will walk you through the structure that we will be using. This will enable us to develop in ES6/JSX, while our code will automatically get packaged into ES5 with a hot browser that refreshes when we make changes in our code.
In this video, we will startup our server and walk you through the basics of JSON rules.
ES6 doesn't have built-in support for loading JSON files as imports, while a great workaround is using a webpack loader to enable this behavior before the file is outputted to the browser. In this video, we will learn how to use the import command to import JSON files into our main client.js file.
Throughout this section, we were introduced to React, JSX, ES6, and JSON. It's time for us to connect all the dots by integrating into our React component and our JSON data using JSX spread and React props.
In this section, we will be using a visual map to help us illustrate how to work with map related data. Through this video, you will learn how to work with web services and how to integrate their response into React component.
Before we can use a web service, we will need to figure out what area on the map we clicked on. To figure that out we will calculate our mouse position and figure out our relative x and y positions for our image in this video.
Now that we have a point on the map, it's time for us to convert that point into latitude and longitudes. As the web service we will be using will require that information to return the name of the cities that are near the point we clicked onto us.
For us to call the web service, we need to send to it four parameters. The easiest way to do that in ES6 is to use string templates to build up our URL. In this video, we will learn how to useES6 string templates to dynamically create our web service URL.
We are finally ready to connect to the web service.
React components that expect to undergo changes need to declare these changes in advance to enable React to be prepared for changes within the component. In this video, we will enable our component to update itself based on the point on the screen that is clicked on.
Before we continue our journey into the data world, let's take a detour to understand the environment that we are working within. In this video, we will learn more about how packages are installed in NPM, the basics of version controlling package and how to deal with incompatible modules; and we will add a new loader for webpack that will enable us to load CSV files.
In this video, we start our journey to create a React component that leans on a component that is not supported by React. As our first step, we need to create a standard component that has some CSS styles. By the end of this video, we will have a canvas element with a few style attributes.
Before we can start building out our data, we need to have a data source. Let's work on it in this video.
In this video we will learn how to integrate ChartJS into ReactJS. By the end of this video we will have a fully interactive bar chart.
One of the most important skills you need to develop is the skill of formatting data.When you format data, you are converting it to fit your application instead of creating extra rules within your core component.This is the best way to keep your components small and agile. By the end of this video, we will have a ChartJS bar chart running with data driven out of a CSV file.
In this video we will solve the problem from the last section where all of our bar component elements were in the same color. To solve the color problem, we will use a node.js module that generates random colors.
Now that we have a wonderful component that can render out any chart, let's fix a big issue it has that relates to memory leaks. Our component currently assumes it will never get updated, but in reality it could get updated, and when it does we will need to clean out any leftovers. To fix that issue, we will use some built in callbacks that are triggered by ReactDOM.
React is a library that leans on properties and states. In this video we will learn more about how to configure and setup properties to make our new component completely reusable without backed data.
Before we move on to a new topic, let's get more familiar with ChartJS.
In this video, we will show you the steps you will need to take to setup and configure the MongoDBdatabse. By the end of this video, you willhave MongoDB running and you will know the differences between MongoDB server and its drivers.
In this video, we will create our last dataset for this course.
Now that we have data inside of our MongoDB server it's time for us to setup a server that can fetch the data.
Time to wrap things up! In this video, we will use jQuery to load in our JSON data that has been created in the last video and send it into our Chart component.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.