Why React?

React Advantages and Limitations

React Template Starter Project

When it comes to creating React applications, there many options to choose from. You can just write the code yourself and then add libraries to help you take care of packaging your code, getting it ready for production (the toolchain), and doing other common tasks that are standard when writing code.

Another option to get started is for you to use the many React starter template projects that already take care of the scaffolding and configurations and include libraries to help you get the job done quickly. The most popular template for creating a React app is Create-React-App (https://github.com/facebook/create-react-app); the project was created by Facebook and has 85,000 stars on GitHub. CRA is based on a single-page application, so there is no page refresh, and the experience feels like you are inside a mobile app. The pages are meant to be rendered on the client side. This is ideal for small to medium-sized projects.

The other option is SSR, which renders the page on the server so the client (browser) will display the app without doing any work. SSR is good for certain use cases, where there is a lot going on and the user experience would be sluggish if the rendering happened on the client side.

CRA doesn’t support SSR out of the box. There are ways to configure and get CRA to work with SSR, but that may be too complex for some developers and involve maintaining the configuration on your own, so it may not be worth the effort.

If you’re building something that needs SSR, it’s better to just work with different React libraries that are already configured out of the box with SSR such as the Next.js framework, Razzle, or Gatsby (which converts a prerendered website into HTML at build time).

If you prefer SSR with React check out Next.js, Razzle, or Gatsby.

With that being said, with CRA you can do prerendering, which is the closest you can get to SSR, as you will see in later chapters of this book when we optimize our React app.

In this book’s examples, we will be using CRA; however, the components we will be building are loosely coupled and can be easily imported into any React project with little or no effort.

Installing Node and NPM on a Mac/PC

If you don’t have Node.js installed, you will need to install it. Node.js needs to be at least at version 8.16.0 or 10.16.0. The reason we need that version is we need to use NPX, which is an NPM task runner introduced in 2017 that is used to set up CRA.

Make sure you have it by checking the version, as shown here:

$ node -v

If it’s not installed, you can install it for both Mac and PC from here (Figure 1-1):

https://nodejs.org/en/

The installer recognizes your platform, so if you are on a PC, it’s the same steps.

Once you download the installer, run it; once that’s complete, run the node command in Terminal/DOS.

$ node -v

The command will output the Node.js version number.

Create-React-App MHL Template Project

Equipped with Node.js as well as NPM and Yarn, we are ready to get started. We can use the CRA Must-Have-Libraries (MHL) template project I have created for you at https://github.com/EliEladElrom/cra-template-must-have-libraries.

CRA is opinionated and includes libraries such as Jest, service workers, and ES6. The MHL template project is even more opinionated and includes the following libraries:

• Type checker: TypeScript

• Preprocessors: Sass/SCSS

• State management: Redux Toolkit/Recoil

• CSS framework: Material-UI

• CSS-in-JS modules: Styled Components

• Router: React Router

• Unit testing: Jest and Enzyme + Sinon

• E2E testing: Jest and Puppeteer

• Folder structure

• Generate templates

• ESLint and Prettier

• Other useful libraries: Lodash, Moment, Classnames, Serve, react-snap, React-Helmet, Analyzer Bundle

If you want to understand how these libraries were installed, you can create your own template or modify an existing one. That is beyond the scope of this book; however, you can read this article for a complete step-by-step installation of each library:

https://medium.com/react-courses/setting-up-professional-react-project-with-must-have-reactjs-libraries-2020-9358edf9acb3

Or you can take my course on Udemy:

https://www.udemy.com/course/getting-started-react17-with-must-have-libraries/

Let’s begin by creating our react-d3-hello-world “Hello World” project with Yarn with one command, as shown here:

$ yarn create react-app react-d3-hello-world --template must-have-libraries

Or we can use npx, as shown here:

$ npx create-react-app react-d3-hello-world --template must-have-libraries

Once the installation of libraries and all the dependencies have completed downloading, you can run the project by starting a local server.

Change the directory to the react-d3-hello-world project and run the start command in Terminal (see Figure 1-2).

$ cd react-d3-hello-world

$ yarn start

You can see this run command in the package.json file. The command points to the react-scripts library and starts the project on a local server on port 3000 as the default (which you can change).

Now navigate to the localhost and view the project, as shown in Figure 1-3.

Why Should You Integrate TypeScript into Your React Project?

Why is TypeScript so popular?

TS vs. JS, What’s the Big Deal?

TS, as the name suggests, is all about setting “types.” TS is easier to debug and test than JS and prevents potential problems by describing what to expect (you will see that when we test our components later in this book). Using TS, a full blown object-oriented programming (OOP) language and modules brings development to a more professional level and increases our code quality.

A type system associates a type to each value—by examining the flow of these values, it ensures there are no type errors.

Static typing means that types are checked before runtime (allowing you to track bugs before runtime).

JS includes only the following eight dynamic (at runtime) types: BigInt, Boolean, Integers, Null, Number, Strings, Symbol, Object (objects, functions, and arrays), and Undefined.

React and TypeScript work nicely together, as TypeScript improves the code quality of your app using OOP best practices, so it’s worth the learning curve.

The latest version of TS is the version 4 public iteration. To play around with coding in TS, you can run TS code in the TS Playground at https://www.typescriptlang.org/play/ (see Figure 1-4).

The TS Playground site has plenty of examples that can help you better understand TS. I recommend exploring these examples.

Notice the example uses “strict,” and in the TS Config menu item, you can set the compiler options. The different compiler options are explained at https://www.typescriptlang.org/docs/handbook/compiler-options.html.

It may be antagonizing writing your code with errors and warning popping up left and right at compile time, but it is worth it as it will help you avoid issues later when the compiler can’t figure out the types and your app breaks during runtime.

I mentioned that TS is an OOP language and follows the ECMAScript specification; however, the specification is a living thing and changes often, so you can specify the ECMAScript (ES) target. See Figure 1-5.

D3 Version >4

Keep in mind that with TS, we need to bring in the types as well (yarn @types/module-name).

React Function Component with D3

You can see the settings here: generate-react-cli.json. Navigate to src/components, and you can see that three files were generated for you automatically (see Figure 1-6).

• HelloD3.scss

• HelloD3.test.tsx

• HelloD3.tsx

App.tsx

Open our app entry point, which is App.tsx , and add the HelloD3 component we created.

import React from 'react'

import './App.scss'

import HelloD3 from './components/HelloD3/HelloD3'

function App() {

 return (

  <div className="App">

   <header className="App-header">

    <HelloD3 />

   </header>

  </div>

 )

}

export default App

Now, let’s look at localhost again: http://localhost:3000/ (see Figure 1-7). You can see a “Hello World” message and two squares.

Congratulations, you just created your first project that integrates React with D3.

HelloD3.test.tsx

As I mentioned, you already have a unit testing test file created for you automatically.

// src/component/HelloD3/HelloD3.test.tsx

import React from 'react'

import { shallow } from 'enzyme'

import HelloD3 from './HelloD3'

describe('<HelloD3 />', () => {

 let component

 beforeEach(() => {

  component = shallow(<HelloD3 />)

 })

 test('It should mount', () => {

  expect(component.length).toBe(1)

 })

})

If you look at the code, you can see that the test file only tests that the component was mounted (added) to our display.

expect(component.length).toBe(1)

The code is using the Jest and Enzyme libraries. Jest comes out of the box with CRA and Enzyme, and Sinon comes out of the box with MHL, so there’s nothing you need to do on your part to get that configured.

Why Jest and Enzyme + Sinon?

Jest and Enzyme + Sinon

Jest is a JavaScript unit testing framework and the standard for React applications. It was built to be used with any JavaScript project, and it comes with CRA out of the box. However, we do need Jest-dom and Enzyme to enhance the capabilities of Jest.

Sinon

Another must-have library that we should be aware of and add to our toolbox is Sinon (https://github.com/sinonjs/sinon).

Jest and Sinon serve the same purpose, but there are times that you may find one framework more natural and easier to work with for the specific test.

I wanted to introduce you to testing as early as possible, as it’s an integral part of development and needs to be considered when building interfaces.

$ yarn test

Now to get the tests running, the package.json file is already configured with a run task.

"test": "react-scripts test"

When you run the script, you can see that the test passed, as shown in Figure 1-8.

As you make changes to your component, make sure to update the unit testing file as well as test different portions of the component functionality.

I want to point out that your project also comes with end-to-end (e2e) testing out of the box.

"test:e2e": "jest -c e2e/jest.config.js",

"test:e2e-alone": "node e2e/puppeteer_standalone.js",

"test:e2e-watch": "jest -c e2e/jest.config.js --watch"

As I mentioned earlier, if you want to understand how these libraries were installed, you can create your own template or modify one. That is beyond the scope of this book; however, you can read this article for the step-by-step installation process of each library:

https://medium.com/react-courses/setting-up-professional-react-project-with-must-have-reactjs-libraries-2020-9358edf9acb3

Or you can take my course on Udemy, which includes a 40-page ebook to help you understand all the moving pieces and how they were installed and configured:

https://www.udemy.com/course/getting-started-react17-with-must-have-libraries/

React Class Component with D3

Lint ESLint and Prettier

How neat would it be to have a code review and have someone formatting your code to make sure it’s consistent?

All code in any code-base should look like a single person typed it, no matter how many people contributed.

—Rick Waldron

Luckily, this can be done.

Lint is a tool for analyzing your code. It is a static code analysis tool created to identify problematic patterns found in code. Prettier is an opinionated code formatter.

Note

Linting is the process of running a program to analyze your code to find potential errors.

Lint tools can analyze your code and warn you of potential errors. For it to work, we need to configure it with specific rules.

It’s not wise to get into a debate about whether there should be two spaces in every newline or a tab, single quote, double quotes, etc. The idea is to have somewhat of a style guide and follow the style for consistency. As was nicely said,

Arguments over style are pointless. There should be a style guide, and you should follow it.

—Rebecca Murphey

Airbnb—as part of its style guide—provides an ESLint configuration that anyone can use and become the standard.

ESLint is already installed on CRA MHL template, but it’s optimized with a styling guide you don’t need to do a thing to enjoy using it.

The project is already set up with ESLint and Prettier for TypeScript using Airbnb’s styling guide (which is considered the standard).

However, if you want to understand better, read my article at https://medium.com/react-courses/react-create-react-app-v3-4-1-a55f3e7a8d6d to set up your project with ESLint and Prettier for TypeScript using Airbnb’s styling guide.

There are three files that were configured for you.

• .eslintrc: ESLint run commands configuration file

• .eslintignore: ESLint ignore files

• .prettierrc: Prettier run commands configuration file

The package.json file ’s run scripts are already there for you, so we can run the lint and format utilities and even run the app build (the production build we will cover later in this book) with just one command.

"scripts": {

  ..

  ..

  ..

  "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",

  "format": "prettier --write 'src/**/*.{ts,tsx,scss,css,json}'",

  "isready": "npm run format && npm run lint && npm run build"

}

We are ready to let lint do its job and change our code, as shown in Figure 1-9.

$ yarn run lint

To run the formatter to clean our code, we can use yarn as well, as shown here (see Figure 1-10):

$ yarn run format

SVG vs. HTML

However, I want to point out there are other ways to draw graphics. For example, we can use the HTML <canvas> element via JavaScript. The <canvas> element is a container for graphics.

SVG gives better performance with a smaller number of objects or a larger surface. A canvas gives better performance with a smaller surface or a larger number of objects.

A canvas can become blurry, and the device pixel ratio needs to be checked and adjusted. To avoid blurry images with different device pixel ratios, check out the Mozilla documentation here:

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

JSX Canvas

A canvas (https://www.w3schools.com/html/html5_canvas.asp) can be used to draw components in HTML. In fact, not only can you use a canvas to draw components, but you can also animate it and manipulate the element attributes. The React JSX version of a canvas is no different.

Let’s create an example. We can use the same project we created in Chapter 1 (react-d3-hello-world) and add a component that will include a canvas. You can download the final code of all the examples of this chapter from the book’s repository.

https://github.com/Apress/integrating-d3.js-with-react/tree/main/ch02

App.tsx

Remember to add the component to your App.tsx parent component.

// src/App.tsx

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <JSXCanvas />

      </header>

    </div>

  )

}

To see the graphic, make sure you are still running on port 3000 from Chapter 1.

$ yarn start

Figure 2-1 shows the final results.

What about scaling? Yes, you can use scaling and adjust the canvas based on the screen size to avoid your canvas turning blurry once it’s enlarged. To do that, use context.scale.

const { devicePixelRatio: ratio = 1 } = window

context.scale(ratio, ratio)

However, SVG would give better results if you wanted that crispy print quality on all devices or you needed scaling such as for zooming functionality. I am not going to dive deeper into canvas as I recommend staying with SVG; however, I wanted you to be aware that it’s possible, and if you ever have a use case that needs a canvas such as in a case targeting a smaller screen size and many objects, you will have it in your toolbox.

React SVG

Notice that I am using the transform attribute . The transform shifts the group element to top left corner. You can read more about the transform attribute in the Mozilla documentation.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

Figure 2-2 shows our SVG rectangle element.

The transform attribute can be used for many things such as rotate, scale, and skews.

For example, if we want to implement the example from the Mozilla docs (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform). The example is using xlink to assign an SVG path to an element for reuse in order to create a heart shape and a shadow effect. Unfortunately, you will often see that you cannot just copy and paste most code you will see online (D3 related or not) into React without some level of modification and knowledge of what you are doing.

The code will generate the error “Type { xlink: true; } is not assignable to type SVGProps<SVGUseElement>.”

The assignment to useTag is done using dangerouslySetInnerHTML.

In our case, we know what we are doing, and we are not passing some runtime string that can cause an injection attack, so we are fine.

The output creates for us the heart outline and shadow, as shown in Figure 2-3. If I wanted to add an outline to the shadow, that’s not a problem. We can put the same SVG code inside the group element. Let’s go ahead and try it.

Map Data in React Using JSX

To make it more realistic and interesting than just using SVG, we want to now pass data from the parent component using React props and draw the data using the HTML p tag with some straightforward React code. Let me show you how it’s done.

HelloJSXData.tsx

Create a new component on your own or with the template and call it HelloJSXData.

npx generate-react-cli component HelloJSXData --type=d3

Next, import the style SCSS and React.

// src/component/HelloJSXData/HelloJSXData.tsx

import React from 'react'

import './HelloJSXData.scss'

Next, set the props we will be passing into our child component. I am pointing to an interface that I will define at the bottom of the file.

const HelloJSXData = ( props : IHelloJSXDataProps ) => {

On the JSX rendering side, I will be mapping the array and passing it from the parent component. Once the data is mapped, we can just display the data on the screen using the p HTML tag. Take a look:

  return (

    <div className="HelloJSXData">

      {props.data.map((d, index) => (

        <p key={`key-${  d}`}>

          jsx {d}

        </p>

      ))}

    </div>)

}

Here is our interface for the props, just passing an array that is made out of strings:

interface IHelloJSXDataProps {

  data: string[]

}

export default HelloJSXData

App.tsx

As always, remember to add HelloJSXData to the app.

// src/app

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <HelloJSXData data={['one', 'two', 'three', 'four']} />

      </header>

    </div>

  )

}

