Conceptos básicos React
Conceptos básicos de React
El objetivo de este tutorial es explicar los conceptos básicos de una aplicación en React. Para tener una visión más detallada y profundizar en temas avanzados de React se recomiendan los siguientes enlaces :
- Curso básico de React en Codecademy
- Curso avanzado de React en Codecademy
- Tutorial de React Oficial
- Documentación oficial de React
- Curso de React en PluralSight ( De paga )
- Cursos de React en egghead
Componentes de React
React tiene dos tipos de componentes: Componentes de estado o contenedores y Componentes sin estado o de presentación. Cada componente tiene una función diferente.
Componentes contenedores
Se caracterizan por ser los componentes principales de React. Éstos se encargan de renderizar a los componentes de presentación y contienen toda la lógica de nuestra aplicación. Estos componentes deben ser clases de ECMA 6 y deben contener un estado de la app.
Nota importante: Todo componente de React debe ser llamado con la primera letra en mayúscula.
Los componentes contenedores deben contener un método llamado render el cual debe retornar un JSX . Un JSX se define de la siguiente manera:
// JSX must be encapsulated into ( ) parenthesis
const myJSX = ( <h1> Some html { some JS code here } </h1> );
Nota: Cualquier JSX debe ser encapsulado o debe retornar solo un bloque de HTML. Para retornar más de un elemento html, todo el código debe ser encapsulado en un div o en React.Fragment.
import React, {Component} from 'react';
import {PresentationComponent} from './someWhere';
class Container extends Component {
constructor(props){
super(props);
this.state = {
someState: 'someValue'
}
}
// Some Logic (functions) for example:
handleSubmit = () => {
//some logic when somebody submit some form
}
render() {
return (
<div>
<PresentationComponent
someProp={this.state.someState}
/>
</div>
);
}
}
export default Container;
Componentes de presentación
La tarea primordial de estos componentes son renderizar elementos html. La información que éstos renderizan y el comportamiento que tienen estos elementos al recibir una acción (por ejemplo al dar clic o al enviar un formulario) proviene de los componentes contenedores. Estos pedazos de información son llamados props.
Como su única tarea es renderizar y no tienen que administrar un estado, estos componentes pueden ser constantes de ECMA 6 .
// React must be in context
import React, {Fragment} from 'react';
export const PresentationComponent = () => (
<Fragment>
{/* More HTML tags */}
</Fragment>
);
Props
Como se mencionó anteriormente, los props son pedazos de información que un componente contenedor envía a un componente de presentación. Es la manera en la que un componente contenedor se comunica con sus componentes de presentación. Una forma de entender props es imaginar que los props son similares a los atributos de un elemento HTML :
<h1 style="color:red;font-size:30px" > Example </h1>
En este ejemplo, nosotros le estamos mandando información a nuestra etiqueta h1 de cómo queremos que sea su estilo. Mediante su atributo style especificamos una serie de estilos. Análogamente podemos decir que los props de React son exactamente lo mismo.
<SomeComponent
style={{color:'red',fontSize:30}}
name="Nombre"
// if you will work with pixels as metric you can pass the prop as number
height={20}
// if not, as string
width="30%"
/>
Nota: Si la información que estamos enviando es un string, podemos mandarla con prop='value' . Cualquier otro tipo de dato es enviado con { } (inyección javascript) prop={20}.
Ejemplo para entender los props
Para entender mejor está información se da el siguiente ejemplo.
Supongamos que tenemos una página en donde queremos hacer un login. Lo primero que debemos hacer es proporcionar una manera de controlar cada vez que nuestros inputs cambien. React trabaja con formularios de una manera distinta que con otras tecnologías. Los formularios de React es un tema avanzado y se puede consultar aquí.
Sin embargo para fines de ilustrar qué son los props, se utilizará un formulario.
import React, {Component} from 'react';
import {SignUpForm} from './someWhere';
import {someApi} from '../api/someApi';
class SignUpPage extends Component {
constructor(props){
super(props);
this.state = {
// We create an object to control our inputs
credential: {
email: '',
password: ''
}
}
}
handleChange = e => {
// clone our state
const credential = Object.assign({},this.state.credential);
// change the value
// e.target.name contains the name of the input we are changing the value, e.target.value contains the value
credential[e.target.name] = e.target.value ;
this.setState({credential});
}
handleSubmit = e => {
// Prevent the default behaviour of submit form
e.preventDefault();
// Here we cal the api that send data to the server
// As we want to log in, we send the data of our inputs ( email and password )
someApi.logIn(this.state.credential);
}
render() {
return (
<div>
<SignUpForm
//These are pieces of information we send to our presentation component
// This information is called props
credential={this.state.credential}
onSubmit={this.handleSubmit}
/>
</div>
);
}
}
export default SignUpPage;
El componente de presentación contendrá solo los inputs. Toda la lógica e información necesaria para que trabajen nuestros inputs será recibida desde el contenedor. Por lo tanto, nuestro componente de presentación queda de la siguiente manera:
// React must be in context
import React from 'react';
// we receive credentials
export const PresentationComponent = ({credentials, onSubmit}) => (
// now we can use our props to render html tags with our info
<form onSubmit={onSubmit} >
<input
type="email"
name='email'
value={credential.email}
/>
<input
type="password"
name='password'
value={credential.password}
/>
<input
type="submit"
value="Enviar"
/>
</form>
);
Como podemos observar, los componentes contenedores proporcionan toda la lógica de nuestro fragmento de app y los componentes de presentación solo contienen JSX.
Comentarios
Publicar un comentario