liveBook · Manning

Function component

As explained in D3.js in Action, Third Edition

A functional component is a React component implemented as a JavaScript function that receives props and returns rendered markup.

A function component is a JavaScript function that accepts props and returns JSX markup. It is the modern approach used to build React components. section 8.3

A practical function component can:

  • Store state with useState, such as loading status and fetched data. section 8.3
  • Fetch asynchronous data inside useEffect and update state when the Promise resolves. section 8.3
  • Render different markup conditionally, showing Loading... before displaying a Charts component. section 8.3

Data-loading App component

App initializes loading to true, fetches JSON in useEffect, stores the result with setData, then passes data to Charts after loading finishes.

How D3.js in Action, Third Edition covers it

How deep it goes
Implements props, JSX, state, effects, Promise results, dependencies, and conditional rendering without developing class-based components.
Examples
Uses App.js to display a loading message, fetch JSON, update state, and render Charts with data.
What you can do after
Build it from scratch using React state and effects to fetch data and pass it into a rendered child component.
How it connects
Connects React components with JSX, props, state, hooks, asynchronous programming, D3, REST APIs, and conditional rendering.
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.