See the final results in Figure 2-4.

I am showing you how to use the p HTML tag to simplify things, but this could be an SVG element such as a circle or a rectangle, as I will be showing in the other examples.

Map Data in React Using D3

The previous example was pure, straightforward React code. In this example, let’s add D3 to add a map and draw for us. Let’s call the component HelloD3Data.

HelloD3Data.tsx

npx generate-react-cli component HelloD3Data --type=d3

We will be using D3, so make sure you already have D3 and the types imported, if you haven’t done that for this project before.

yarn add d3 @types/d3

Let’s start by defining the import we will be using.

// src/component/HelloD3Data/HelloD3Data.tsx

import React, { useEffect } from 'react'

import './HelloD3Data.scss'

import * as d3 from 'd3'

Just as before, we will set our props interface to pass the same array of strings.

const HelloD3Data = ( props : IHelloD3DataProps ) => {

  useEffect(() => {

    draw()

  })

As we are using D3, we need to first select the element we will be setting up in our JSX rendering. Next, by using the d3 selectAll API, we can select the p HTML element and the data attribute. Than we can pass the data on the text attribute. I will be using the inline function to set the text as the data value. Take a look:

  const draw = () => {

    d3.select('.HelloD3Data')

      .selectAll('p')

      .data(props.data)

      .enter()

      .append('p')

      .text((d) => `d3 ${  d}`)

  }

For our rendering, we’ll set a div to be the wrapper for our p tags.

  return <div className="HelloD3Data" />

}

