Código Fuente:

Html y css intensivo - camino hacia REACT: https://github.com/Franklin369/cursohtmlcss

Javascript Intensivo Camino Hacia React: https://github.com/Franklin369/javascriptintensivo

React Intensivo Desde 0 Actualizado Principiantes: https://github.com/Franklin369/reactintensivo

Cambiar logo: <link rel="icon" type="image/svg+xml" href="https://i.ibb.co/F3qhznm/logoN.png" />

Programas Necesarios

Nombre Descripción Link

Visual Studio Code
Just Color Picker
Node JS
editor de código fuente desarrollado por Microsoft para Windows, Linux, macOS y Web. https://code.visualstudio.com/
Incluye soporte para la depuración, control integrado de Git, resaltado de sintaxis,
finalización inteligente de código, fragmentos y refactorización de código
Selector de color y editor de color sin conexión portátil y gratuito para diseñadores web y https://annystudio.com/
artistas digitales software/colorpicker/
Node.js® es un entorno de tiempo de ejecución de JavaScript multiplataforma y de código https://nodejs.org/en/
abierto.

Windows + r
cmd
node -v

Extensiones Visual Studio Code

Nombre
Atom One Dark Theme
LiveServer
Material Icon Theme
PHP Intelephense
Prettier - Code formatter
Spanish Language Pack for
Visual Studio Code
HTML to CSS autocompletion
Live Sass Compiler
Descripción
Se edita en preferencias
Para que refresque automáticamente la pagina web al salvar, se instala Live Server y cuando se inicia el archivo, clic derecho
Open Live Server
Dar Formato al Documento Comando Shift+Alt+F (español) Control+K + D
Extensión para reconocer las clases de html en css
SASS: Es un preprocesador de CSS que nos permite generar de manera automática, hojas de estilo, añadiéndoles
 características que no tiene CSS
CSS Flexbox Cheatsheet
Image preview

Terminal

Nombre Descripción Link

Yarn Instalación clásica https://classic.yarnpkg.com/lang/en/docs/
npm install --global yarn install/#windows-stable

Comprobar instalación: Verifique que Yarn esté instalado ejecutando:

yarn –version

Proyecto en Yarn con Vite

yarn create vite //crear el proyecto
cd “my-app” //ingresar al proyecto
yarn //instala los paquetes necesarios
yarn dev … //iniciar el proyecto

Cuando esté listo para implementar en producción, cree un paquete

minimizado con yarn build, se crea la carpeta dist que es la que se publica

Error Yarn No se puede cargar el archivo C:\Users\USERASUSI7\AppData\Roaming\npm\yarn.ps1 https://www.youtube.com/watch?

Crear proyectos con créate-
react-app
Solución: v=8aEkXl_kKTo
abrir powershell como administrador y ejecutar:
Get-ExecutionPolicy
Set-ExecutionPolicy Unrestricted
npx create-react-app “my-app” //crear el proyecto https://create-react-app.dev/docs/getting-
cd “my-app” //ingresar al proyecto started
npm start… //iniciar el proyecto

Cuando esté listo para implementar en producción, cree un paquete

Crear proyectos con vite
minimizado con npm run build, se crea la carpeta build que es la que se
publica
NPM: https://vitejs.dev/
npm create vite@latest //crear el proyecto
cd “my-app” //ingresar al proyecto
npm install //instala paquetes node
 npm run dev… //iniciar el proyecto

PNPM: $ pnpm create vite

Error
Archivo package.json Contiene la información de todos los paquetes con los que cuenta el proyecto.
Allí sabremos con cual método ha sido creado (créate react, yarn, etc)
Cancelar el servidor Control + C
Routes El react-router-dompaquete contiene enlaces para usar React Router en https://npm.io/package/react-router-dom
aplicaciones web. Para instalar routes

npm i react-router-dom
#o
yarn add react-router
React Icon npm i react-icons https://react-icons.github.io/react-icons/
Configurar scss https://vitejs.dev/guide/features.html#css
# .scss and .sass
npm add -D sass
Styled Components npm i styled-components

Base de datos en Firebase: https://firebase.google.com/

1. Nuevo Proyecto
2. Registrar app
3. Se instala firebase en el proyecto npm install firebase (en package.json se evidencia la instalación)
4. Se copia el código y se lleva al archivo firebase.jsx en el proyecto

