Write some component classes...
class Counter extends React.Component { constructor() { super() this.state = { count: 0 } } componentDidMount() { this.interval = setInterval(() => { this.setState(state => ({ count: state.count + 1 })) }, 1000) } componentWillUnmount() { clearInterval(this.interval) } render() { return ( <center> <h3> {this.state.count} </h3> </center> ) } }
Or some pure functional components...
() => ( <h3> So functional. Much wow! </h3> )
Or just some JSX code!
<h3> Hello World! </h3>
If you want to demo a couple of components in tandem, without evaluating a single one inline, you can use the "noInline" prop and call "render".
const Wrapper = ({ children }) => ( <div style={{ background: 'papayawhip', width: '100%', padding: '2rem' }}> {children} </div> ) const Title = () => ( <h3 style={{ color: 'palevioletred' }}> Hello World! </h3> ) render( <Wrapper> <Title /> </Wrapper> )