Despues vamos a crear una carptea, por ejemplo en el escritorio, llamada "proyecto-1"
Ahora vamos a ir a la pagina:
https://create-react-app.dev/docs/getting-started/
Alli tenemos los comandos para iniciar un proyecto.
Ahora, ya tenemos el proyecto, estamos en visual studio code, vamos a abrir el terminal y vamos a ejecutar:
npm run start
Para abrir un servidor, nos lleva al navegador.
Para cerrar el servidor, en la terminal presionamos ctr+c en la barrita blanca y nos pregunta si queremos cerrar.
s
enter
Vamos a la carpeta src, que es donde mas vamos a interactuar.
La carpeta public es donde van a estar los archivos estaticos, y donde mas adelante vamos a poner nuestro Bootstrap.
Vamos a ir a nuestro archivo App.js porque es lo que se va a ver en el front end.
Vamos a ver algo llamado className, asi es como React llama a las clases de Css.
Limpiar la app:
1-Eliminar el header de App.js, no lo vamos a usar.
2- Vamos a borrar el className del div, porque no vamos a usar esa clase.
3-Eliminar de Import archivos CSS y Logo
4- Archivo App.css eliminar porque no vamos a usar ese Css
5-Eliminar archivo App.test.js
6- En el index.css vasmos a configurar archivos de css, e simportante dejarlo, alli CAMBIAMOS LOS ESTILOS
7- El index.js es donde va a hacerse la magia js, de alli vamos a eliminar toda la parte de abajo de serviceworker.unregister() y los comentarios de arriba. y su importacion arriba
8- Eliminamos archivos setup.js y archivo serviceworker.js y logo
Nos quedan:
1- App.js, donde vamos a escribir nuestra app
2- index.css donde estan los archivos css
3- index.js donde se esta renderizando nuestra app
Como funciona?, react toma un div que se llama root
ese div esta en public/index.html
Dentro de ese div react incorpora todo lo que estamos configurando en este caso en App.js
Componente
Vamos a hacer un componente que se llame Parrafo
En carpeta src hacemos una nueva carpeta llamada components
Y dentro vamos a hacer un archivo llamado en este caso Parrafo.jsx
Si escribimos ra y damos click a rafce nos aparece la estructura.
En esa estructura, dentro del div, vamos a meter nuestro párrafo, que es el primer componente.
Lo tenemos que llamar ahora desde App.js:
1-Lo importamos:
import Parrafo from './components/Parrafo'
y ahora, debajo del titulo, dentro del div lo llamamos:
import React from 'react';
import Parrafo from './components/Parrafo'
function App() {
return (
<div>
<h1>Hola mundo desde React Js</h1>
<Parrafo />
</div>
);
}
export default App;
Para mostrar variables { variable }
Eventos
import React from 'react'
const Eventos = () => {
const eventoClick = () => {
console.log("me diste un click, guei")
}
return (
<div>
<hr/>
<h2>Eventos</h2>
<button onClick={ () => eventoClick() }>Click</button>
</div>
)
}
export default Eventos
Fragment
Si nosotros sacamos el div que devuelve dentro el return nos va a pintar un error.
Si no vamos a usar los divs (que no deberian usarse si no le vamos a colocar un clase), vamos a tener que usar Fragment.
Asi:
import React, { Fragment } from 'react'
const Eventos = () => {
const eventoClick = () => {
console.log("me diste un click, guei")
}
return (
<Fragment>
<hr/>
<h2>Eventos</h2>
<button onClick={ () => eventoClick() }>Click</button>
</Fragment>
)
}
export default Eventos
Y si inspeccionamos el elemento ya no nos aparece el div.
Hook de Estado useState
Supongamos que queremos cambiar con un click en el boton, el texto que tenemos en el h2, por ejemplo.
import React, { Fragment, useState } from 'react'
const Eventos = () => {
const [texto, setTexto] = useState('Soy el texto por defecto')
const eventoClick = () => {
console.log("me diste un click, guei")
setTexto('Soy el texto nuevo!')
}
return (
<Fragment>
<hr/>
<h2>{texto}</h2>
<button onClick={ () => eventoClick() }>Click</button>
</Fragment>
)
}
export default Eventos
useState Contador
import React from 'react'
const Contador = () => {
const [contador, setContador] = React.useState(0)
const aumentar = () => {
console.log("click")
setContador(contador + 1)
}
return (
<div>
<h2>Contador</h2>
<h3>Nuestro número aumentando: { contador }</h3>
<button onClick={ () => aumentar() }>Aumentar</button>
</div>
)
}
export default Contador
o asi:
import React from 'react'
const Contador = () => {
const [contador, setContador] = React.useState(0)
return (
<div>
<h2>Contador</h2>
<h3>Nuestro número aumentando: { contador }</h3>
<button onClick={ () => setContador(contador + 1) }>Aumentar</button>
</div>
)
}
export default Contador
Y podemos llamar tambien a useState de esta manera, en vez de alli arriba.
Operador Ternario
import React from 'react'
const Contador = () => {
const [contador, setContador] = React.useState(0)
return (
<div>
<h2>Contador</h2>
<h3>Nuestro número aumentando: { contador }</h3>
<h4>
{
contador > 2 ? 'Es mayor a 2' : 'Es menor a 2'
}
</h4>
<button onClick={ () => setContador(contador + 1) }>Aumentar</button>
</div>
)
}
export default Contador
Array y key
import React, {useState} from 'react'
const Listas = () => {
const listaNumero = [1,2,3,4,5]
const [lista, setLista] = useState(listaNumero)
return (
<div>
<h4>Lista</h4>
{
lista.map( (item, index) => (
<h4 key={index}>{item}</h4>
) )
}
</div>
)
}
export default Listas
El key es porque sino da error, porque map espera un numero unico, un id unico.
Array de Objetos
import React, { useState } from 'react'
const Array = () => {
const arrayDeObjetos = [
{id: 1, tarea: 'Tarea 1'},
{id: 2, tarea: 'Tarea 2'}
]
const [lista, setLista] = useState(arrayDeObjetos)
return (
<div>
<h3>Lista de tareas</h3>
{
lista.map( (item, index) => (
<h4 key={item.id}>{ item.tarea }</h4>
))
}
</div>
)
}
export default Array
Operador de Propagacion
Esto es Js.
El operador de propagacion lo que hace es unir 2 arrays.
const arrayUno = ['Uno', 'Dos']
const arrayDos = ['Tres', 'Cuatro']
const Unidos = [...arrayUno, ...arrayDos]
console.log(Unidos)
Tomando este concepto vamos a trabajar!.
import React, { useState } from 'react'
const Array = () => {
const arrayDeObjetos = [
{id: 1, tarea: 'Tarea 1'},
{id: 2, tarea: 'Tarea 2'}
]
const [lista, setLista] = useState(arrayDeObjetos)
const agregar = () => {
setLista([
...lista,
{id: 4, tarea: 'Tarea 4'}
])
}
return (
<div>
<h3>Lista de tareas</h3>
{
lista.map( (item, index) => (
<h4 key={item.id}>{ item.tarea }</h4>
))
}
<button onClick={ () => agregar() }>Agregar tarea</button>
</div>
)
}
export default Array
Solo vamos a cambiar lo de index asi:
lista.map( (item, index) => (
<h4 key={index}>{ item.tarea }</h4>
Para que no nos de error porque el id tiene que ser UNICO.
Formulario con Bootstrap
Vamos a copiar el CDN de Bootstrap en el head, en la carpeta public, en el index.html.
Vamos a crear un componente llamado Formulario.
Y vamos a hacer:
import React from 'react'
const Formulario = () => {
return (
<div>
<h2>Formulario</h2>
<form>
<input
type="text"
placeholder="Agregue fruta"
className="form-control mb-2"
/>
<input
type="text"
placeholder="Agregue descripción"
className="form-control mb-2"
/>
<button className="btn btn-primary btn-block">Agregar</button>
</form>
</div>
)
}
export default Formulario
Si vamos a react developer tool en el inspector, en componentes, aun no vemos los hooks de estado, asi que si escribimos los hooks de estado y lo iniciamos en "" y es uno por input, asi:
import React from 'react'
const Formulario = () => {
const [fruta, setFruta] = React.useState('')
const [descripcion, setDescripcion] = React.useState('')
return (
<div>
<h2>Formulario</h2>
<form>
<input
type="text"
placeholder="Agregue fruta"
className="form-control mb-2"
/>
<input
type="text"
placeholder="Agregue descripción"
className="form-control mb-2"
/>
<button className="btn btn-primary btn-block">Agregar</button>
</form>
</div>
)
}
export default Formulario
Ahora, vamos a ver en el inspector, en componentes:
hooks
State
Ahora, vamos a relacionar los input con los estados.
Evento onChange
import React from 'react'
const Formulario = () => {
const [fruta, setFruta] = React.useState('')
const [descripcion, setDescripcion] = React.useState('')
return (
<div>
<h2>Formulario</h2>
<form>
<input
type="text"
placeholder="Agregue fruta"
className="form-control mb-2"
onChange={ (e) => setFruta(e.target.value) }
/>
<input
type="text"
placeholder="Agregue descripción"
className="form-control mb-2"
onChange={ (e) => setDescripcion(e.target.value) }
/>
<button className="btn btn-primary btn-block">Agregar</button>
</form>
</div>
)
}
export default Formulario
Procesando datos Formulario
1-
type="submit"
<form onSubmit={ guardarDatos }>
import React from 'react'
const Formulario = () => {
const [fruta, setFruta] = React.useState('')
const [descripcion, setDescripcion] = React.useState('')
const guardarDatos = (e) => {
e.preventDefault()
if(!fruta.trim()){
console.log('Está vacio fruta')
return
}
if(!descripcion.trim()){
console.log('Esta vacio descripcion')
return
}
console.log('Procesando datos...')
e.target.reset()
setFruta('')
setDescripcion('')
}
return (
<div>
<h2>Formulario</h2>
<form onSubmit={ guardarDatos }>
<input
type="text"
placeholder="Agregue fruta"
className="form-control mb-2"
onChange={ (e) => setFruta(e.target.value) }
/>
<input
type="text"
placeholder="Agregue descripción"
className="form-control mb-2"
onChange={ (e) => setDescripcion(e.target.value) }
/>
<button className="btn btn-primary btn-block" type="submit">Agregar</button>
</form>
</div>
)
}
export default Formulario
Guardar datos en un array y recorrerlo
import React from 'react'
const Formulario = () => {
const [fruta, setFruta] = React.useState('')
const [descripcion, setDescripcion] = React.useState('')
const [lista, setLista] = React.useState([])
const guardarDatos = (e) => {
e.preventDefault()
if(!fruta.trim()){
console.log('Está vacio fruta')
return
}
if(!descripcion.trim()){
console.log('Esta vacio descripcion')
return
}
console.log('Procesando datos...')
setLista([
...lista,
{nombreFruta: fruta, nombreDescripcion: descripcion}
])
e.target.reset()
setFruta('')
setDescripcion('')
}
return (
<div>
<h2>Formulario</h2>
<form onSubmit={ guardarDatos }>
<input
type="text"
placeholder="Agregue fruta"
className="form-control mb-2"
onChange={ (e) => setFruta(e.target.value) }
/>
<input
type="text"
placeholder="Agregue descripción"
className="form-control mb-2"
onChange={ (e) => setDescripcion(e.target.value) }
/>
<button className="btn btn-primary btn-block" type="submit">Agregar</button>
</form>
<hr/>
<h3>Lista</h3>
<ul>
{
lista.map( (item, index) => (
<li key={ index }>
{item.nombreFruta} - {item.nombreDescripcion}
</li>
))
}
</ul>
</div>
)
}
export default Formulario
No hay comentarios:
Publicar un comentario