Clonar un proyecto de react:

1. Se copia en el nuevo proyecto todo a excepción de las carpetas dist ni node-modules

2. Revisamos el archivo package.json para observar sus propiedades y saber cómo fue creado (vite, yarn, créate-react-app , etc)
3. Entramos al proyecto y en el terminal escribir yarn, esto crea la carpeta node-modules del proyecto
4. yarn dev para iniciar el proyecto en el servidor.

Atajos y Códigos

Nombre Descripción
 Cambiar Idioma
Convertir en Comentarios
Desconvertir Comentarios
Salvar todos los archivo
Crear clases en div
Comillas invertidas ``
ionicons
Animación del Cursor
Configurar colores de linea
para css
Para que funcione Zoom con
Control + Rueda de Mouse
Formateo de página .css
Publicar proyectos
Configurar Salto de Linea
Snippets
Control + Shift + p
se selecciona el texto y se oprime Control+ K + Control+C
Control K + Control+U
Control + K S
div class="nombre_clase"></div>
div.nombre_clase
.nombre_clase
Alt+96
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<ion-icon name="heart"></ion-icon>
Archivo – Preferencias – Configuración - Cursor
Archivo – Preferencias, en el buscador se escribe pair y se chequea: Bracket Pair Colorization
Control+, (Configuración). Se selección Mouse Wheel Zoom
@import "https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
https://app.netlify.com/
Se copia la carpeta, si se dese se le cambia el nombre
Archivo – Preferencias, en el buscador se escribe wordwrap y se pasa a ON
Atajo para crear componentes o funciones
Ver – Paleta de Comandos – “snippets”
Se activan con:
Funciones:
"Para crear funciones": {
"prefix": "fc",
"body": [
"export function Nombre() {",
" return (<h1>Titulo</h1>);",
 "}"
],
"description": "Para crear funciones "
}

Componentes

{
// Place your GLOBAL snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body
and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If
scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Para crear componentes": {
"prefix": "fc",
"body": [
"import styled from \"styled-components\";",
"export function Componente() {",
" return (<Container>",
"<h1>Componente</h1>",
" </Container>);",
"}",
"const Container <styled.div`",
" ",
"`"
],
"description": "Para crear componentes"
 },
"Para crear Regiones": {
"prefix": "rgs",
"body": [
"//#region STYLED COMPONENTS",
"",
"//#endregion",
""
],
"description": "Para crear Regiones "
},
"Para styled components": {
"prefix": "sc",
"body": [
"import styled from \"styled-components\";"
],
"description": "Para styled components"
},
"Para estilizar con styled component": {
"prefix": "scs",
"body": [
"const Container <styled.div`",
" ",
"`"
],
"description": "Para estilizar con styled component"
}

Paginas:

Link Descripción
https://fontawesome.com/ Font Awesome
https://cybmeta.com/em-y-rem
https://developer.mozilla.org/es/
https://fonts.google.com/
https://imgbb.com/ Compartir imágenes
https://matthew.wagerfield.com/parallax/
 https://greensock.com/scrolltrigger/
https://cdnjs.com/libraries/gsap
https://pokeapi.co/
https://scrollrevealjs.org/
https://swiperjs.com/get-started
https://boxicons.com/usage
https://swiperjs.com/
https://www.freepik.es/
https://pixabay.com/es/
Recursos:
Link
https://github.com/Franklin369/javascriptintensivo
https://cran.r-project.org/web/packages/jsonlite/
vignettes/json-apis.html
https://developers.google.com/fonts/docs/material_icons
GSAP es una biblioteca de JavaScript para crear animaciones de alto rendimiento que funcionan en los
principales navegadores
Todas las imágenes que necesites, en un solo lugar. Encuentra y descarga fotos, diseños y mockups con la
mejor calidad
Increíbles Imágenes Gratis Para Descargar. Nuestro banco de imágenes tiene más de 1 millón de imágenes y
videos compartidos por nuestra talentosa comunidad.
Descripción
Recursos de los cursos Codigo369
Json
Guía de íconos de material
La forma más sencilla de configurar las fuentes de íconos para usarlas en cualquier página web es
mediante Google Fonts. Lo único que debes hacer es incluir una sola línea de HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Además, se deben declarar las reglas de CSS para renderizar el ícono a fin de renderizar la fuente
de forma adecuada. Por lo general, estas reglas se entregan como parte de la hoja de estilo Google
Web Font, pero se deberán incluir manualmente en tus proyectos cuando se aloje la fuente:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
 line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;

