react
web development
REactweb app dev
Guía rápida para crear una web app fica ujed ing fabian gallegos
react web app
¿que es?
Una React web app es una aplicación web moderna y dinámica construida utilizando la biblioteca de JavaScript llamada React. React es una herramienta muy popular para el desarrollo frontend que permite a los programadores crear interfaces de usuario interactivas y eficientes. Una de las características clave de React es su enfoque en la creación de componentes reutilizables, lo que facilita la construcción y el mantenimiento de aplicaciones web complejas.
¿que hacen?
frameworks y componentes
Además, React se integra bien con otras tecnologías web y frameworks, lo que lo convierte en una herramienta versátil para el desarrollo de aplicaciones web interactivas y visualmente atractivas.
Las React web apps ofrecen una experiencia de usuario fluida y altamente receptiva, lo que las convierte en una elección común para el desarrollo de sitios web y aplicaciones modernas.
"The goal is to learn-once (the React way) and write anywhere."
Ray Wenderlich
diferencias de react y javascript
Imagina que JavaScript es como una colección de ingredientes esenciales en una cocina, como la harina, el azúcar, los huevos y el aceite. Estos ingredientes son la base sobre la cual se construye una variedad de platos deliciosos. En este contexto, JavaScript es el lenguaje de programación fundamental que proporciona las estructuras y funciones básicas para construir aplicaciones web.
Por otro lado, React es como una receta específica que utiliza esos ingredientes para crear un plato especializado. En esta analogía, React es un marco de trabajo o una biblioteca que se basa en JavaScript. Proporciona un conjunto de herramientas y componentes predefinidos que te ayudan a construir aplicaciones web de manera eficiente y estructurada.
mi Segunda web app
en react
¿Dudas?
preguntas
Uso en VS CODE
- Abrir una nueva Carpeta
- Crear una nueva terminal:
- Terminal > Nueva Terminal
Para usarse en VS Code necesitamos crear un nuevo proyecto
App.js
import React from 'react';
import MyComponent from './components/MyComponent';
function App() {
return (
<div className="App">
<MyComponent />
</div>
);
}
export default App;
<label>Opacity:</label>
<input
type="range"
min="0"
max="100"
value={opacity}
onChange={(e) => setOpacity(e.target.value)}
/>
<label>Blur:</label>
<input
type="range"
min="0"
max="10"
value={blur}
onChange={(e) => setBlur(e.target.value)}
/>
<label>Brightness:</label>
<input
type="range"
min="0"
max="200"
value={brightness}
onChange={(e) => setBrightness(e.target.value)}
/>
<label>Sepia:</label>
<input
type="range"
min="0"
max="100"
value={sepia}
onChange={(e) => setSepia(e.target.value)}
/>
<div>
<img
id="color-change-image"
src={imageUrl}
alt="Image to Apply Filters"
/>
</div>
</div>
);
}
export default MyComponent; // Exporta el componente para su uso en otras partes de la aplicación.
MyComponent.js
import React, { useState } from 'react'; // Importa React y el hook useState desde React.
import './MyComponent.css'; // Importa un archivo CSS para estilar el componente.
function MyComponent() {
const [imageUrl, setImageUrl] = useState('https://images.pexels.com/photos/2234685/pexels-photo-2234685.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); // Inicializa un estado para la URL de la imagen.
const [hue, setHue] = useState(0); // Inicializa un estado para el valor de rotación de matiz (hue).
const [opacity, setOpacity] = useState(100); // Inicializa un estado para el valor de opacidad.
const [blur, setBlur] = useState(0); // Inicializa un estado para el valor de desenfoque (blur).
const [brightness, setBrightness] = useState(100); // Inicializa un estado para el valor de brillo.
const [sepia, setSepia] = useState(0); // Inicializa un estado para el valor de sepia.
const handleImageChange = () => {
const image = document.getElementById('color-change-image'); // Obtiene el elemento de imagen por su ID.
// Aplica un filtro CSS en función de los valores de estado actuales.
image.style.filter = `hue-rotate(${hue}deg) opacity(${opacity}%) blur(${blur}px) brightness(${brightness}%) sepia(${sepia}%)`;
};
return (
<div>
<h1>Image Filter App</h1>
<input
type="text"
placeholder="Image URL"
value={imageUrl}
onChange={(e) => setImageUrl(e.target.value)}
/>
<div> <h1>Image Filter App</h1>
<input
type="text"
placeholder="Image URL"
value={imageUrl}
onChange={(e) => setImageUrl(e.target.value)}
/>
<button onClick={handleImageChange}>Apply Filters</button>
<br />
<label>Hue Rotation:</label>
<input
type="range"
min="0"
max="360"
value={hue}
onChange={(e) => setHue(e.target.value)}
/>
Descarga NODE.js
De la página https://nodejs.org/en descargarás e instalarás la version de node.js mas estable para tu proyecto.
label {
display: block;
margin-top: 10px;
color: #00faff;
}
img {
max-width: 100%;
height: auto;
filter: none; border: 1px solid #00faff;
}
MyComponent.css
.App {
text-align: center;
font-family: "Roboto", sans-serif;
background-color: #121212; /* Dark background */
color: #00faff; /* Neon blue text color */
padding: 20px;
}
h1 {
color: #00faff;
text-transform: uppercase;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
background-color: #121212;
color: #00faff;
border: 1px solid #00faff;
width: 100%;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #00faff;
color: #121212;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #ff6b00; /* Neon orange on hover */
}
input[type="range"] {
width: 100%;
background: #ff7300; /* Neon blue */
}
Creación del Proyecto
Usaremos la instrucción: npx create-react-app "mi-app" para crear un nuevo proyecto, donde sustituiremos "mi-app" por el nombre de su web app personalizado
Despues de instalar y crear todas las dependencias del proyecto hay que ubicarnos en la ruta del proyecto con la instrucción: cd mi-app
Agregaremos los componentes
Para que la aplicación sea completamente operativa, deberá crear componentes personalizados para su aplicación específica. Estos componentes se pueden organizar en una estructura de carpetas dentro del directorio src. Puede crear componentes para diferentes partes de su aplicación, como encabezado, pie de página y contenido principal.
- Dentro del directorio src, cree una nueva carpeta para sus componentes apoyándonos con el menú de crear carpeta del vs code, la llamaremos components.
- Dentro de la carpeta de componentes, cree un nuevo archivo JavaScript para su componente personalizado, MyComponent.js.
- Puede agregar CSS para estilizar su componente. Cree el archivo MyComponent.css
REact
fabyang
Created on November 4, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Women's Presentation
View
Vintage Photo Album
View
Geniaflix Presentation
View
Shadow Presentation
View
Newspaper Presentation
View
Memories Presentation
View
Zen Presentation
Explore all templates
Transcript
react
web development
REactweb app dev
Guía rápida para crear una web app fica ujed ing fabian gallegos
react web app
¿que es?
Una React web app es una aplicación web moderna y dinámica construida utilizando la biblioteca de JavaScript llamada React. React es una herramienta muy popular para el desarrollo frontend que permite a los programadores crear interfaces de usuario interactivas y eficientes. Una de las características clave de React es su enfoque en la creación de componentes reutilizables, lo que facilita la construcción y el mantenimiento de aplicaciones web complejas.
¿que hacen?
frameworks y componentes
Además, React se integra bien con otras tecnologías web y frameworks, lo que lo convierte en una herramienta versátil para el desarrollo de aplicaciones web interactivas y visualmente atractivas.
Las React web apps ofrecen una experiencia de usuario fluida y altamente receptiva, lo que las convierte en una elección común para el desarrollo de sitios web y aplicaciones modernas.
"The goal is to learn-once (the React way) and write anywhere."
Ray Wenderlich
diferencias de react y javascript
Imagina que JavaScript es como una colección de ingredientes esenciales en una cocina, como la harina, el azúcar, los huevos y el aceite. Estos ingredientes son la base sobre la cual se construye una variedad de platos deliciosos. En este contexto, JavaScript es el lenguaje de programación fundamental que proporciona las estructuras y funciones básicas para construir aplicaciones web.
Por otro lado, React es como una receta específica que utiliza esos ingredientes para crear un plato especializado. En esta analogía, React es un marco de trabajo o una biblioteca que se basa en JavaScript. Proporciona un conjunto de herramientas y componentes predefinidos que te ayudan a construir aplicaciones web de manera eficiente y estructurada.
mi Segunda web app
en react
¿Dudas?
preguntas
Uso en VS CODE
Para usarse en VS Code necesitamos crear un nuevo proyecto
App.js
import React from 'react'; import MyComponent from './components/MyComponent'; function App() { return ( <div className="App"> <MyComponent /> </div> ); } export default App;
<label>Opacity:</label> <input type="range" min="0" max="100" value={opacity} onChange={(e) => setOpacity(e.target.value)} /> <label>Blur:</label> <input type="range" min="0" max="10" value={blur} onChange={(e) => setBlur(e.target.value)} /> <label>Brightness:</label> <input type="range" min="0" max="200" value={brightness} onChange={(e) => setBrightness(e.target.value)} /> <label>Sepia:</label> <input type="range" min="0" max="100" value={sepia} onChange={(e) => setSepia(e.target.value)} /> <div> <img id="color-change-image" src={imageUrl} alt="Image to Apply Filters" /> </div> </div> ); } export default MyComponent; // Exporta el componente para su uso en otras partes de la aplicación.
MyComponent.js
import React, { useState } from 'react'; // Importa React y el hook useState desde React. import './MyComponent.css'; // Importa un archivo CSS para estilar el componente. function MyComponent() { const [imageUrl, setImageUrl] = useState('https://images.pexels.com/photos/2234685/pexels-photo-2234685.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); // Inicializa un estado para la URL de la imagen. const [hue, setHue] = useState(0); // Inicializa un estado para el valor de rotación de matiz (hue). const [opacity, setOpacity] = useState(100); // Inicializa un estado para el valor de opacidad. const [blur, setBlur] = useState(0); // Inicializa un estado para el valor de desenfoque (blur). const [brightness, setBrightness] = useState(100); // Inicializa un estado para el valor de brillo. const [sepia, setSepia] = useState(0); // Inicializa un estado para el valor de sepia. const handleImageChange = () => { const image = document.getElementById('color-change-image'); // Obtiene el elemento de imagen por su ID. // Aplica un filtro CSS en función de los valores de estado actuales. image.style.filter = `hue-rotate(${hue}deg) opacity(${opacity}%) blur(${blur}px) brightness(${brightness}%) sepia(${sepia}%)`; }; return ( <div> <h1>Image Filter App</h1> <input type="text" placeholder="Image URL" value={imageUrl} onChange={(e) => setImageUrl(e.target.value)} /> <div> <h1>Image Filter App</h1> <input type="text" placeholder="Image URL" value={imageUrl} onChange={(e) => setImageUrl(e.target.value)} /> <button onClick={handleImageChange}>Apply Filters</button> <br /> <label>Hue Rotation:</label> <input type="range" min="0" max="360" value={hue} onChange={(e) => setHue(e.target.value)} />
Descarga NODE.js
De la página https://nodejs.org/en descargarás e instalarás la version de node.js mas estable para tu proyecto.
label { display: block; margin-top: 10px; color: #00faff; } img { max-width: 100%; height: auto; filter: none; border: 1px solid #00faff; }
MyComponent.css
.App { text-align: center; font-family: "Roboto", sans-serif; background-color: #121212; /* Dark background */ color: #00faff; /* Neon blue text color */ padding: 20px; } h1 { color: #00faff; text-transform: uppercase; } input[type="text"] { padding: 10px; font-size: 16px; background-color: #121212; color: #00faff; border: 1px solid #00faff; width: 100%; margin-bottom: 10px; } button { padding: 10px 20px; font-size: 16px; background-color: #00faff; color: #121212; border: none; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #ff6b00; /* Neon orange on hover */ } input[type="range"] { width: 100%; background: #ff7300; /* Neon blue */ }
Creación del Proyecto
Usaremos la instrucción: npx create-react-app "mi-app" para crear un nuevo proyecto, donde sustituiremos "mi-app" por el nombre de su web app personalizado
Despues de instalar y crear todas las dependencias del proyecto hay que ubicarnos en la ruta del proyecto con la instrucción: cd mi-app
Agregaremos los componentes
Para que la aplicación sea completamente operativa, deberá crear componentes personalizados para su aplicación específica. Estos componentes se pueden organizar en una estructura de carpetas dentro del directorio src. Puede crear componentes para diferentes partes de su aplicación, como encabezado, pie de página y contenido principal.