react componentes

componentes son funciones que reciben datos(propiedades) y devuelven elementos de React.

por convencion el nombre de los componentes empiezan en mayusculas, entonces

function Saludo(props){
   return <h1>hola {props.name} !! </h1>;
}

ReactDOM.render(<Saludo name="juan"/>, document.getElementById("bloque"));

en el browser aparecera:

hola juan

Si quisieras reutilizar este componente para imprimir varios saludos, simplemente lo tendriamos que llamar las veces que querramos dentro de una etiqueta contenedora, asi:

ReactDOM.render(<Saludo name="juan"/><Saludo name="pedro"/><Saludo name="luis"/>, document.getElementById("bloque"));

con estos conceptos, se pueden crear bloques de interface de usuario, veamos un ejemplo
un bloque con la foto y el nombre de un usuario....puede aparecer cuando hace un comentario...cuando se loguea...etc etc..

usando sintaxis de ecmsscript6...las functions la escribiriamos asi

const User =props=>{
   return (
<div>
<img src={props.img} alt={props.name}></img><p>{props.name}</p>
</div>
   );
};

ReactDOM.render(<User img="https://static-2.gumroad.com/res/gumroad/profiles/1b4a11533e4e2b8339d7fcda0e0373eb/original/kyle3B.png" name="webster"/>, document.getElementById("bloque"));



podemos ahora separar lo que hicimos antes en 2 componentes, uno para la imagen y otro para el nombre,

const Avatar = props => <img src={props.user.img} alt={props.user.name}></img>;// o { return <img src={props.img} alt={props.name}></img>;}
const UserName = props => <p>{props.user.name}</p>;

const User = props =>{
return (<div>
 <Avatar user={props.usuario} />
 <UserName user={props.usuario} />
   </div>
);
}
const myUser = {
name : "lorde",
img : "http://www.thissongslaps.com/wp-content/uploads/2013/09/Royals-DOCO-Remix.jpg"
}

ReactDOM.render(<User usuario={myUser} />, document.getElementById("bloque"));


explicacion:
como los componentes Avatar y UserName retornan una sola expresion, podemos usar la sintaxis del codigo, sino se puede escribir como siempre
{ return <blablabla>;}

como son componentes que sabemos se van a usar en otros mas grandes, usamos un elemento intermedio del cual se sacaran los datos, en este caso lo llamamos user, por eso escribimos
<p>{props.user.name}</p>;

eso quiere decir que el componente superior nos debera enviar una propiedad llamada user

  <Avatar user={props.usuario} />
que a su vez toma los valores de la propiedad usuario que nos envian desde el render

<User usuario={myUser} />,

myUser seria el objeto