/* Support for all WebKit browsers. */

-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */

-moz-osx-font-smoothing: grayscale;

/* Support for IE. */

font-feature-settings: 'liga';
}

Cómo usar los íconos en HTML

Es muy fácil incorporar íconos a tu página web. Este es un ejemplo pequeño:

Rostro <span class="material-icons">face</span>

https://ionic.io/ionicons Instalación: Si está utilizando Ionic Framework, Ionicons está empaquetado de forma
predeterminada, por lo que no es necesaria la instalación. ¿Quieres usar Ionicons sin Ionic
Framework? Coloque lo siguiente <script>cerca del final de su página, justo antes de la etiqueta de
cierre </body>, para habilitarlos.

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></

script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

Uso Basico: Para usar un ícono integrado del paquete Ionicons, complete el atributo name en el
componente ion-icon:

<ion-icon name="heart"></ion-icon>

Teoria
 Teoría Descripción Uso o Link
Etiqueta H Titulo / Describe brevemente el tema de la sección. Va desde h1 Hasta <h1>texto</h1>
encabezado h6
Etiqueta p párrafos Agrupa bloque de textos en párrafos <p>texto</p>
Etiquetas que no llevan br – salto de línea <br>
cierre img – imágenes <img src="" alt="">
<link rel="shortcut icon" href="img/logoN.png" type="image/x-icon" />
link – links de páginas <hr>
hr – dibujar linea separadora
Referencia de Atributos Los elementos en HTML tienen atributos; estos son valores https://developer.mozilla.org/es/docs/Web/HTML
HTML adicionales que configuran los elementos o ajustan su
comportamiento de diversas formas para cumplir los criterios
de los usuarios.
Etiqueta a Sirve para navegar hacia otras paginas web. <a href=""></a>
Etiqueta span abarcar. Es un contenedor en línea. Sirve para aplicar estilo al <span></span>
texto o agrupar elementos en línea
Flexbox tiene como objetivo proporcionar una forma más eficiente de https://css-tricks.com/snippets/css/a-guide-to-flexbox/
diseñar, alinear y distribuir el espacio entre los elementos en un
contenedor, incluso cuando su tamaño es desconocido y/o
dinámico (por lo tanto, es “flexionar”).
Header El elemento HTML <header>) representa un grupo de ayudas https://developer.mozilla.org/es/docs/Web/HTML/Element/header
introductorias o de navegación. Puede contener algunos
elementos de encabezado, así como también un logo, un
formulario de búsqueda, un nombre de autor y otros
componentes.
Nav El elemento HTML <nav> representa una sección de una página https://developer.mozilla.org/es/docs/Web/HTML/Element/nav
cuyo propósito es proporcionar enlaces de navegación, ya sea
dentro del documento actual o a otros documentos. Ejemplos
comunes de secciones de navegación son menús, tablas de
contenido e índices.
Display La propiedad CSS display especifica si un elemento es tratado https://developer.mozilla.org/es/docs/Web/CSS/display
como block or inline element y el diseño usado por sus hijos,
como flow layout(Diseño de Flujo), grid(Cuadricula) o
flex(Flexible).
Padding La propiedad CSS padding establece el espacio de relleno https://developer.mozilla.org/es/docs/Web/CSS/padding
requerido por todos los lados de un elemento. El área de
padding es el espacio entre el contenido del elemento y su
borde (border). No se permiten valores negativos.
@media La regla-at CSS @media asocia un grupo de declaraciones https://developer.mozilla.org/es/docs/Web/CSS/@media
anidadas, en un bloque CSS delimitado por llaves, con una
 condición definida por un media query. La regla-at @media
