Importamos la imagen desde la carpeta creada
import './App.css';
import alextechLogo from './images/1.png';
function App() {
return (
<div className='App'>
<div className='alextech-logo-contenedor'>
<h2>DESARROLLO ALEXTECH</h2>
<img className='alextech-logo' src={alextechLogo} alt='logo de alextech'/>
</div>
<div className='contenedor principal'>
</div>
</div>
);
}
export default App;
App.css
Agregamos estilos generales
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html , body {
background-color: #0C0E12;
}
.App{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding-top: 15px;
font-family: Lato ,sans-serif;
}
.alextech-logo-contenedor {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
.alextech-logo{
height: 50PX;
}
h2{
color: #fff;
}
Creamos el boton
Creamos una carpeta de compnents y 3 componentes Boton,js
Boton.js
import React from 'react';
function Boton(){
return(
<button>
</button>
)
}
Props del boton
Boton.js
import React from 'react';
function Boton(props){
return(
<button>
{props.texto}
</button>
)
}
Sintaxis de desesetructuracion
Forma mas sencilla de entender .leer que no requiere que escriba props punto y el nombre del props esto se llama desestructuracion.
Boton.js
import React from 'react';
function Boton({texto}){
return(
<button>
{texto}
</button>
)
}
Clase basada en condiciòn
Operador ternario te permite tomar desiciones en base a otro valor , como escribir un condicional ,pero en una sola liena , esBotonDeClic sera condicion de verdadero o falso dependiendo de su valor le asignaremos una clase espesifica
Boton.js
import React from 'react';
function Boton({texto, esBotonDeClic}){
return(
<button>
{/* esBotonDeClic entonces si es verdad le asignamos la clase boton-clic y si no : la clase reiniciar*/}
className={esBotonDeClic ? 'boton-clic' : 'boton-reiniciar'} >
{texto}
</button>
)
}
/* esBotonDeClic entonces si es verdad le asignamos la clase boton-clic y si no : la clase reiniciar*/}
Asignar EventListener
manejarClic es una funcion como click
-Function Boton definimos la clase , recibimos 3 porps texto que se a mostrar en el boton .
-esBotonDeClic condicional.
-funcion manejarClic que va ocurrir cuando se haga clic sobre el boton.
Manejar clic vendra del componente que renderice y cree al boton ,cuando hagamos click actualizaremos el estado de otro componente
Boton.js
import React from 'react';
function Boton({texto, esBotonDeClic ,manejarClic}){
return(
<button
className={esBotonDeClic ? 'boton-clic' : 'boton-reiniciar'} onClick={manejarClic}>
{texto}
</button>
)
}
export default Boton;
Crear los botones
App.js principal ,va a renderizar 2 botones.
Boton.js
import React from 'react';
function Boton({texto, esBotonDeClic ,manejarClic}){
return(
<button
className={esBotonDeClic ? 'boton-clic' : 'boton-reiniciar'} onClick={manejarClic}>
{texto}
</button>
)
}
export default Boton;
App.js
import './App.css';
import alextechLogo from './images/1.png';
function App() {
return (
<div className='App'>
<div className='alextech-logo-contenedor'>
<h2>DESARROLLO ALEXTECH</h2>
<img className='alextech-logo' src={alextechLogo} alt='logo de alextech'/>
</div>
<div className='contenedor principal'>
<Boton
texto='Clic' esBotonDeClic={true} manejarClic={}/>
<Boton
texto='Reiniciar' esBotonDeClic={false} manejarClic={}/>
</div>
</div>
);
}
export default App;
manjearClic no podemos dejar en blanco
Definir funcion en un componente
-Funcion flecha le asignamos a la constante manejarClic
App.js
function App() {
//Definimos a la primera funcion interactividad//
//() => parentesis con los parametros//
const manejarClic = () => {
console.log('Clic');
}
//-------------
//Definir la segunda funcion//
const reiniciarContador = () => {
console.log('Reiniciar');
}
//---------------
Pasar una funcion como props
<Boton
texto='Clic' esBotonDeClic={true}
//Llama a la funcion manejarClic ,componente recibe en props, funcion que se va allar cuando se haga onlic//
manejarClic={manejarClic}/>
manejarClic asignarle esa funcion a ese prop manejarClic={} ,
-La funcion esta entre llaves.
<Boton
texto='Reiniciar' esBotonDeClic={false}
manejarClic={reiniciarContador}/>
-ejecuta la funcion reiniciarContador cuando se haga clic sobre el boton se le asigna a manejar clic.
-Importamos en componente o nos da un error
App.js
import Boton from './components/Boton';
Probar las funciones
El eventHander funcione muy bien al dar click sale contendo en consola.
Estilos para botones
Boton.css
button {
width: 250px;
height: 80px;
font-size: 35px;
font-family: Roboto , sans-serif;
font-weight: bold;
color: white;
border: 2px solid white;
border-radius: 15px;
margin: 5px;
cursor: pointer;
}
button:hover{
background-color: #FF262E;
}
.boton-clic{
background-color: #7b827b;
}
.boton-reiniciar{
background-color: #000000;
}
Componente contador
Crwamos un componente Contador.js con la siguiente estructura
import React from "react";
//Utilizamos sintaxis desestructuracion//function Contador({numClics}){
return (
<div className='contador'>
{numClics}
</div>
)
}
export default Contador;
Agregamos en contador
cuando exportemos de un nuevo componente , vamos a importar al principal
Contador.js
export default Contador;
App.js
import Contador from './components/Contador';
Contador.js
import React from "react";
import '../hojas-de-estilo/Contador.css';
function Contador({numClics}){
return (
<div className='contador'>
{numClics}
</div>
)
}
export default Contador;
Contador.css
.contador {
min-width: 300px;
height: 300px;
font-size: 160px;
padding: 25px;
color: white;
display: flex;
align-items: center;
justify-content: center;
border: 8px solid white;
margin-bottom: 30px;
}
App.css agregamos al contenedor principal
.contenedor-principal {
height: 550px;
min-width: 600px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
justify-content: center;
}
Actualizar el contador
Implementar el estado , vamos a trabajar con los hooks funciones especiales que me permiten usar caracteristicas poderosas de react con componentes funcionales uno de esos hooks es useState me permite agregarle un estado a un componente funcional
-Para usarlo debemos importarlo
App.js
import {useState} from 'react';
Realizar que el valor fijo 5 sea dinamico
esto
<Contador numClics='5'/>
Por esto como props
<Contador numClics={numClics}/>
numClics acabamos de definir arriba
const [numClics , setNumClics] = useState(0);
Para que quede en cero en reiniciar cambiamos
//Definir la segunda funcion//
const reiniciarContador = () => {
setNumClics(0); //sustituimos con console.log//
freeCodeCamp Español. (2022, March 15). Aprende React Desde Cero - Curso de React Con Proyectos [Video]. YouTube. https://www.youtube.com/watch?v=6Jfk8ic3KVk
