personas:johnny:proyectos:anotaciones-react
Diferencias
Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anteriorRevisión previaPróxima revisión | Revisión previa | ||
personas:johnny:proyectos:anotaciones-react [2017/01/10 20:40] – kz | personas:johnny:proyectos:anotaciones-react [2017/01/10 21:52] (actual) – kz | ||
---|---|---|---|
Línea 59: | Línea 59: | ||
</ | </ | ||
- | ** No olvidar la coma desde de escribir las etiquetas ** | + | ** No olvidar la coma después |
+ | |||
+ | ** Utilizando JSX ** | ||
+ | |||
+ | La sintaxis propia de react crear los modulos que luego se referenciaran al html. | ||
+ | |||
+ | ** Asi creamos un modulo, la variable es importante empezar con mayuscula porque es un objeto de javascript** | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | // crearemos un objeto de JSX | ||
+ | var Saludo = React.createClass({ | ||
+ | render: function(){ | ||
+ | return( | ||
+ | <h1> ¡Utilizando JSX! </ | ||
+ | ) | ||
+ | } | ||
+ | }) | ||
+ | |||
+ | // ahora este objeto de JSX es llamado en la función de React render | ||
+ | ReactDOM.render( | ||
+ | < | ||
+ | <Saludo /> | ||
+ | <Saludo /> | ||
+ | <Saludo /> | ||
+ | </ | ||
+ | ); | ||
+ | |||
+ | </ | ||
+ | |||
+ | ** Propiedades de los componentes ** | ||
+ | |||
+ | Miremos ahora esto: | ||
+ | |||
+ | <code javascript> | ||
+ | |||
+ | |||
+ | // crearemos un objeto de JSX | ||
+ | var Saludo = React.createClass({ | ||
+ | render: function(){ | ||
+ | return( | ||
+ | < | ||
+ | <h1> ¡el título del componente! </ | ||
+ | <p> | ||
+ | Buen día {this.props.nombre} < | ||
+ | < | ||
+ | </p> | ||
+ | </ | ||
+ | ); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | // ahora este objeto de JSX es llamado en la función de React render | ||
+ | ReactDOM.render( | ||
+ | < | ||
+ | <Saludo nombre=" | ||
+ | mexicano | ||
+ | </ | ||
+ | <Saludo nombre=" | ||
+ | koreano | ||
+ | </ | ||
+ | <Saludo nombre=" | ||
+ | colombiano | ||
+ | </ | ||
+ | </ | ||
+ | , | ||
+ | ); | ||
+ | |||
+ | </ | ||
+ | |||
+ | Cuando usamos la función de react para renderizar, los objetos que se usan pueden tener propiedades. | ||
+ | |||
+ | Por ejemplo vemos que al instanciar el objeto Saludo de JSX, agregamos un atributo *nombre* con un valor. | ||
+ | Para que este valor pueda ser mostrado en la pagina, en el objeto de JSX se tiene que llamar a ese parametro. Escribiendo this.props.nombre para llamar al atributo. Tambien notamos que dentro del objeto, se escribe la ciudadania de la persona (mexicano, colombiano, etc), para referenciar este otro atributo al JSX, se usa this.props.children, | ||
+ | |||
- |
personas/johnny/proyectos/anotaciones-react.1484080855.txt.gz · Última modificación: 2017/01/10 20:40 por kz