puede ser usada no solo en el nivel superior de la hoja de
estilos, sino también dentro de cualquier grupo de reglas
condicionales.
::before (:before) En CSS, ::before crea un pseudoelemento que es el primer hijo https://developer.mozilla.org/es/docs/Web/CSS/::before
del elemento seleccionado. Es usado normalmente para añadir
contenido estético a un elemento, usando la propiedad
content. Este elemento se muestra en línea con el texto de
forma predeterminada.
::after (:after) En CSS, ::after crea un pseudo-elemento que es el último hijo https://developer.mozilla.org/es/docs/Web/CSS/::after
del elemento seleccionado. Es comunmente usado para añadir
contenido cosmético a un elemento con la propiedad
content.Es en linea (inline) de forma predeterminada.
Border La propiedad border permite definir en una única regla todos https://developer.mozilla.org/es/docs/Web/CSS/border
los bordes de los elementos seleccionados. Se puede utilizar
border para definir el o los valores siguientes: border-width,
border-style, border-color.
Valores y unidades CSS Las “unidades de longitud porcentuales de ventana de https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Values_and_units
visualización” (viewport-percentage lengths) o más https://www.yunbitsoftware.com/blog/2017/06/22/viewport-units-css-que-es/
#:~:text=vh%20(viewport%2Dheight)%20%3D,(de%200%20a%20100).
comúnmente llamadas viewport units son unidades css
relativas a la ventana gráfica del navegador o visualizado
box-shadow La propiedad CSS box-shadow añade efectos de sombra https://developer.mozilla.org/es/docs/Web/CSS/box-shadow
alrededor del marco de un elemento. Se pueden definir https://medium.com/@nana8/css-box-shadow-what-is-difference-between-blur-
and-spread-c3a3de92a126
múltiples efectos separados por comas. La caja de la sombra se
describe por los desplazamientos en X e Y, los radios de
desenfoque y dispersión, y el color relativos al elemento.
Flex La propiedad CSS flex es una propiedad resumida que indica la https://developer.mozilla.org/es/docs/Web/CSS/flex
capacidad de un elemento flexible para alterar sus dimensiones
y llenar el espacio disponible. Los elementos flexibles pueden
ser estirados para utilizar el espacio disponible proporcional a
su factor de crecimiento flexible o su factor de contracción
flexible para evitar desbordamiento.
Main El elemento HTML <main> representa el contenido principal del https://developer.mozilla.org/es/docs/Web/HTML/Element/main
<body> de un documento o aplicación. El área principal del
contenido consiste en el contenido que está directamente
relacionado, o se expande sobre el tema central de un
documento o la funcionalidad central de una aplicación. Este
contenido debe ser único al documento, excluyendo cualquier
contenido que se repita a través de un conjunto de documentos
 como barras laterales, enlaces de navegación, información de
derechos de autor, logos del sitio y formularios de búsqueda (a
menos, claro, que la función principal del documento sea un
formulario de búsqueda).
:root La pseudo-clase :root de CSS selecciona el elemento raíz de un https://developer.mozilla.org/es/docs/Web/CSS/:root
árbol que representa el documento. En HTML, :root representa
el elemento <html> y es idéntico al selector html, excepto que
su especificidad es mayor.
Footer El Elemento HTML Footer (<footer>) representa un pie de https://developer.mozilla.org/es/docs/Web/HTML/Element/footer
página para el contenido de sección más cercano o el elemento
raíz de sección (p.e, su ancestro mas cercano <article>, <aside>,
<nav>, <section>,<blockquote>, <body>, <details>, <fieldset>,
<figure>, <td>). Un pie de página típicamente contiene
información acerca de el autor de la sección, datos de derechos
de autor o enlaces a documentos relacionados.
box-sizing La propiedad box-sizing puede hacer que la creación de https://css-tricks.com/box-sizing/
diseños CSS sea más fácil y mucho más intuitiva.
flex-direction La propiedad CSS flex-direction especifica cómo colocar los https://developer.mozilla.org/es/docs/Web/CSS/flex-direction
objetos flexibles en el contenedor flexible definiendo el eje
principal y la dirección (normal o al revés).
linear-gradient() La función CSS linear-gradient() crea una imagen que consiste https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
en una transición progresiva entre dos o más colores a lo largo
de una línea recta. Su resultado es un objeto del tipo de datos
<gradient>, que es un tipo especial de . <image>
filter La propiedad CSS filter aplica efectos gráficos como https://www.udemy.com/course/curso-intensivo-de-html-y-css-camino-hacia-
desenfoque o cambio de color a un elemento. Los filtros se react/learn/lecture/33654802#overview
usan comúnmente para ajustar la representación de imágenes,
fondos y bordes.
clip-path La propiedad clip-path permite realizar un recorte con una https://lenguajecss.com/css/mascaras-y-recortes/clip-path/
forma concreta, ocultando toda la región externa del recorte.
Su utilización es muy sencilla y permite realizar formas muy
flexibles y versátiles.
object-fit La propiedad CSS object-fit establece cómo se debe cambiar el https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
tamaño del contenido de un elemento reemplazado , como un
<img> o <video> , para que se ajuste a su contenedor.
flex-wrap La propiedad CSS flex-wrap establece si los elementos flexibles https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
se fuerzan en una línea o se pueden ajustar en varias líneas. Si
se permite el ajuste, establece la dirección en que se apilan las
líneas.
 <form> El elemento HTML <form> representa una sección de https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
