Ejemplo simple de componente React / Curso Keepcoding

ejemplo-simple-de-componente-react-curso-keepcoding.markdown

Ejemplo simple de componente React / Curso Keepcoding

A Pen by José Manuel Lucas on CodePen.

License.

script.babel

const SimpleComponent = ({ title, children }) => (
  <div className="simpleComponent">
    <h1 className="title">{title}</h1>
    <div className="content">
      {children}
    </div>
  </div>
);

const ComposedComponent = () => (
  <div className="composedComponent">
    <SimpleComponent title="Primer capítulo del curso de React">
      <p>Mediante las propiedades "prop" definimos cómo se debe mostrar nuestro componente</p>
      <p>El contenido pasa como prop "children"</p>
    </Simplecomponent>
    <SimpleComponent title="Segundo capítulo del curso de React">
      <ul>
        <li>No es necesario que el contenido siga la misma estructura</li>
        <li>Hay algunas palabras reservadas en JS, entre ellas "class", por lo que en
          JSX, el atributo equivalente es "className"</li>
      </ul>
    </Simplecomponent>
  </div>
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>