Componentes funcionales y de clase
Componentes funcionales
Estos componentes son màs consisos ,es una funcion de js , retorna un elemento de react, màs facil de leer ,escribir , implementar., hacemos lo mismo que los componentes de clase
Componentes de clase
Se podia utilizar en versiones anteriores de react.
Componente
Es una parte de la interfaz de usuario que es independiente y reusable.
Caracteristica de los componentes funcionales
Debe retornar un elemento React JSX.
Debe comenzar con una letra mayuscula.
Puede recibir valores si es necesario.
Props es una abreviatura de decir propiedades , props es un argumento que puede recibir un componente en react.
Componentes pueden crear otros componentes, componente A props , componente B podemos enviar ciertos valores o argumentos y el componente B los usa.
Los props solo pueden ser enviados de padre a hijo.
Componente de clase
Clase es6 (jas moderno) que retorna un elemento jsx.
Caracterisiticas de los componentes clase
Debe extender react component.
Debe tener un mètodo render() para retornar unelemento jsx.
Puede recibir valores si es necesasrio.
Cuanado utilizamos una clase debemos utilizar this se refiere a ese componente individual .
Estado state representacion en js del conjunto de propiedades de un componente y sus valores actuales.
Anteriormente usabamos componentes de clase para podertrbajar con estados de nuestros componentes.
Hoks nos permiten agregarle cierto estados a nuestros componentes funcionales y otros aspectos de react momentos de la vida de un componente.
Lo podemos hacer sin escribir un componente de clase , esto nos permite escribir còdigo mucho màs conciso y facil de entender,
EventListener funcion que es ejecutada cuando ocurre un evento espesifico , tambien podemos referirnos a esta funcion como EventHandler , que se ejecute cuando solo hagamos click al boton.
jsx extencion de react para la sintaxis de javaScript , nos permite describir còmo se veràn los componentes usando una estructura similar html.
Ventajas de usar jsx
Estructura màs facil de visualizar.
Errores y advertencias màs ùtiles.
Jsx es opcional.
const elemento = <h1>Hola mundo</h1>;
Elementoa de jsx
Elemento es unidades màs pequeñas en react ,definen lo que se ve en la pantalla.
Los componentes de react estan hechos de elementos.
React doom
Paquete que facilita la interaccion y actualizacion del dom en aplicaciones react.
Dom , object document model representacion del navegador de todos los elementos que conforman una pàgina o aplicaciòn web.
El atributo cambia con class
<h1 className="desarrollo-web"></h1>
Etiueta for en jsx cambia por htmlFor
<label htmlFor="css">css</label>
En css cambia
CSS
background-Image
JSX
backgroundImage
background-color
backgroundColor
font-family
fontFamily
Estilo en linea
<div style={{color:'yelloe'}}>Estilo en linea</div>
primer llave insertar js
segunda llave definimos objeto de js
accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap
Estructura de un componente
En jsx los elementos pueden ser anidados para formar estructuras màscomplejas.
Agregar un elemento dentro de otro elemento root por ejemplo
const elemento = <h1>Hola mundo</h1>;
ReactDOM.render(
elemento,
Contenedor para ese elemento
document.getElementById('root')
);
Mostramos un elemento especifico , dentro de otro elemento.
render es un mètodo , con 2 argumentos.
Reemplazar elemento
<div id="root"></div>
Para utilizar ReactDOM debemos importarlo
import ReactDOM from 'react-dom';
variable para
referirnos
al paquete paquete
Self -Closing Tags
Etiquetas que se cierran automaticamente , solo poseee una etiqueta de apertura ya que no contiene texto u otros elementos.
<img src="logo.png" alt="Mi imagen" />
En jsx incluimos JavaScript
let adejetivo = "Interesante";
<p>React es {sdjrtivo}</p>
let nombre = "Gino";
<p>Su nombre es: {nombre.toUpperCase()}</p>
Crear un componentes y crear su estructura components , Testimonio.js
import React from "react";
function Testimonio() {
return (
<div className='contenedor-testimonio'>
<img className='imagen-testimonio' src={require('../images/1.jpg')} alt='Foto 1'/>
<div className='contenedor-texto-testimonio'>
<p className='nombre-testimonio'>Cuadro 1 arte</p>
<p className='cargo-testimonio'>Profesor de historia del arte</p>
<p className='texto-testimonio'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Nulla pellentesque dignissim enim sit amet. Condimentum vitae sapien pellentesque habitant morbi. Faucibus turpis in eu mi bibendum neque egestas congue quisque. At in tellus integer feugiat. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Risus feugiat in ante metus dictum. Tristique risus nec feugiat in fermentum posuere. Cursus vitae congue mauris rhoncus aenean. Cursus sit amet dictum sit amet justo. In cursus turpis massa tincidunt dui ut ornare lectus sit.</p>
</div>
</div>
);
}
En react hay 2 tipos de exportacion
Nombrada , varios elementos de un mismo archivo.
App.js
import {Testimonio} from './components/Testimonio';
Textimonio.js
export function Testimonio() {
Por defecto el unico elemento que se va a exportar
export default Testimonio;
Mostar su contenido
App.js
import './App.css';
import Testimonio from './components/Testimonio';
function App() {
return (
<div className="App">
<Testimonio/>
</div>
);
}
export default App;
Testimonio.js
import React from "react";
function Testimonio() {
return (
<div className='contenedor-testimonio'>
<img className='imagen-testimonio' src={require('../images/1.jpg')} alt='Foto 1'/>
<div className='contenedor-texto-testimonio'>
<p className='nombre-testimonio'>Cuadro 1 arte</p>
<p className='cargo-testimonio'>Profesor de historia del arte</p>
<p className='texto-testimonio'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Nulla pellentesque dignissim enim sit amet. Condimentum vitae sapien pellentesque habitant morbi. Faucibus turpis in eu mi bibendum neque egestas congue quisque. At in tellus integer feugiat. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Risus feugiat in ante metus dictum. Tristique risus nec feugiat in fermentum posuere. Cursus vitae congue mauris rhoncus aenean. Cursus sit amet dictum sit amet justo. In cursus turpis massa tincidunt dui ut ornare lectus sit.</p>
</div>
</div>
);
}
export default Testimonio;
Asignar estilos con css
App.css estilos generales
* {
margin:0;
padding:0;
}
html , body {
font-size: 18px;
background-color: #0C0E12;
color: #ffffff;
}
h1 {
max-width: 940px;
font-size: 2.5em;
color: #ffffff;
font-family: Lato , sans-serif;
font-weight: 800;
line-height: 1.1;
margin: 40px 0;
}
.App{
min-height: 100vh;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
}
.contenedor-principal{
min-height: 600px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
Testimonio.css
.contenedor-testimonio{
width: 1170px;
height: 368px;
margin: 10px 10px 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: darkgrey;
box-shadow: 0 3px 13px 1px rgb(0 0 0 / 9%);
}
.imagen-testimonio{
height: 100%;
width: auto;
}
.contenedor-texto-testimonio{
text-align: center;
padding: 40px;
font-family: Lato , sans-serif;
line-height: 1.5rem;
width: 100%;
font-size: 18px;
}
.nombre-testimonio{
font-size: 1.3rem;
color: #000;
}
.cargo-testimonio{
font-size: 1.3rem;
margin-top: 15px;
padding-bottom: 30px;
}
.text-testimonio{
font-size: 1.1rem;
text-align: justify;
}
Recibir props de un componente
function Testimonio(props) {
return (
<div className='contenedor-testimonio'>
<img className='imagen-testimonio' src={require('../images/1.jpg')} alt='Foto 1'/>
<div className='contenedor-texto-testimonio'>
<p className='nombre-testimonio'>{props.nombre} 1 arte en {props.pais}</p>
<p className='cargo-testimonio'>¨{props.cargo} de historia del arte {props.empresa}</p>
<p className='texto-testimonio'>{props.testimonio}</p>
</div>
</div>
);
}
export defa
Pasar props a un componente , reemplazamos dinamicamente
App.js
<Testimonio
nombre='Pintura'
pais='Alemania'
imagen=''
cargo='Profesora'
empresa='UNIX'
testimonio='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Personalizar la imagen
Plantillas literales ${} insertamos javascript
Testimonio.js
<img className='imagen-testimonio' src={require(`../images/${props.imagen}.jpg`)} alt='Foto 1'/>
App.js
imagen='1'
Reemplazamos el nombre
freeCodeCamp Español. (2022, March 15). Aprende React Desde Cero - Curso de React Con Proyectos [Video]. YouTube. https://www.youtube.com/watch?v=6Jfk8ic3KVk