documento que contiene controles interactivos para enviar
información.
JS DOM (document Representa la estructura de html y puede ser modificado por un
object model) lenguaje de programación.
Obtener datos JSON de . Esta sección enumera algunos ejemplos de API HTTP públicas https://cran.r-project.org/web/packages/jsonlite/vignettes/json-apis.html
las API REST que publican datos en formato JSON. Estos son excelentes para
tener una idea de las estructuras complejas que se encuentran
en los datos JSON del mundo real. Todos los servicios son
gratuitos, pero algunos requieren registro/autenticación. Cada
ejemplo devuelve una gran cantidad de datos, por lo tanto, no
todos los resultados se imprimen en este documento.
Evento al pasar el ratón El evento JavaScript onmouseover ocurre cuando el puntero https://www.w3schools.com/jsref/event_onmouseover.asp
del mouse se mueve sobre un elemento o sobre uno de sus
elementos secundarios.
Calculadora de Mod El módulo es una operación que se utiliza para calcular el resto https://www.easycalculation.com/es/algebra/modulo-calculator.php
de la operación de división. Cuando se divide un número 'a'
entre 'b', también se puede expresar como 'a mod b', que es el
resto. También se conoce como el módulo. Con esta
calculadora puede realizar la operación mod y encontrar el
resto de la división.
getBoundingClientRect( El getBoundingClientRect() método devuelve el tamaño de un https://www.w3schools.com/jsref/met_element_getboundingclientrect.asp
) elemento y su posición relativa a la ventana gráfica.
React Es una librería javascript para crear interfaces de usuario en una
sola pagina index.html
Une html, css y javascript en un solo paquete llamado
componente, el cual puede ser reutilizado e ir armando una
pagina web por bloques.
Temas puntuales de la sección

En este proyecto tocaremos temas sobre:

Creación del Proyecto yarn create vite

cd 12ntfpage
yarn
yarn dev
React Router npm i react-router-dom
Styled components npm i styled-components
Creación de las carpetas assets (components (icons, sections), pages, routers y styles
dentro de la carpeta src
Instalar font source/sora react https://www.npmjs.com/package/@fontsource/sora
yarn add @fontsource/sora
npm install @fontsource/sora
instalar @fontsource/akaya-telivigala https://www.npmjs.com/package/@fontsource/akaya-telivigala
yarn add @fontsource/akaya-telivigala
npm install @fontsource/akaya-telivigala
typewriter-effect https://www.npmjs.com/package/typewriter-effect
# with npm
npm i typewriter-effect

# with yarn
yarn add typewriter-effect
Emoticons https://es.piliapp.com/facebook-symbols/
swiper https://www.npmjs.com/package/swiper
https://swiperjs.com/react

npm i swiper
SVGR en React https://react-svgr.com/
gsap https://www.npmjs.com/package/gsap
npm install gsap
react-use https://www.npmjs.com/package/react-use
npm i react-use
react-use-window-size https://www.npmjs.com/package/react-use-window-size
npm install react-use-window-size
react-confetti https://www.npmjs.com/package/react-confetti
npm install react-confetti
 useState (hook)
 useEffect (hook)
 useRef (hook)
 useLayoutEffect (hook)
 gsap scroll trigger
 Swiper react
 Publicación del proyecto
 Lazy y suspense
 ThemeProvider