interface IHelloD3DataProps {

  data: string[]

}

export default HelloD3Data

Lastly, let’s set the parent component.

// src/app

<HelloD3Data data={['one', 'two', 'three', 'four']} />

You can see the results in Figure 2-5.

As you can see, when comparing the two examples of iterating through data between React and D3, D3 doesn’t look as intuitive as React. Our example is simple in nature, but when there is a need for lots of calculation and a large data set, D3 will start to shine.

Simple Bar Chart with D3

So far, we have worked with simple examples and manipulated HTML elements such as <canvas>, p tags, and div. Additionally, we have worked with SVG and D3.

This time let’s create our chart with a class component instead of a function component so you can see the difference.

I want to point out that it’s preferred to extend React PureComponent when you don’t need the shouldComponentUpdate life cycle event.

In the class constructor, I am setting the interface, creating the reference, and setting the data.

As you recall from previous examples of function components, we called the draw function. In the React class component, we can call the draw method during the componentDidMount lifecycle hook.

On the drawChart method , I will take help from D3. I first select the reference, then add an SVG element using the append, and finally set our width and height.

Add the <SimpleChart /> component to App.tsx, just as we did in the previous example. You can see the final results in Figure 2-6.

Congratulations, you just created your first chart—a bar chart!

React Mouse Events

