React: componentes y children

In this example below you will see how to do a React: componentes y children with some HTML / CSS and Javascript

This awesome code was written by adalab, you can see more from this user in the personal repository.
You can find the original code on
Copyright adalab ©
  • HTML
  • CSS
  • JavaScript
    <div id="react-root"></div>

/*Downloaded from */
    #react-root {
  display: flex;
  height: 100vh;
  width: 100vw;

  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.25);

.horizontal-center {
  text-align: center;

/*Downloaded from */
    class Popup extends React.Component {
  render() {
    return (
      <div className={ `alert alert-${this.props.styling}` } role="alert">
        { this.props.children }
// this.props.styling value from Bootstrap classes: primary, secondary, success, info, warning, danger, link

  <Popup styling="info">
    <h1 className="horizontal-center">Welcome</h1>
      Thank you for visiting our webpage!
      We hope you enjoy our new shiny site!