Nesting components

Let's think about how we want to structure the components of our interface. Many content management systems feature lists of items—items that we store in and retrieve from a database. For example, let's imagine a system through which we can manage the pages of a website.

For such a system, we need an entry-point—something like PageAdmin, which connects our persistence layer to our interface:

import React from "react";

class PageAdmin extends React.Component {
    render() {
        return <ol>...page objects</ol>;
    }
}

export default PageAdmin;

We can also represent the persistence layer in the form of a backend class:

class Backend {
    getAll() {
        // ...returns an array of pages
    }

    update(id, property, value) {
        // ...updates a page
    }

    delete(id) {
        // ...deletes a page
    }
}

Note

Later, we'll look at ways of persisting this data. For now, it's OK to just use static data in this class.

We could connect PageAdmin to this...