Notice that I am using React.MouseEvent instead of the standard HTML’s MouseEvent.

Events are named using camel case instead of just using the lowercase. Here are two examples: React.KeyboardEvent and React.MouseEvent.

Events are passed as functions instead of strings. If you follow the code, you can see that React events extend UIEvents, which extends SyntheticEvent.

React uses its own event system. That’s why we can’t typically use MouseEvent from the standard DOM.

We need to use React’s events; otherwise, we get an error, or we just won’t be able to access methods. Generally speaking, most events are mapped with the same name.

Luckily, React’s typings give you the proper equivalent of each event you might be familiar with from standard DOM.

We can either use React.MouseEvent or import the MouseEvent typing from the React module.

See the final results in Figure 2-7.

D3 Mouse Events

In the next example, I am going to replicate the same functionality from the previous example, setting a circle with mouse events; however, this time, I will be using D3 instead of React JSX. Let’s take a look.

My draw() method will select my SVG wrapper element and then append a group element and a circle element and set the events using the .on method on D3.

I am even attaching the same class circle in this example.

As you can see, for most people, React JSX is more intuitive and easier to read; however, if you need to write D3 code, you need to use the D3 event, and it will be straightforward once you understand what you are doing.

Knowing both options gives you flexibility and more control over your code. When we want d3 to be in charge of the DOM for our component, it’s better to use React elements and tie as much as possible to React. In cases that we need to take over the task of handling the DOM, having d3 can help us.

Animating with React

CSS-in-JS modules are a popular option for styling React applications, because they integrate closely with React components and have features that allow you to change properties passed from the parent component or tie properties from the state.

Indeed, the CRA MHL library project is set up with Material-UI and Styled Components out of the box, so you don’t need to install anything; we can just start using both Material-UI and Styled Components.

For example, we can change our style based on React props. Also, by default, most of these systems scope all styles to the respective component being styled.

There are many options to pick from when it comes to CSS-in-JS modules such as Styled Components, Emotion, and Styled-jsx.

I picked Styled Components because it goes hand in hand with Material-UI; you can read more about it (if you are unfamiliar) at https://styled-components.com.

But wait, why do we need Styled Components? Doesn’t Material-UI have a styled import similar to Styled Components already?

Yes, it is true that Material-UI is a great component library that emulates Google’s Material Design and has a built-in styling mechanism. So why is it not enough? The quick answer is that the Material-UI CSS-in-JS solution doesn’t feel as powerful as Styled Components. Material-UI was designed to be used from the get-go with its own styling solution, CSS-in-JS. But sometimes you want other features that are not available in Material-UI style, or you are like me and just like Styled Components better.

Fortunately, Material-UI did make it simple to use other styling solutions.

Styled Components is another great library used to style React components. That’s done by defining React “styled” components without CSS classes. Styled Components is best used when you want to write regular CSS, pass functions, and props. You may ask, why not just use Styled Components then?

