How This Book Is Structured

What's the point of React?

Lesson 0 - Object Elements

Lesson 1 - Element Factory

Lesson 2 - JSX

Lesson 3 - Nested Elements

Lesson 4 - Components

Lesson 5 - Props

Lesson 6 - Prop Types

Lesson 7 - Nested Components

Lesson 8 - Class Components

Lesson 9 - Lifecycle Methods

Lesson 10 - Example App

Lesson 11 - More Lifecycle Methods

Lesson 12 - Refactoring Components

Lesson 14 - Refs

Lesson 15 - Simple Integration

Lesson 16 - Advanced Integration

Lesson 18 - ES215

Virtual DOM Primer

Changelog

A gentle introduction to React, using the JavaScript you already know

React from Zero

In the last chapter, we talked about how to integrate simple libraries into React applications. The next step is to integrate more complex libraries.

Most libraries supply us with a bunch of functions that we can call and use their results, but sometimes some libraries need more to work. For example, map and chart libraries, which render graphics in some way often need direct access to a DOM element to do their work.

, a famous general data visualization library, together with React.

First, we include the libraries source to our web-page. D3, like Moment.js in the last lesson, is also a popular library, so there is a pre-built version ready to be loaded right in the browser with a 

After the inclusion of the script, a global 

Like React, D3 needs access to a DOM element as a 

# Lesson 16 - Advanced Integration

In the last chapter, we talked about how to integrate simple libraries into React applications. The next step is to integrate more complex libraries.

Most libraries supply us with a bunch of functions that we can call and use their results, but sometimes some libraries need more to work. For example, map and chart libraries, which render graphics in some way often need direct access to a DOM element to do their work.

In this lesson, we'll use [D3](https://d3js.org/), a famous general data visualization library, together with React.

## Including the Library

```javascript { actualFilename=code/react-from-zero/16-advanced-integration.html endLine=10 startLine=10 statedFilename=react-from-zero/16-advanced-integration.html url=https&#x3A;//gitlab.com/fullstackio/books/react-from-zero-book/react-from-zero/code/react-from-zero/16-advanced-integration.html#L10 }
<script src="https://unpkg.com/d3@4.7.3/build/d3.min.js">
```

First, we include the libraries source to our web-page. D3, like Moment.js in the last lesson, is also a popular library, so there is a pre-built version ready to be loaded right in the browser with a `<script>` tag.

After the inclusion of the script, a global `d3` object is available.

## Using the Library

Like React, D3 needs access to a DOM element as a _root element_ to render into.