function Layout({ children }) ...の{ }って？

この{}はなにか

ES6で追加された分割代入という書き方です。
オブジェクトから特定のプロパティの値だけを取り出せます。

JSではこんなふうに書けます

以下の例では引数にとったobjectのproperty1の値だけを取り出しています。

const obj = {
    property1: "hoge",
    property2: "huga",
    }

const isHoge = ({property1}) => {
    return property1 === "hoge"
}

isHoge(obj)
// true

JSXではこんなふうに書けます

Reactでも、引数自体はオブジェクトとして渡ってきており、そのchildrenプロパティだけ取り出しているわけですね。

そのため

export default function Border({ children }) {
    return (
        <div style={{ border: "solid" }}>
            {children}
        </div>
}

は、分割代入を使わずに

export default function Border(props) {
    return (
        <div style={{ border: "solid" }}>
            {props.children}
        </div>
}

と書くこともできます。
すぐ思いつく分割代入の利点は、children以外のプロパティはいらないんだな、とひと目でわかることでしょうか。

蛇足

今まできちんと理解せず「children使うときはこうやるんだ〜」って書いてました。反省。

参考