There aren’t many mature libraries out there that are at the Material-UI level at the time of writing, certainly not at Material-UI maturity levels.

We can leverage the advantages of both Material-UI and Styled Components together.

And much more.

For one of the charts we will be using later in this book, we will need a pulsating circle. The pulsating circle can be used to highlight something on a chart.

PulsatingCircle.tsx

To create that pulsating circle component using the Styled Components library, let’s create a new function component and call it PulsatingCircle.tsx.

// src/component/PulsatingCircle/PulsatingCircle.tsx

import React from 'react'

We import keyframes and styled from Styled Components.

import styled, { keyframes } from 'styled-components'

Now, look at the power of writing dynamic code that can be updated by passing params. Let’s define a function that will take two colors.

const circlePulse = (colorOne: string, colorTwo: string) => keyframes`

0% {

  fill:${colorOne};

  stroke-width:20px

}

50% {

  fill:${colorTwo};

  stroke-width:2px

}

100%{

  fill:${colorOne};

  stroke-width:20px

}

`

Now using animation, we can create an infinite four-second linear loop to form that pulsating effect.

const StyledInnerCircle = styled.circle`

  animation: ${() => circlePulse('rgb(245,197,170)', 'rgba(242, 121, 53, 1)')} infinite 4s linear;

`

export default function PulsatingCircle(props: IPulsatingCircle) {

On the rendering side, we can just use StyledInnerCircle , which we created as a JSX component.

Notice that I am assigning the x, y from the props. The parent component can pass these.

  return (

  <>

      <StyledInnerCircle cx={props.cx} cy={props.cy} r="8" stroke="limegreen" stroke-width="5" />

  </>

  )

}

On our props interface side, we can pass the location of our custom component.

interface IPulsatingCircle {

  cx: number  cy: number

}

Add our component to App.tsx .

// src/app.tsx

<svg width={400} height={400} viewBox="0 0 800 450">

  <g>

    <PulsatingCircle cy={100} cx={100} />

  </g>

</svg>

You now have a pulsating animation circle, as shown in Figure 2-8.

Animating with D3

In terms of animating with D3, the process follows an animation sequencing. If you are familiar with any animation software, you will find D3 more intuitive since you understand the concepts of animation. For others, this can be confusing.

PulsatingCircleD3.tsx

As an example, let’s create another pulsating circle, but this time let’s use D3.

Import and set a draw method.

import React, { useEffect } from 'react'

import * as d3 from 'd3'

const PulsatingCircleD3 = () /* props */ => {

  useEffect(() => {

    drawPulsatingCircle()

  })

  const drawPulsatingCircle = () => {

To keep a loop, I will be creating a function called repeat() . That function will select the circlSVGvg element (I am creating the circle in JSX; by now you know what to do if you want this to be 100 percent pure D3).

Next, I will be setting a transition.

During the first 300 ms, I first set the attributes of the stroke to 0 and then set the duration and change the stroke opacity from 0 to 0.5.

Next, I set another stroke to change and use the D3 ease to create sinus ease (yes the same sinus circle we used in math class) in the animation.

Lastly, the function calls itself to loop using a recursive function (a function that calls itself).

    (function repeat() {

      d3.selectAll('.circle')

        .transition()

        .duration(300)

        .attr('stroke-width', 0)

        .attr('stroke-opacity', 0)

        .transition()

        .duration(300)

        .attr('stroke-width', 0)

        .attr('stroke-opacity', 0.5)

        .transition()

        .duration(1000)

        .attr('stroke-width', 25)

        .attr('stroke-opacity', 0)

        .ease(d3.easeSin)

        .on('end', repeat)

    })()

  }

In the JSX, I am creating our circle with a radius of 8 pixels and a location of 50, 50 for the x, y, as shown in Figure 2-9.

  return (

  <>

      <svg>

        <circle className="circle" cx="50" cy="50" stroke="orange" fill="orange" r="8" />

      </svg>

  </>

  )

}

export default PulsatingCircleD3

You can see that the idea is to sequence the animation. I am sure some will find this more complicated, while others will find it easier than the previous example.

line.csv

A good place to start is the data. For the line chart, the data I will be using is straight from Yahoo Financing. I will be pulling historic data for the Boeing stock, with a ticker notation of BA: https://finance.yahoo.com/quote/BA/history. Once you get to the page, you will see an option to download the data.

In the downloaded CSV file (see Figure 3-1), I am keeping the Date column and the Open price and deleting the other columns.

Next, I will be reformatting the date to a format of %Y-%m-%d for easier reading (see Figure 3-2).

I am taking the price history of BA and then converting the CSV to two fields: data and value .

Lastly, I am renaming the Date and Open columns to date and value.

types.ts

BasicLineChart.tsx

The function component BasicLineChart does the heavy lifting, and it will draw the axis and line chart.

I will be importing React, SCSS, D3, and the types file. The structure is the same as we had in the previous chapter.

Without casting d3.extent as [Date, Date], I will be getting the mean ESLint error message shown in Figure 3-3. You can see from the message that it expects a [Date, Date].

TS2345: Argument of type '[undefined, undefined] | [Date, Date]' is not assignable to parameter of type 'Iterable<number | Date | { valueOf(): number; }>'.

