Coggle requires JavaScript to display documents.
export default function Home() { return ( <div>...</div> ); }
class App extends Component { render() { return <Home /> } }
class App extends Components { render() { return [<Home key="some"/>, <h2 key="something else">Some sibling</h2>] } }
class App extends Components { render() { return <Fragment> <Home key="some"/> <h2 key="something else">Some sibling</h2> </Fragment> } }
class App extends Components { render() { return <div> <Home /> <h2> Some sibling </h2> </div> } }
render() { if(this.state.error) { return <h1>Woops!</h1>; } return this.props.children; }
<ErrorBoundary> <Component {...props} /> </ErrorBoundary>
import React from 'react' export default function Greeting({message}) { return <h2>{message}</h2> }
react
styled-components
prop-types
import T from 'prop-types'
station childContextTypes = { message : T.string }
getChildContext() { return {message : this.state.message} }
Greeting.contextTypes = { message : T.string }
componentDidCatch() { this.setState({error:true}}; }
state = { error : false };
render() { if (this.state.error) { return <ErrorComponent> } return <Home/> }
export function Home(props) { return ( <React.Fragment> <AppIntro /> <h2> {props.message } </h2> </React.Fragment> )}
export const App = styled.div` text-align: center; `
export default function Layout({title, renderContent}) { return (<App> ... </App>) }
<Layout title="some stuff" renderContent={() => (... some stuff ... )}