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>)