What’s happening here is that svg.append('g') appends an SVG group element to the SVG and returns a reference to itself in the form of a selection.

When we call on a selection, we are calling the function axisBottom on the elements of the selection g. We are running the axisBottom function on the newly created and appended group, g.

Notice that these D3 scale methods really helped a lot; they were able to do the calculations and transform our data into the values needed to draw the chart.

If I need to add a pulsating dot or anything on the basic line chart, what I can do is reuse these x-axis and y-axis values, for example y(300).

BasicLineChart.scss

BasicLineChart.test.tsx

For testing, I am using Jest and Enzyme to ensure that the component mounts and uses the props I set.

App.tsx

For the final result, see Figure 3-4.

I am not getting into details on how the format, lint, and test got set, but as I pointed out before, you can learn more about these in my React and Libraries book, available at https://www.apress.com/gp/book/9781484266953.

If you don’t set the test suites, it’s fine and won’t affect any of the functionality; however, it is just good practice to write your component with full testing coverage.

area.csv

As for the data, I will be using the S&P 500 ticker and format the data just as I did in the line chart (https://finance.yahoo.com/quote/%5EGSPC/history).

BasicAreaChart.tsx

This code is in addition to the path line since I need to fill the area with color.

Next, set up the types.ts, scss, and BasicAreaChart.test.tsx files. They have the same code as in the line example, so I am not showing them to you here. Make sure they are set up in the BasicAreaChart folder (see Figure 3-5).

App.tsx

And voilà! See Figure 3-6.

As you saw, both the line and area charts were similar. Once we understand the processes of retrieving and formatting the data, creating our axis for both x and y, and drawing our chart, it starts to get easier each time you draw a chart.

bar.csv

BasicBarChart.tsx

Set up types.ts, scss, and BasicAreaChart.test.tsx just as we have done in the other examples.

types.ts

BasicBarChart.scss

App.tsx

Voilà again! See Figure 3-7.

Looking at the chart, you can see that the chart tells a story. At first glance, the 2020 Stack Overflow results appear that React has bypassed Angular by almost 11 percent.

As you can see from the chart (Figure 3-8), jQuery shows up as the king, but React.js is gaining momentum and ready to take over.

However, that is not the case.

The survey includes React.js and Gatsby separately, although they are both based on React, and there is also a split between Angular and Angular.js.

In reality, if we add these results together, it is almost an exact split between Angular at 41.2 percent, React at 39.9 percent, and jQuery at 43.3 percent.

Once I plug in the new data, I am going to get a whole different story; see Figure 3-9.

If you interested in seeing a comparison between using React and Angular, check out my article on Medium at https://medium.com/react-courses/angular-9-vs-react-16-a-2020-showdown-2b0b8aa6c8e9.

The 2021 Stack Overflow results have not been published at the time of writing this book, but it would be interesting to see how these values change over time. Now that you are equipped with this chart, you can plug in the new data.

Go ahead and compare your results with mine (see Figure 3-10).

✨  Done in 1.48s.$ eslint --ext .js,.jsx,.ts,.tsx ./

✨  Done in 9.88s.Test Suites: 5 passed, 5 total

Tests: 5 passed, 5 total

Snapshots: 0 total

pie.csv

types.ts

BasicPieChart.tsx

Once my data object is ready, the next step is to set up the color scale. I will be using d3.scaleOrdinal(), and for the domain, I can set each name to have its own unique color.

BasicPieChart.test.tsx

App.tsx

BasicPieChart.scss

Look again at localhost port 3000: http://localhost:3000/. You can compare your results with mine, shown in Figure 4-1.

As always, you can download the complete code of this chapter from here:

https://github.com/Apress/integrating-d3.js-with-react/tree/main/ch03

To see this basic pie chart with better integration with React and interactions of resizing and switching metrics check my React + d3 interactive course: https://elielrom.com/BuildSiteCourse.

App.tsx

To implement this, you can set the chart in a parent component and pass the data in App.tsx.

<BasicDonutChart

 data={[

   { name: 'Yes', value: 80 },

   { name: 'No', value: 20 },

 ]}

 width={50}

 height={50}

/>

Take a look at Figure 4-2.

As for the data, in the previous examples, I showed you how the actual chart component retrieves the data.

This made our code easy to read and loosely coupled, which is a great design to keep the charts simple and the data in one place; however, to prepare you for the next chapter of dealing with a state management, here I extracted the data to the parent component App.tsx.

The reason we would want to extract the data from the chart component is for cases where the data is shared between multiple components. In this case, we want to load the data once and share it with multiple components. A good example is using the same data to draw different charts types.

scatter.csv

An interesting way to use a scatter chart is to look at diamond prices in relationship to diamond sizes. I found the data posted on GitHub (https://github.com/sakshi296/P1-1-Predicting-Diamond-Prices). Once I download the chart, I can open it in Excel or any other program to revise it, as shown in Figure 4-3.

I will be deleting all the columns I don’t need and keeping the price and carat metrics (see Figure 4-4).

Our data set is small and has a little footprint, but cleaning up your data and setting up your data set to only consume what you need is a good practice to optimize your data and increase performance. In Chapter 10, I will dive deeper into the best practices of optimizing your charts.

types.ts

BasicScatterChart.tsx

App.tsx

Now, we see the diamond per carat historic prices, as shown in Figure 4-5.

The chart can show me the price range at a glance, and I can see what to expect in terms of carat size and price for each diamond. If I want to improve the chart, I could insert other fields such as the diamond color’s grade metrics and give these different colors on the chart. I could change the chart per year and filter the data.

See Figure 4-6.

In ‘my d3 and React interactive course you will learn how to include interactive means lines and set resizing, as well as set the component so react control the DOM better, see https://elielrom.com/BuildSiteCourse.

Setting interactive mean lines that move on mouse move events can help the user read the results better and quickly figure price prediction per carat.

types.ts

Histogram.tsx

For the class signature, I will be using a class pure component (React.PureComponent) versus React.Component since I don’t need to use shouldComponentUpdate event lifecycle.

Now we could also use getDerivedStateFromProps instead of componentDidUpdate, but that method may be called multiple times for a single update, so we would need to place a validator to check whether the state was updated.

componentDidUpdate gets invoked immediately after updating occurs. This method is not called for the initial render.

It’s essential to avoid any side effects, so you should use componentDidUpdate, which executes only once after the component updates.

The heavy lifting is done in the draw method. I could split this code more into an helper class, but the example is not too complex.

The jsx is straightforward.

However, this time I am adding a title and labels using the Material-UI typography component to include our text labels and SVG to hold the <g> elements and a Material-UI slider.

Histogram.scss

App.tsx

Lastly, I am including the histogram component in App.tsx .

In the pie donut you saw, the data was passed through the props from the parent component.

As I mentioned, we want to extract the data from the chart component for cases where the data is shared between multiple components.

useEffect will be called multiple times, on every rendering, so I want to limit loading the data only once.

Figure 4-7 shows the final result.

Looking at the chart, it seems that during 2020 most of the time the price of Ethereum was either about $225 (for about 50 days) or $400 (for about 37 days).

That’s the power of charts. With one look at a chart, I can get the story.

Note I am using charts that are based on investment vehicles in this chapter, but I am not recommending investing in any of the stocks or coins shown in this book.

You can download the complete code for the Histogram component from here:

https://github.com/Apress/integrating-d3.js-with-react/tree/main/ch04-05/histogram-d3-ts

Flux

The Facebook team first tried a few tools that already existed. They first implemented the Model-View-Controller (MVC) pattern; however, they found the architecture pattern causing issues as more and more features were added, and a portion of the code was harder to maintain as the code broke constantly.

The React team’s challenges with using the MVC pattern for separating concerns and managing the state for the front end ended up with the creation of Flux.

It’s important to know that Flux state management is being phased out, and the project is in maintenance mode. There are many more sophisticated alternatives available.

What Does MVC Solve?

The Facebook team explained that when the developers tried using MVC, they experienced issues with the data flow that can cause a loop, which can crash an app as it will become a memory leak (cascading effects by nested updates) and keep re-updating the rendering endlessly.

These challenges were solved by the Facebook team coming with an architecture they called Flux and then more recently with an experimental library called Recoil.

From my personal experience, having worked with many MVC-based applications small and large, I have to somewhat disagree with the Facebook team. Some of these projects were very complex enterprise-level applications built on MVC, and by enforcing good habits, MVC-based apps can work seamlessly. With that being said, there is a lot of boilerplate code involved in many of the MVC framework implementations out there, and a code review is often necessary to enforce good habits and to maintain a separation of concerns.

Facebook’s Flux architecture does simplify the process of separating concerns and is a fresh and welcomed alternative to state management, while keeping less boilerplate code and our components loosely coupled. You can learn more about Flux here:

https://github.com/facebook/flux

https://facebook.github.io/flux/

historicalPriceObject.ts: Set Up Our Data Type

In our histogram, we create types.ts. The class holds the types we are using in our chart. This type of architecture is great, because it allows us to copy our component and reuse it anywhere we want, keeping our code loosely coupled.

However, Recoil is going to need a definition as well. I could just import the types class, but that would create a composition between our state and our chart.

This would not be ideal if I had multiple charts using the same data, because we would need to import the types.

historicalPriceAtoms.ts: Shared State

Now that I have my model object, I can create my Recoil atom.

The key in Recoil should be a unique key. A good practice is to give the key the same name as the filename. Since all the atoms can live in the same directory, src/recoil/atoms/, we can’t have duplicate filenames with the same name, so this will ensure our keys are unique.

historicalPriceSelectors.ts: Transforming Our async State

The second element of Recoil is a selector. Selectors are pure functions that allow you to transform the state either synchronously or asynchronously. In our case, we can use the same d3.dsv code to retrieve the prices from our CSV file.

Just like the Recoil atom, our selector needs a unique key, and I am making an async call and setting a promise as I don’t want to stop my code.

Once the data is retrieved, I cast it as my type historicalPriceObject[] and use the promise resolve to return the data.

HistogramWidget: Custom Component

In the previous chapter, we had App.tsx as the parent component that retrieved the data and Histogram.tsx as the chart component.

What I am going to do is add another component. Let’s call it a widget. The widget component can handle the data, set a loader when the data is loading, and handle other potential components that use the same data or different data. Figure 5-1 shows the higher-level diagram of the component.

This architecture design allows me to be prepared for whatever comes next. For instance, suppose we want to add a list that shows the prices over time or another chart that uses the same data.

HistogramWidget.tsx: Custom Component

The widget code will retrieve the data we set up in our Recoil selector and render the chart.

This code is similar to React’s useState, and it’s very intuitive. That’s why Recoil shines.

The data is binding on the Histogram component, and since my two objects Types.Data[] and historicalPriceObject[] are the same, TypeScript won’t complain.

Here I am just using a loading message, but this could be any component, animation, or image.

HistogramWidget.scss

Graph.test.tsx

Our Jest test is a bit different using Recoil. It’s good practice to have full coverage.

App.tsx

See Figure 5-2.

types.ts

For the data type, I am creating another types.ts just for my PriceTableList.tsx component.

PriceTableList.tsx

The PriceTableList.tsx component will be using makeStyle to create our styles for the root container and the table component.

We will be using the TableBody, TableCell, TableContainer, TableRow, and Paper components from Material-UI, so they need to be imported.

To better understand Material-UI tables, take a look at the Material-UI documentation:

https://material-ui.com/components/tables/

PriceTableList.scss

That’s it, I am ready to integrate the PriceTableList.tsx component into the parent component HistogramWidget.tsx .

HistogramWidget.tsx

HistogramWidget.scss

Figure 5-3 shows the final result.

Check my d3 and React interactive course to see how you can implement this histogram chart using function components and optimize using hooks: https://elielrom.com/BuildSiteCourse.

Install Additional Needed Libraries and Types

Lastly, download the data of the world atlas. The data is provided from TopoJSON that has prebuilt countries data (https://github.com/topojson/world-atlas). Here is the actual JSON I will be using:

https://d3js.org/world-110m.v1.json

Place the file in the public folder for easy access: /public/data/world-110m.json.

WorldMapAtlas.tsx

Let’s review.

WorldMapAtlas is set as function component. This is a matter of preference, and I could have used a class component.

In terms of the type, I had to figure the type by drilling into the actual geojson library.

Notice that I am using key={`path-${uuid()}`}.

Keys and refs are added as an attribute to a React.createElement() call. They help React optimize the rendering by recycling all the existing elements in the DOM.

App.tsx

Next, let’s add our WorldMapAtlas component to App.tsx as a child.

App.scss

Voilà! See Figure 6-1.

As I mentioned, for the projections, I used geoEqualEarth; however, I can change the projection easily to other projections. For instance, if I want to change to geoStereographic, my map will change. See Figure 6-2 .

to the following:

import { geoPath, geoStereographic } from 'd3-geo'

const projection = geoStereographic().scale(scale).translate([cx, cy]).rotate([0, 0])

Another example is the geoConicConformal projection ( Figure 6-3).

const projection = geoConicConformal().scale(scale).translate([cx, cy]).rotate([0, 0])

RoundWorldMap.tsx

See Figure 6-4.

AnimationFrame.tsx

To add animations, we can call JavaScript window requestAnimationFrame API (https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).

The requestAnimationFrame method tells the browser that I want to perform an animation, and the browser will call my callback function so that I can update my animation before the next redraw.

Let’s review the code.

Next, I will keep track of the frame using performance.now() (https://developer.mozilla.org/en-US/docs/Web/API/Performance/now). That feature brings a timestamp in the one-millisecond resolution that I can use to figure out the time delta in case I need it.

I can then use the useEffect hook to tie the animate method.

RotatingRoundWorldMap.tsx

Now that we have the AnimationFrame hook ready to be used for our animation, I can add my rotating animation. Additionally, I will be adding a user gesture in the form of an icon button from Material-UI to start the animation.

Figure 6-5 shows the final results.

One more change we need to make is to place the loading of the map data inside of a statement that checks if the data was loaded.

The reason is that since using the animation hook, the useEffect will get called all the time.

RotatingRoundWorldMapWithCoordinates.tsx

Copy the RotatingRoundWorldMap.tsx file from the previous example and name it RotatingRoundWorldMapWIthCoordinates.tsx .

Yes, I know it’s a long name, but using Shakespeare’s method names, it’s easy to tell what this component is doing.

Notice that just like the previous step, every time that I am using the map in React I am adding a unique key to each item.

Figure 6-6 shows the final results.

coordinates.csv

Place the file here for easy access: world-map-chart/public/data/coordinates.csv.

types.tsx

WorldMap.tsx

For our refactoring effort, copy the RotatingRoundWorldMapWIthCoordinates.tsx file from the previous example and name it WorldMap.tsx .

Most of the code stays the same.

For the props interface, I will be adding the data feeds and the alignment attributes, so I need to add the props interface and change the function signature.

As you can see, our code in WorldMap.tsx is now cleaner and more readable compared to the RotatingRoundWorldMapWIthCoordinates.tsx file from the previous example.

App.tsx

For the parent component, I will be extracting the data, placing it inside the effect hook, and using the D3 to load both the JSON and the CSV.

Since I want to load both data sets before I draw the map, a good approach is to use the asynchronous calls to both data sets before passing the data to the chart component.

We can use D3’s queue(). See https://github.com/d3/d3-queue. D3’s queue() to do asynchronous tasks. Add these D3 modules and TS types.

Let’s review the code.

The useEffect hook will be doing the heavy lifting. The if statement ensures I am not loading my data multiple times.