Proyecto nuevo
CMD:
cd arrastramos carpeta
en terminal : npm startnpx create-react-app my-appcd my-app
code .
2-
Eliminamos todas las carpetas que no necesitamos
3-
App.js lo convertimos a App.jsx
4-
import React from 'react';
function App() {
return (
<div className="container">
<h1 className="text-center mt-5">CRUD Simple</h1>
<div className="row">
<div className="col-8">
<h4 className="text-center">Lista de tareas</h4>
<ul className="list-group">
<li className="list-group-item">
<span className="lead">Nombre de la tarea</span>
<button className="btn btn-danger btn-sm float-right mx-2">Eliminar</button>
<button className="btn btn-warning btn-sm float-right">Editar</button>
</li>
</ul>
</div>
<div className="col-4">
<h4 className="text-center">Formulario</h4>
<form>
<input
type="text"
className="form-control mb-2"
placeholder="Ingrese tarea"
/>
<button className="btn btn-dark btn-block" type="submit">Agregar</button>
</form>
</div>
</div>
</div>
);
}
export default App;
Ahora vamos a aplicarle la logica, tenemos que hacer hooks de estado para el input.
1-
<button className="btn btn-dark btn-block" type="submit"
const [tarea, setTarea] = React.useState('')
type="text"
className="form-control mb-2"
placeholder="Ingrese tarea"
onChange={ e => setTarea(e.target.value) }
<form onSubmit={agregaTarea}>
const agregaTarea = (e) => {
e.preventDefault()
if(!tarea.trim()){
console.log('Este campo está vacío')
return
}
console.log(tarea)
setTarea('')
}
6-
type="text"
className="form-control mb-2"
placeholder="Ingrese tarea"
onChange={ e => setTarea(e.target.value) }
value={tarea}
7-Guardar ahora en un array para mostrar:
const [tareas, setTareas] = React.useState([])
8-
const agregaTarea = (e) => {
e.preventDefault()
if(!tarea.trim()){
console.log('Este campo está vacío')
return
}
setTareas([
...tareas,
{id: X, nombreTarea: tarea}
])
console.log(tarea)
setTarea('')
}
9- Generar ID ALEATORIO CON LIBRERIA shortid:
https://www.npmjs.com/package/shortid
Copiar npm y escribir en terminal:
npm i shortidAhora lo llamamos arriba:
import shortid from 'shortid';
10-
setTareas([
...tareas,
{id: shortid.generate(), nombreTarea: tarea}
])
11- Pintar lista de tareas:
<ul className="list-group">
{
tareas.map( item => (
<li className="list-group-item" key={item.id}>
<span className="lead">{item.nombreTarea}</span>
<button className="btn btn-danger btn-sm float-right mx-2">Eliminar</button>
<button className="btn btn-warning btn-sm float-right">Editar</button>
</li>
) )
}
</ul>
ELIMINAR TAREA:
1-
<button
className="btn btn-danger btn-sm float-right mx-2"
onClick={ () => eliminarTarea(item.id) }
>
Eliminar
</button>
2-
Probar la relacion:
const eliminarTarea = (id) => {
console.log(id)
}
3-
const eliminarTarea = (id) => {
const arrayFiltrado = tareas.filter( item => item.id !== id )
setTareas(arrayFiltrado)
}
FORMULARIO EDITAR TAREA:
1- Vamos a activar un MODO EDICION.
const [modoEdicion, setModoEdicion] = React.useState(false)
2-
onClick={ () => editarTarea(item) }
3- Verificar
const editarTarea = (item) => {
console.log(item)
}
4-
const editarTarea = (item) => {
//console.log(item)
setModoEdicion(true)
}
5- Cambiar formulario Operador Ternario
<div className="col-4">
<h4 className="text-center">
{
modoEdicion ? 'Editar Tarea' : 'Agregar Tarea'
}
</h4>
6- Boton agregar /editar
{
modoEdicion ? (
<button className="btn btn-warning btn-block" type="submit">Editar</button>
) : (
<button className="btn btn-dark btn-block" type="submit">Agregar</button>
)
}
7- Agregar value de tarea al input para editar
const editarTarea = (item) => {
//console.log(item)
setModoEdicion(true)
setTarea(item.nombreTarea)
}
8-
<form onSubmit={ modoEdicion ? editaTarea : agregaTarea}>
9-
const editaTarea = (e) => {
e.preventDefault()
if(!tarea.trim()){
console.log('Este campo está vacío')
return
}
}
10- Nos falta el ID para modificar el elemento en cuestion
Crear un nuevo state que se llame id
const [id, setId] = React.useState('')
11- En editarTarea (la 1ra funcion) le pasamos ese id
const editarTarea = (item) => {
//console.log(item)
setModoEdicion(true)
setTarea(item.nombreTarea)
setId(item.id)
}
12- Modificar el array
const editaTarea = (e) => {
e.preventDefault()
if(!tarea.trim()){
console.log('Este campo está vacío')
return
}
const arrayEditado = tareas.map(
item => item.id === id ? {id:id, tarea:nombreTarea} : item
)
setTareas(arrayEditado)
}
const editaTarea = (e) => {
e.preventDefault()
if(!tarea.trim()){
console.log('Este campo está vacío')
return
}
const arrayEditado = tareas.map(
item => item.id === id ? {id:id, nombreTarea:tarea} : item
)
setTareas(arrayEditado)
setModoEdicion(false)
setTarea('')
setId('')
}
<ul className="list-group">
{
tareas.length === 0 ? (
<li className="list-group-item">No hay tareas</li>
) : (
tareas.map( item => (
<li className="list-group-item" key={item.id}>
<span className="lead">{item.nombreTarea}</span>
<button
className="btn btn-danger btn-sm float-right mx-2"
onClick={ () => eliminarTarea(item.id) }
>
Eliminar
</button>
<button
className="btn btn-warning btn-sm float-right"
onClick={ () => editarTarea(item) }
>
Editar
</button>
</li>
) )
)
}
</ul>
Edicion de errores de formulario
1-
const [error, setError] = React.useState(null)
2-
const agregaTarea = (e) => {
e.preventDefault()
if(!tarea.trim()){
console.log('Este campo está vacío')
setError('Escriba algo, porfavor...')
return
}
setTareas([
...tareas,
{id: shortid.generate(), nombreTarea: tarea}
])
console.log(tarea)
setTarea('')
}
3-
const editaTarea = (e) => {
e.preventDefault()
if(!tarea.trim()){
console.log('Este campo está vacío')
setError('Escriba algo, porfavor...')
return
}
const arrayEditado = tareas.map(
item => item.id === id ? {id:id, nombreTarea:tarea} : item
)
setTareas(arrayEditado)
setModoEdicion(false)
setTarea('')
setId('')
}
4-
<form onSubmit={ modoEdicion ? editaTarea : agregaTarea}>
{
error ? <span className="text-danger">{error}</span> : null
}
5-
const agregaTarea = (e) => {
e.preventDefault()
if(!tarea.trim()){
console.log('Este campo está vacío')
setError('Escriba algo, porfavor...')
return
}
setTareas([
...tareas,
{id: shortid.generate(), nombreTarea: tarea}
])
console.log(tarea)
setTarea('')
setError(null)
}
y...
const editaTarea = (e) => {
e.preventDefault()
if(!tarea.trim()){
console.log('Este campo está vacío')
setError('Escriba algo, porfavor...')
return
}
const arrayEditado = tareas.map(
item => item.id === id ? {id:id, nombreTarea:tarea} : item
)
setTareas(arrayEditado)
setModoEdicion(false)
setTarea('')
setId('')
setError(null)
}
Poner proyecto en produccion en hosting gratis en la nube
https://app.netlify.com/teams/yamilapros/sites
En terminal:
Terminamos con el servidor
npm run build
Se creo la carpeta build
Cada vez que se hace un cambio hay que ejecutar npm run build
Sobre la carptea: Reveal in file explorer
La arrastramos a la pagina y nos da un link gratuito !. ;)
csdcdcsd
No hay comentarios:
Publicar un comentario