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 } = this.props;
<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: 'https://facebook.github.io/react/',
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);
}
this.state = {
list: list,
};
...

render() {
return (
<div className="App">
{
this.state.list.map(
/*(*/item/*)*/ =>
/*{return(//->return opcional*/
<div key={item.objectID}>
<span>
<a href={item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>{item.num_comments}</span>
<span>{item.points}</span>
</div>
/*})//fin return opcional*/
)
}
</div>
);
}
}
Usando Class
// ES5
this.state = {
list: list,
};
// ES6
this.state = {
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);
this.state = {
return ( list,
<main> };
this.onDismiss = this.onDismiss.bind(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 ( this.doSomething = this.doSomething.bind(this);
<main> this.doSomethingElse = this.doSomethingElse.bind(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 = { this.onClickMe = this.onClickMe.bind(this);
ADDITION: (a, b) => a + b, }
SUBTRACTION: (a, b) => a - b, onClickMe() {
PRODUCT: (a, b) => a * b, console.log(this);
}; }
function Calculator({a, b}) {
const [operator, setOperator] = useState( () => OPERATORS.ADDITION ); render() {
return ( return (
<main> <button
<h1>Calculator</h1> onClick={this.onClickMe}
<button type="button"
onClick={ () => setOperator(()=>OPERATORS.ADDITION) } >Click Me</button>
>Add</button> );
<button }
onClick={() => setOperator(() => OPERATORS.SUBTRACTION)} }
>Subtract</button>
<button
onClick={() => setOperator(() => OPERATORS.PRODUCT)}
>Multiply</button> class App extends Component {
<p> constructor(props) {
Result of applying operator to {a} and {b}: super(props);
<code> {operator(a, b)}</code> this.state = {
</p> list,
</main> searchTerm: '',
) };
} this.onSearchChange = this.onSearchChange.bind(this);
function App() { this.onDismiss = this.onDismiss.bind(this);
return <Calculator a={7} b={4} />; }
} onSearchChange() {
export default App; this.setState({ searchTerm: event.target.value });
}
render() {
const { searchTerm, list } = this.state;
return (
<div className="App">
<form>
<input
type="text"
value={searchTerm}
onChange={this.onSearchChange}
/>
</form>
{this.state.list.filter(...).map(item =>
...
)}
</div>
);
}
}
//DESTRUCTURING
// ES5
var searchTerm = this.state.searchTerm;
var list = this.state.list;
// ES6
const { searchTerm, list } = this.state;

class App extends Component {

constructor(props) {
super(props);
this.state = {
result: null,
searchTerm: DEFAULT_QUERY,
};
this.setSearchTopStories = this.setSearchTopStories.bind(this);
this.onSearchChange = this.onSearchChange.bind(this);
this.onDismiss = this.onDismiss.bind(this);
}
setSearchTopStories(result) {
this.setState({ result });
}
componentDidMount() {
const { searchTerm } = this.state;
fetch(`${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${searchTerm}`)
.then(response => response.json())
.then(result => this.setSearchTopStories(result))
.catch(error => error);
}
...
render() {
const { searchTerm, result } = this.state;
if (!result) { return null; }
return (
<div className="page">
...
<Table
list={result.hits}
pattern={searchTerm}
onDismiss={this.onDismiss}
/>
</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) {
this.state = {
const [counter, setCounter] = useState(initialValue); counter: props.initialValue,
};
}
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
this.state.
<p> <p>
Counter: {counter} Counter: {this.state.counter}
</p> </p>

onClick = { () => setCounter(0) } onClick = { () => this.setState({ 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( this.setState(
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 React.Component {
constructor(){
const [form, setForm] = React.useState({ super()
name:'', this.state = {
description:'', name:'',
image:'' description:'',
}) image:''
} }
}
hola = (info) => {
this.setState({ ...this.state, 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);
<> this.state = {
{ createArray(totalStars).map( starsSelected: 0
(n, i) => ( };
<Star this.change = this.change.bind(this);
key={i} }
selected={selectedStars > i} change(starsSelected) {
onSelect={() => setSelectedStars(i + 1)} this.setState({ starsSelected });
/> }
) render() {
) const { totalStars } = this.props;
} const { starsSelected } = this.state;
<p> return (
{selectedStars} of {totalStars} stars <div>
</p> { [...Array(totalStars)].map(
</> (n, i) => (
); <Star
} key={i}
selected={i < starsSelected}
onClick={() => this.change(i + 1)}
/>
)
)
}
<p>
{starsSelected} of {totalStars} stars
</p>
</div>
);
}
}
//Profesor
Estados y Ciclo

//ini carpeta components

components:
//En file Conceptos.jsx:
import React from "react"
//import {Component} from "react"

const disminuir = () => {

};

class EstadoClase extends React.Component{

//class EstadoClase extends Component{
//Inicia constructor
constructor(props){
super(props)

//Mio que me ayudó hacer cosas no es Estado(no sé todavía)

//this.nombre = props.nombre;
//this.edad = props.edad;

//Profe pone para los estados

this.state = {
count: 0,

//Podemos poner más atributos que queramos cambiar

nombre: 'Alan',
 };//SI con this.state 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()
//this.count = 0;//NO FUNCIONA no renderiza solo queda en interno lo que aumenta
//Yo
//this.contar

//En las functions

/*
function handleChange(event) {
this.setState({
username: event.target.username,
() => {
this.validateUsername();
},
})
}
*/

/*function disminuir(params) {

}*/

}
//Fin constructor

//Lo que sigue se dispara luego de cargar en pantalla real

componentDidMount() {
console.log("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() {
console.log('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 = () => {

/*this.setState({count: this.state.count + 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)
//this.count = this.count + 1; //NO(y cambio donde lo muestra (lin79->cambia contenido yo le comenté))(NO)
//Yo
//this.contar =

/*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í*/
this.setState( {count: this.state.count + 1} , () => {
console.log(this.state.count);
} )
/**///Fin con callback
};
const disminuir = () => {
this.setState({count: this.state.count - 1})
//Si se desea que no baje al llegar a 0 y se estanque se antepone this.state.count > 0 osea:
//this.state.count > 0 && this.setState({count: this.state.count - 1})
}

return(
<>
<h1>Contador con estados (forma con Clase)</h1>
<h3>{this.state.count}</h3>{/*<-SI Queda.<-esto funciona */}
{/*<h3>{this.count}</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 App.js

import './App.css'
import EstadosClase from './components/Conceptos.jsx'

function App(){
 return (
<div className="App">
<EstadosClase />
</div>
)
}
//fin File App.js

//WAY DATA
//CARPETA components
//ini Card.jsx:
const Card = (props) => {
return (
<>
<h3>{props.name}</h3>
<h3>{props.email}</h3>
</>
);
};
export default Card;
//fin Card
//ini Cards.jsx:
import Card from './Card'

const Cards = (props) => {

return (
<>{
props.users.map(user=>{
return <Card name={user.name} email={user.enail} />;
})
}</>
)
};

export default Cards;

//fin Cards

//ini SearchBar.jsx
import { useState } from 'react';

const SearchBar = (props) => {

const [id, setId] = useState('');

/*const handelClick = () => {

props.onSearch(id)
};*/ //<-lo puso directo en la línea del button

const handleChange = (event) => {

setId(event.target.value);
};

return (
 <>
<input type='text' onChange={handleChange} />
<button onClick={ ()=>{ props.onSearch(id) } }>Buscar</button>
</>
)
};

export default SearchBar

//fin SearchBar.jsx
//Fuera de components
//ini App.js
import './App.css'

//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@mail.com'},//<-quitamos esto y ahora lo traeremos de un servidor real
]);
 */

const searchUser = (id) => {

fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
.then( (res) => res.json() )
.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