JSX is a JavaScript syntax extension for expressing component markup directly inside JavaScript. React functional components return JSX, including elements, expressions, and conditional content. section 8.3
Use JSX to connect component state and data with visible interface output:
- Render a loading message while a loading state is true. section 8.3
- Render a Charts component after loading finishes. section 8.3
- Pass fetched data into a component through props. section 8.3
Listing 8.1 Initial state of App.js
import { useState } from 'react'; #1
import * as d3 from 'd3';
import Charts from './Charts/Charts';
const App = () => {
const [loading, setLoading] = useState(true); #2
return (
<div className="container">
{loading && <div className="loading"> #3
Loading...</div>}
{!loading && <Charts />}
</div>
);
};
export default App;
Inspect the compact App.js example to see JSX conditions switch between loading feedback and the chart dashboard. section 8.3
