Learn TypeScript 3 by Building Web Applications

Content projection/templating

With Vue and Angular, components can let other ones provide them with child components to render. With Vue, that feature is called slots and Angular refers to that principle as content projection or transclusion (a term inherited from AngularJS). React also has a similar feature.

In React, if a single slot (also called a hole) can be used to project content, then the convention is to use a prop called children. If you need to define multiple slots, then you can invent your own nomenclature (for example, header, content, footer, or anything that makes sense for your use case).

Let's see how this works with a single slot:

import React from 'react'; import './App.css'; import {Gruyere} from "./Gruyere"; function ...