CODIGO USADO

import React,{Component} from "react";

const rs=["/img/social/face.jpg", "/img/social/instagram.jpg",

"/img/social/twitter.jpg"];

const rschange=["/img/social/face1.jpg", "/img/social/instagram1.jpg",

"/img/social/twitter1.jpg"];

class HeaderS extends Component{

render(){

let imagenes = rs.map((x, index) =>(

<img src={x} className="rsocial"

onMouseOver={e => e.currentTarget.src=rschange[index]}

onMouseOut={e => e.currentTarget.src=rs[index]}

alt="Redes"/>

));

return(

<div className="divsocial">

<span>Síguenos en: </span>

{imagenes}

</div>

};

export default HeaderS

import React, { useState, useEffect } from 'react';

const ParpadeoTexto = () => {

const [color, setColor] = useState('#000'); // Color inicial

useEffect(() => {

// Iniciar el parpadeo
const parpadeoInterval = setInterval(() => {

let r = Math.floor(Math.random() * 250);

let g = Math.floor(Math.random() * 250);

let b = Math.floor(Math.random() * 250);

setColor(`rgb(${r},${g},${b})`);

}, 1000);

return () => clearInterval(parpadeoInterval);

}, []);

return (

<div>

<h1 id="nombre" style={{ color: color }}>

ReactJS

</h1>

</div>

);

};

export default ParpadeoTexto;

import React,{Component} from "react";

let f=new Date();

class FechaHora extends Component{

constructor(props){

super(props);

this.state={

fecha:f.getDate()+"/"+(f.getMonth()+1)+"/"+f.getFullYear()

};

};
state={

fecha:null,

hora:null

};

render(){

f=new Date();

let h=f.getHours();

let m=(f.getMinutes() < 10 ? "0"+f.getMinutes() : f.getMinutes());

let s=(f.getSeconds() < 10 ? "0"+f.getSeconds() : f.getSeconds());

setTimeout(() => this.setState({

hora: h+":"+m+":"+s

}), 1000);

return(

<div>

<div className="div-fecha">Fecha: {this.state.fecha}</div>

<div className="div-fecha">Hora: {this.state.hora}</div>

</div>

};

export default FechaHora;

import React, {useState} from 'react';

function Formulario() {}

const [tipos, setTipos] = useState('');

const [registrado, setRegistrado] = useState(false);

const handleSubmit = (event) => {

event.preventDefault();

const usuario = event.target.usuario.value;

const contraseña = event.target.contraseña.value;

const contraseñaV = event.target.contraseñaV.value;

const tipo = event.target.tipos.value;

const dni = event.target.dni.value;

const correo = event.target.icorreo.value;

const telefono = event.target.telefono.value;

const tos = event.target.tos.checked;

if(!/^u\d{5}$/.test(usuario)){

alert('El usuario debe comenzar con "u" seguido de 5 dígitos');

return

if(!/^(?=.*\d)(?=.*[A-Z])(?=.*[@$*]).{10}$/.test(contraseña)) {

alert('La contraseña debe contener al menos un número, una mayúscula y un

caracter especial (@, $ o *). La longitud debe ser de 10 caracteres.');

'return';

if(contraseña !== contraseñaV){

alert('Las contraseñas no coinciden.');

return;

if((telefono.length !== 7 && telefono.length !==9) ||

(telefono.length === 7 && !/^[2456]/.test(telefono)) ||

(telefono.length === 9 && !/^9/.test(telefono))) {

alert('El teléfono debe tener 7 dígitos y comenzar con 2, 4, 5 o 6, o tener 9 dígitos y

comenzar con 9.');

return;

if (!/\S+@\S+\.\S+/.test(correo)){

alert('Ingrese el correo electrónico válido');

 return;

if (!tos) {

alert('Acepte los términos y condiciones del servicio.');

return;

alert('Gracias.');

setRegistrado(true); };

return (

<><div className="container">

<label
htmlFor="iusuario">Usuario</label>

<label
htmlFor="iusuario">Usuario</label>

<input

type="text"

className="form-control"

id="iusuario"

name="usuario"

placeholder="Ingrese usuario"
/></div><div className="form-group">

<label
htmlFor="icontraseña">Contraseña</label>

<input

type="text"

className="form-
control"

id="icontraseña"
 name="contraseña"

placeholder="Ingrese contraseña" />

</div><div className="form-group">

<label
htmlFor="icontrasenaV">Repita contraseña</label>

<input

type="text"

className="form-
control"

id="icontrasenaV"

name="contraseñaV"

placeholder="Repita contraseña" />

</div><div className="form-group">

<label htmlFor="itipo">Tipo de
documento</label>

<select

className="form-
control"

id="itipo"

name="tipos"

value={tipos}

onChange={(e) =>
setTipos(e.target.value)}

>

<option
value="1">DNI</option>

<option
value="2">CE</option>

</select>
 </div><div className="form-group">

<label
htmlFor="idni">DNI</label>

<input

type="text"

className="form-
control"

id="idni"

name="dni"

placeholder="Ingrese DNI" />

</div><div className="form-group">

<label
htmlFor="icorreo">Correo</label>

<input

type="text"

className="form-
control"

id="icorreo"

name="icorreo"

placeholder="Ingrese correo" />

</div><div className="form-group">

<label
htmlFor="itelefono">Teléfono</label>

<input

type="text"

className="form-
control"

id="itelefono"

name="telefono"
placeholder="Ingrese teléfono (7 a 9 dígitos)" />

</div><div className="form-check">

<input type="checkbox"
className="form-check-input"

id="itos"
name="tos" />

<label htmlFor="itos"
className="form-check-label">

Acepto Terminos y
condiciones del servicio?

</label>

</div><button type="submit"
className="btn btn-primary">

Registrar

</button></>

);

export default Formulario;