props con function props con class
//A PARTIR DEL ES6 SE PUEDE YA COMPORTAR COMO CASI LA FUNCTION
class App extends Component {
...
}
function Search(props) { class Search extends Component {
const { value, onChange, children } = props; render() {
return ( const { value, onChange } = [Link];
<form>{children} //Se usa este lugar
<input return (
type="text" <form>
value={value} <input
onChange={onChange} type="text"
/> value={value}
</form> onChange={onChange}
); />
} </form>
);
}
}
function Search({ value, onChange, children }) {
return ( const list = [
<form> {
{children} title: 'React',
<input url: '[Link]
type="text" author: 'Jordan Walke',
value={value} num_comments: 3,
onChange={onChange} points: 4,
/> objectID: 0,
</form> },
); ...
} ];
//A EXPRESIÓN USAREMOS LA FLECHA
const Search = ( { value, onChange, children } ) => {
return (
<form>
{children}
<input
type="text"
value={value}
onChange={onChange}
/>
</form>
);
}
class App extends Component {
constructor(props) {
super(props);
}
[Link] = {
list: list,
};
...
render() {
return (
<div className="App">
{
[Link](
/*(*/item/*)*/ =>
/*{return(//->return opcional*/
<div key={[Link]}>
<span>
<a href={[Link]}>{[Link]}</a>
</span>
<span>{[Link]}</span>
<span>{item.num_comments}</span>
<span>{[Link]}</span>
</div>
/*})//fin return opcional*/
)
}
</div>
);
}
}
Usando Class
// ES5
[Link] = {
list: list,
};
// ES6
[Link] = {
list,
};
React Estados React Estados
Usando function Usando Class
import React from 'react';
import { useState } from 'react'; import {Component} from 'react';
function Counter() { class App extends Component {
constructor(props) {
const [counter, setCounter] = useState(0); super(props);
[Link] = {
return ( list,
<main> };
[Link] = [Link](this);
<p>Clicks: {counter}</p> }//fin constructor
<button onClick={ () => setCounter(value => value + 1) }> onDismiss(id) {
Increment ...
</button> }
</main> render() {
); ...
} }
}
Con start class ExplainBindingsComponent extends Component {
function Counter({ start }) { constructor() {
const [counter, setCounter] = useState(start); super();
return ( [Link] = [Link](this);
<main> [Link] = [Link](this);
<p>Counter: {counter}</p> }
<button doSomething() {
onClick={() => setCounter(value => value + 1)} // do something
>Increment</button> }
</main> doSomethingElse() {
); // do something else
} }
function App() { ...
return ( }
<>
<Counter start={0} />
<Counter start={123} />
<Counter start={-64} />
</>
);
}
Simple calculator class ExplainBindingsComponent extends Component {
constructor() {
import { useState } from 'react'; super();
const OPERATORS = { [Link] = [Link](this);
ADDITION: (a, b) => a + b, }
SUBTRACTION: (a, b) => a - b, onClickMe() {
PRODUCT: (a, b) => a * b, [Link](this);
}; }
function Calculator({a, b}) {
const [operator, setOperator] = useState( () => [Link] ); render() {
return ( return (
<main> <button
<h1>Calculator</h1> onClick={[Link]}
<button type="button"
onClick={ () => setOperator(()=>[Link]) } >Click Me</button>
>Add</button> );
<button }
onClick={() => setOperator(() => [Link])} }
>Subtract</button>
<button
onClick={() => setOperator(() => [Link])}
>Multiply</button> class App extends Component {
<p> constructor(props) {
Result of applying operator to {a} and {b}: super(props);
<code> {operator(a, b)}</code> [Link] = {
</p> list,
</main> searchTerm: '',
) };
} [Link] = [Link](this);
function App() { [Link] = [Link](this);
return <Calculator a={7} b={4} />; }
} onSearchChange() {
export default App; [Link]({ searchTerm: [Link] });
}
render() {
const { searchTerm, list } = [Link];
return (
<div className="App">
<form>
<input
type="text"
value={searchTerm}
onChange={[Link]}
/>
</form>
{[Link](...).map(item =>
...
)}
</div>
);
}
}
//DESTRUCTURING
// ES5
var searchTerm = [Link];
var list = [Link];
// ES6
const { searchTerm, list } = [Link];
class App extends Component {
constructor(props) {
super(props);
[Link] = {
result: null,
searchTerm: DEFAULT_QUERY,
};
[Link] = [Link](this);
[Link] = [Link](this);
[Link] = [Link](this);
}
setSearchTopStories(result) {
[Link]({ result });
}
componentDidMount() {
const { searchTerm } = [Link];
fetch(`${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${searchTerm}`)
.then(response => [Link]())
.then(result => [Link](result))
.catch(error => error);
}
...
render() {
const { searchTerm, result } = [Link];
if (!result) { return null; }
return (
<div className="page">
...
<Table
list={[Link]}
pattern={searchTerm}
onDismiss={[Link]}
/>
</div>
);
}
}
Functional component (Estados) Class-based component (Estados)
state = {
const [counter, setCounter] = useState(0); counter: 0,
}
Este es el caso si el estado se inicializa a un valor estático Cuando inicializamos el estado a un valor estático aquí, podemos
estático. podemos utilizar un miembro de la clase.
constructor(props) {
[Link] = {
const [counter, setCounter] = useState(initialValue); counter: [Link],
};
}
Este es el caso si el estado se inicializa a un valor dinámico Aquí tenemos que acceder a la propiedad en el constructor
de una propiedad. e inicializar el estado usando
[Link].
<p> <p>
Counter: {counter} Counter: {[Link]}
</p> </p>
onClick = { () => setCounter(0) } onClick = { () => [Link]({ counter: 0 }) }
Si estamos estableciendo el estado a un valor fijo, podemos Hacemos lo mismo aquí, excepto que tenemos que
utilizar la variante no funcional del setter. convertirlo en un objeto.
onClick = { () => onClick = { () =>
setCounter( [Link](
value => value + 1 ( {counter} ) => ( {counter: counter + 1} )
) )
} }
Si usamos una función actualizadora, simplemente usamos el valor Si estamos estableciendo el estado a un valor dinámico
valor antiguo y devolvemos uno nuevo usando el tipo basado en el estado actual, podemos utilizar la variante
que tengamos en el estado. actualizador funcional del setter pero tenemos que
tenemos que devolver un objeto basado en el estado anterior
objeto.
Profe Aura Profe Aura
import React from "react";
export default function Form() { export default class Demo extends [Link] {
constructor(){
const [form, setForm] = [Link]({ super()
name:'', [Link] = {
description:'', name:'',
image:'' description:'',
}) image:''
} }
}
hola = (info) => {
[Link]({ ...[Link], info })
}
render(){
return (
<div>
</div>
)
}
}
Ejercicio combinando tanta las function y class
Para crear la app react, en el terminal se escribe
npx create-react-app nombre_de_la_app
Una vez creada, nos entramos a la carpeta(nombre_de_la_app) que se creó, y ya la podemos lanzar al navegador, escribiendo en la terminal
npm start
const Star = ({ selected = false, onSelect = f => f }) => (
<FaStar color={selected ? "red" : "grey"} onClick={onSelect} />
);
import React, { useState } from "react"; import React, { Component } from "react";
import { FaStar } from "react-icons/fa";
export default function StarRating({ totalStars = 5 }) { export default class StarRating extends Component {
const [selectedStars, setSelectedStars] = useState(0); constructor(props) {
return ( super(props);
<> [Link] = {
{ createArray(totalStars).map( starsSelected: 0
(n, i) => ( };
<Star [Link] = [Link](this);
key={i} }
selected={selectedStars > i} change(starsSelected) {
onSelect={() => setSelectedStars(i + 1)} [Link]({ starsSelected });
/> }
) render() {
) const { totalStars } = [Link];
} const { starsSelected } = [Link];
<p> return (
{selectedStars} of {totalStars} stars <div>
</p> { [...Array(totalStars)].map(
</> (n, i) => (
); <Star
} key={i}
selected={i < starsSelected}
onClick={() => [Link](i + 1)}
/>
)
)
}
<p>
{starsSelected} of {totalStars} stars
</p>
</div>
);
}
}
//Profesor
Estados y Ciclo
//ini carpeta components
components:
//En file [Link]:
import React from "react"
//import {Component} from "react"
const disminuir = () => {
};
class EstadoClase extends [Link]{
//class EstadoClase extends Component{
//Inicia constructor
constructor(props){
super(props)
//Mio que me ayudó hacer cosas no es Estado(no sé todavía)
//[Link] = [Link];
//[Link] = [Link];
//Profe pone para los estados
[Link] = {
count: 0,
//Podemos poner más atributos que queramos cambiar
nombre: 'Alan',
};//SI con [Link] es que funciona
//Viene lo que me servió para hacerlo por local de aquí
//Profe pone y pone como comentario las líneas 21..27 y cambia la línea del render en la expresión
//de funcion aumentar()
//[Link] = 0;//NO FUNCIONA no renderiza solo queda en interno lo que aumenta
//Yo
//[Link]
//En las functions
/*
function handleChange(event) {
[Link]({
username: [Link],
() => {
[Link]();
},
})
}
*/
/*function disminuir(params) {
}*/
}
//Fin constructor
//Lo que sigue se dispara luego de cargar en pantalla real
componentDidMount() {
[Link]("El componente se ha montado correctamente")
//Esta funcion se ejecuta cuando ya termina de montar y se va usar
//Se la puede poner luego del render() sin problema
}
componentDidUpdate() {
[Link]('Luego de Actualizar State o nuevo envio de props se ejecuta este DidUpdate')
}
//Cuando monto componente pido algo al servidor y me voy, y ya no veré esa vista por eso lo pongo en State
componentWillUnmount() {
//Uno de sus usos -> borro todo lo que dejé guardado en el estado
}
//TODO ESTOS TEMAS ES LO QUE SE CONOCE COMO CICLO DEL COMPONENTE
render() { {/*<-Igual me toca revisar documentación sobre esta forma contraída*/}
//Forma larga
//render() {
// return (
// Instrucciones
// )
//}
//Instrucciones para la forma corta contraída
const aumentar = () => {
/*[Link]({count: [Link] + 1})*/ // SI (lo comento para hacerlo mas completo con callback)
//Lo siguiente, explico en línea 29 o viene de ahí el poner lo siguiente, en reemplazo
//de la línea anterior(la pone como comentario)
//[Link] = [Link] + 1; //NO(y cambio donde lo muestra (lin79->cambia contenido yo le comenté))(NO)
//Yo
//[Link] =
/*MODO COMPLETO CON CALLBACK para usar el dato update por ahí mismo
//Observación cuando necesite usar inmediatamente ese count actualizado debe implementar o añadirle
//una callback osea quedaría así*/
[Link]( {count: [Link] + 1} , () => {
[Link]([Link]);
} )
/**///Fin con callback
};
const disminuir = () => {
[Link]({count: [Link] - 1})
//Si se desea que no baje al llegar a 0 y se estanque se antepone [Link] > 0 osea:
//[Link] > 0 && [Link]({count: [Link] - 1})
}
return(
<>
<h1>Contador con estados (forma con Clase)</h1>
<h3>{[Link]}</h3>{/*<-SI Queda.<-esto funciona */}
{/*<h3>{[Link]}</h3>*/}{/*<-NO le funcionó por ende volvió a lo que funciona*/}
<button onClick={disminuir}>-</button>
<button onClick={aumentar}>+</button>
</>
)
}
}
export default EstadoClase;
//fin carpeta components
//ini File [Link]
import './[Link]'
import EstadosClase from './components/[Link]'
function App(){
return (
<div className="App">
<EstadosClase />
</div>
)
}
//fin File [Link]
//WAY DATA
//CARPETA components
//ini [Link]:
const Card = (props) => {
return (
<>
<h3>{[Link]}</h3>
<h3>{[Link]}</h3>
</>
);
};
export default Card;
//fin Card
//ini [Link]:
import Card from './Card'
const Cards = (props) => {
return (
<>{
[Link](user=>{
return <Card name={[Link]} email={[Link]} />;
})
}</>
)
};
export default Cards;
//fin Cards
//ini [Link]
import { useState } from 'react';
const SearchBar = (props) => {
const [id, setId] = useState('');
/*const handelClick = () => {
[Link](id)
};*/ //<-lo puso directo en la línea del button
const handleChange = (event) => {
setId([Link]);
};
return (
<>
<input type='text' onChange={handleChange} />
<button onClick={ ()=>{ [Link](id) } }>Buscar</button>
</>
)
};
export default SearchBar
//fin [Link]
//Fuera de components
//ini [Link]
import './[Link]'
//HOOKS es para los funcionales, funciones de react que salvaran para hacerlo
//con functions components entonces hooks useState
import {useState} from 'react';
import Cards from './components/Cards';
import SearchBar from './components/SearchBar';
function App() {
/*constructor(props) {
super(props)
}*///<- Como no tengo constructor entonces
//[users, setUsers]<- distractory de array
const [users, setUsers] = useState([]);
//a partir de ahora tengo un estado llamado users que es un array vacio
//y setUsers es la funcion encargada de modificar ese estado y ya
//Con data
/*
const [users, setUsers] = useState([
{name: 'Jorge', email:'jvega@[Link]'},//<-quitamos esto y ahora lo traeremos de un servidor real
]);
*/
const searchUser = (id) => {
fetch(`[Link]
.then( (res) => [Link]() )
.then( (data) => setUsers([...users, data]) ) // data el objeto del usuario
};
//users sería characters del proyecto integrador
return (
<div className="App">
<SearchBar onSearch={searchUser} />
{/*users es el estado y se lo paso como props*/}
<Cards users={users} />
</div>
);
}
export default App;
//fin App
