React es una biblioteca de JavaScript de código abierto y front-end que se utiliza para crear una interfaz de usuario interactiva. Es desarrollado y mantenido por Facebook. Se puede utilizar para el desarrollo de aplicaciones móviles y de una sola página.
Crearemos una aplicación simple donde tenemos 2 botones, uno para incrementar y otro para disminuir.
Configuración inicial: npx es una herramienta CLI utilizada para instalar y administrar dependencias en el registro npm. NPX viene preinstalado con npm 5.2+; de lo contrario, podemos instalarlo con el siguiente comando:
npm i -g npx // -g flag indicates global installation
Creando la aplicación React:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app counter
Paso 2: después de crear la carpeta de su proyecto, es decir, el contador, acceda a ella con el siguiente comando:
cd counter
Estructura del proyecto: Tendrá el siguiente aspecto.
Estructura del proyecto
Nombre de archivo: App.js:
Javascript
import React, { useState } from "react";
// Importing app.css is css file to add styling
import "./App.css";
const App = () => {
// Counter is a state initialized to 0
const [counter, setCounter] = useState(0)
// Function is called everytime increment button is clicked
const handleClick1 = () => {
// Counter state is incremented
setCounter(counter + 1)
}
// Function is called everytime decrement button is clicked
const handleClick2 = () => {
// Counter state is decremented
setCounter(counter - 1)
}
return (
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
fontSize: '300%',
position: 'absolute',
width: '100%',
height: '100%',
top: '-15%',
}}>
Counter App
<div style={{
fontSize: '120%',
position: 'relative',
top: '10vh',
}}>
{counter}
</div>
<div className="buttons">
<button style={{
fontSize: '60%',
position: 'relative',
top: '20vh',
marginRight: '5px',
backgroundColor: 'green',
borderRadius: '8%',
color: 'white',
}}
onClick={handleClick1}>Increment</button>
<button style={{
fontSize: '60%',
position: 'relative',
top: '20vh',
marginLeft: '5px',
backgroundColor: 'red',
borderRadius: '8%',
color: 'white',
}}
onClick={handleClick2}>Decrement</button>
</div>
</div>
)
}
export default App
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Producción:
Publicación traducida automáticamente
Artículo escrito por praveshsshetty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA