22 | {children}
23 |
24 |
11 |
18 | );
19 | };
20 |
21 | export default Loading;
22 |
--------------------------------------------------------------------------------
/public/assets/fontawesome/css/v5-font-face.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 6.1.2 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | * Copyright 2022 Fonticons, Inc.
5 | */
6 | @font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}
--------------------------------------------------------------------------------
/public/assets/fontawesome/scss/_bordered-pulled.scss:
--------------------------------------------------------------------------------
1 | // bordered + pulled icons
2 | // -------------------------
3 |
4 | .#{$fa-css-prefix}-border {
5 | border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
6 | border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
7 | border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
8 | border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
9 | padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
10 | }
11 |
12 | .#{$fa-css-prefix}-pull-left {
13 | float: left;
14 | margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
15 | }
16 |
17 | .#{$fa-css-prefix}-pull-right {
18 | float: right;
19 | margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
20 | }
21 |
--------------------------------------------------------------------------------
/public/assets/fontawesome/scss/solid.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 6.1.2 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | * Copyright 2022 Fonticons, Inc.
5 | */
6 | @import 'functions';
7 | @import 'variables';
8 |
9 | :root, :host {
10 | --#{$fa-css-prefix}-font-solid: normal 900 1em/1 "#{ $fa-style-family }";
11 | }
12 |
13 | @font-face {
14 | font-family: 'Font Awesome 6 Free';
15 | font-style: normal;
16 | font-weight: 900;
17 | font-display: $fa-font-display;
18 | src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
19 | url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
20 | }
21 |
22 | .fas,
23 | .#{$fa-css-prefix}-solid {
24 | font-family: 'Font Awesome 6 Free';
25 | font-weight: 900;
26 | }
27 |
--------------------------------------------------------------------------------
/hooks/useWindowSize.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | const getCurrentSize = () => {
4 | if (typeof window !== "undefined") {
5 | return {
6 | width: window.innerWidth,
7 | height: window.innerHeight,
8 | };
9 | }
10 | return {
11 | width: 0,
12 | height: 0,
13 | };
14 | };
15 |
16 | const useWindowSize = () => {
17 | const [windowSize, setWindowSize] = useState(getCurrentSize);
18 |
19 | useEffect(() => {
20 | window.addEventListener("resize", () =>
21 | setWindowSize(getCurrentSize())
22 | );
23 |
24 | return () => {
25 | window.removeEventListener("resize", () =>
26 | setWindowSize(getCurrentSize())
27 | );
28 | };
29 | }, []);
30 |
31 | return windowSize;
32 | };
33 |
--------------------------------------------------------------------------------
/public/assets/fontawesome/scss/regular.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 6.1.2 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | * Copyright 2022 Fonticons, Inc.
5 | */
6 | @import 'functions';
7 | @import 'variables';
8 |
9 | :root, :host {
10 | --#{$fa-css-prefix}-font-regular: normal 400 1em/1 "#{ $fa-style-family }";
11 | }
12 |
13 | @font-face {
14 | font-family: 'Font Awesome 6 Free';
15 | font-style: normal;
16 | font-weight: 400;
17 | font-display: $fa-font-display;
18 | src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
19 | url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
20 | }
21 |
22 | .far,
23 | .#{$fa-css-prefix}-regular {
24 | font-family: 'Font Awesome 6 Free';
25 | font-weight: 400;
26 | }
27 |
--------------------------------------------------------------------------------
/public/assets/images/manifest.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "theme_color": "#f69435",
3 | "background_color": "#f69435",
4 | "display": "browser",
5 | "scope": "/",
6 | "start_url": "/",
7 | "name": "fdg",
8 | "short_name": "fdgh",
9 | "icons": [
10 | {
11 | "src": "/icon-192x192.png",
12 | "sizes": "192x192",
13 | "type": "image/png"
14 | },
15 | {
16 | "src": "/icon-256x256.png",
17 | "sizes": "256x256",
18 | "type": "image/png"
19 | },
20 | {
21 | "src": "/icon-384x384.png",
22 | "sizes": "384x384",
23 | "type": "image/png"
24 | },
25 | {
26 | "src": "/icon-512x512.png",
27 | "sizes": "512x512",
28 | "type": "image/png"
29 | }
30 | ]
31 | }
--------------------------------------------------------------------------------
/contexts/ThemeContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 | import Head from "next/head";
3 | import { useLocalStorage } from "usehooks-ts";
4 |
5 | export type ThemeType = "light" | "dark";
6 |
7 | type ThemeContextType = {
8 | theme: ThemeType;
9 | setTheme: any;
10 | };
11 |
12 | export const ThemeContext = createContext(null as null | ThemeContextType);
13 |
14 | export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
15 | const [theme, setTheme] = useLocalStorage("theme", "light");
16 |
17 | return (
18 | <>
19 | Cargando...
17 |
21 | {children}
22 |
23 |
16 |
25 | );
26 | };
27 |
28 | export const TitledGlassBox = ({
29 | title,
30 | children,
31 | className,
32 | }: {
33 | title: string;
34 | children: React.ReactNode;
35 | className?: string;
36 | }) => {
37 | return (
38 |
22 | {children}
23 |
24 | 40 | {title} 41 |
42 | {children} 43 |
40 |
44 |
35 | {"
37 | {
16 | setTheme((theme) => (theme === "light" ? "dark" : "light"));
17 | }}
18 | >
19 |
61 | );
62 | };
63 |
64 | export default ThemeSwitch;
65 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | "./pages/**/*.{js,ts,jsx,tsx}",
5 | "./components/**/*.{js,ts,jsx,tsx}",
6 | "./styles/**/*.{js,ts,jsx,tsx,scss,css}",
7 | ],
8 | theme: {
9 | screens: {
10 | sm: "500px",
11 | md: "800px",
12 | lg: "1000px",
13 | xl: "1250px",
14 | "2xl": "1450px",
15 | "3xl": "1900px",
16 | },
17 | fontFamily: {
18 | mono: ["Fira Code", "monospace"],
19 | space: ["Space Mono", "monospace"],
20 | raleway: ["Raleway", "sans-serif"],
21 | },
22 | extend: {
23 | borderWidth: {
24 | 1: "1px",
25 | 3: "3px",
26 | },
27 | borderRadius: {
28 | default: "15px",
29 | },
30 | colors: {
31 | accent: "#e61366",
32 | "accent-hover": "#be1559",
33 | "accent-active": "#a20f4e",
34 | doc: "#e2e2e2",
35 | "dark-doc": "#170c60",
36 | "doc-link": "#3c3cff",
37 | "dark-doc-link": "#e61366",
38 | "doc-font": "#282828",
39 | "dark-doc-font": "#e2e2e2",
40 | },
41 | boxShadow: {
42 | default: "0px 0px 15px 0px rgba(0, 0, 0, 0.3)",
43 | },
44 | dropShadow: {
45 | default: "0px 0px 10px rgba(0, 0, 0, 0.3)",
46 | notebook: "2px 2px 10px rgba(0, 0, 0, 0.8)",
47 | },
48 | backgroundImage: {
49 | main: "url('/assets/images/bg.svg')",
50 | github: "url('/assets/icons/GitHubLogo.png')",
51 | },
52 | backgroundSize: {
53 | 200: "200%",
54 | },
55 | keyframes: {
56 | shake: {
57 | "0%": {
58 | transform: "translateX(0)",
59 | },
60 | "50%": {
61 | transform: "translateX(10px)",
62 | },
63 | "100%": {
64 | transform: "translateX(0)",
65 | },
66 | },
67 | },
68 | animation: {
69 | shake: "shake 0.2s ease-in-out infinite",
70 | },
71 | },
72 | },
73 | plugins: [],
74 | };
75 |
--------------------------------------------------------------------------------
/public/assets/images/git.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/cheatsheets/node.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Node.js
3 | image: "/assets/images/node.svg"
4 | ---
5 |
6 | ## Índice
7 |
8 | - [Índice](#índice)
9 | - [Inicializar un proyecto](#inicializar-un-proyecto)
10 | - [Instalar dependencias](#instalar-dependencias)
11 | - [Carpeta `node_modules`](#carpeta-node_modules)
12 | - [Instalar dependencias de desarrollo](#instalar-dependencias-de-desarrollo)
13 | - [Instalar dependencias de forma global](#instalar-dependencias-de-forma-global)
14 | - [Sección `scripts`](#sección-scripts)
15 |
16 |
25 | {/*
31 | */}
37 |
38 |
44 | {theme === "dark" ? (
45 |
60 | 17 | 18 | ## Inicializar un proyecto 19 | 20 | Para inicializar un projecto deberemos ejecutar el siguiente comando: 21 | 22 | ```bash 23 | npm init 24 | ``` 25 | 26 | Este comando nos creará un archivo `package.json` con la información del proyecto, como el nombre, la versión, la descripción, etc. 27 | 28 | ## Instalar dependencias 29 | 30 | Para instalar dependencias deberemos ejecutar el siguiente comando: 31 | 32 | ```bash 33 | npm install
17 | 18 | ## Introducción 19 | 20 | `mysql2` es una librería de Node.js que permite realizar una conexión a una base de datos. En este documento utilizaremos en específico la parte de la librería que utiliza promesas para manejar la asincronía (`mysql2/promise`). 21 | 22 | ## Instalación 23 | 24 | Para instalar `mysql2` deberemos ejecutar el siguiente comando (dentro de un proyecto de Node.js): 25 | 26 | ```bash 27 | npm install mysql2 28 | ``` 29 | 30 | ## Conexión 31 | 32 | Para conectarnos a la base de datos deberemos añadir el siguiente código: 33 | 34 | ```js 35 | import mysql from "mysql2/promise"; 36 | 37 | const connection = await mysql.createConnection({ 38 | host: "
18 | 19 | ## ¿Qué terminal usar? 20 | 21 | Para utilizar los comandos que aparecerán en este documento, no será posible utilizar la terminal de Windows (cmd). Para ello, se recomienda utilizar la terminal Windows PowerShell o la terminal de Linux (Ubuntu). 22 | 23 | ## Sistema de archivos 24 | 25 | ### Rutas absolutas 26 | 27 | Las rutas absolutas son una forma de ubicar un archivo en una computadora/servidor de manera global, es decir, desde cualquier ubicación arbitraria, es posible acceder al archivo especificado por medio de estas. Las utilizamos todos los días por ejemplo en el explorador de archivos, todos tenemos los archivos de los distintos programas en ‘C:\Program Files’ la cual es una ruta absoluta ya que empieza con el disco (`C:\`). 28 | 29 | ### Rutas relativas 30 | 31 | Las rutas relativas, en cambio, son una forma de localizar un archivo desde la ubicación actual en la que se encuentra el usuario. Podemos pensarlo como las direcciones que le damos a alguien que ya está ubicado en una ruta, para llegar al lugar que queremos. Para esta tarea, utilizaremos los siguientes comandos: 32 | 33 | **‘./’**: Este comando representa la carpeta actual del archivo en cuestión. 34 | **‘../’**: Este comando representa la carpeta padre de la carpeta actual. 35 | 36 | **Ejemplo:** 37 | Si el árbol de carpetas fuera el siguiente: 38 | 39 | Si nosotros estamos en el archivo `index.php`, entonces para acceder a la carpeta test debemos utilizar la ruta relativa `../test/`, la cual significa subir una carpeta en el árbol y luego entrar a la carpeta `test`. 40 | 41 | ## Comandos básicos 42 | 43 | ### Comandos de navegación en directorios 44 | 45 | | Comando | Uso | Descripción | 46 | | ------- | --------------------- | ----------------------------- | 47 | | `cd` | `cd carpeta_proyecto` | Cambia de directorio | 48 | | `cd` | `cd ..` | Vuelve al directorio anterior | 49 | | `ls` | `ls` | Lista los archivos | 50 | | `pwd` | `pwd` | Muestra la ruta actual | 51 | 52 | ### Comandos de programas 53 | 54 | | Comando | Uso | Descripción | 55 | | ---------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------- | 56 | | `explorer` | `explorer .` | Abre el explorador de archivos en la carpeta actual | 57 | | `code` | `code .` | Abre Visual Studio Code en la carpeta actual | 58 | | `git` | `git status` | Muestra el estado del repositorio ([para más comandos](https://cheatsheets-nachovigilante.vercel.app/cheatsheet/git)) | 59 | | `npm` | `npm start` | Ejecuta el comando `start` de `package.json` ([para más comandos](https://cheatsheets-nachovigilante.vercel.app/cheatsheet/node)) | 60 | -------------------------------------------------------------------------------- /public/assets/images/cloudinary.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cheatsheets de TIC 2 | 3 | Este es el repositorio de la web de cheatsheets de TIC. Para acceder a la web [hacer click acá](https://cheatsheets-nv.vercel.app/). 4 | 5 | ## ¿Cómo hago un cambio? 6 | 7 | ### ¿Mi cambio tiene que ser fundamental? 8 | 9 | No. Todos los cambios son importantes, incluso si el cambio únicamente incluye agregar una tilde en este mismo documento. Cada uno puede aportar su parte para mejorar la calidad de este (y otros...) repositorios. De eso se trata la filosofía [Open Source](https://opensource.org/about), no es necesario saber programar mejor que otro, o entender más de un lenguaje u otra herramienta, todos cometemos errores y cualquiera puede ser capaz de corregirlos. Incluso si el cambio no es significativo, es una buena forma de practicar el proceso que conlleva realizar una [pull request](https://docs.github.com/es/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests) (PR). 10 | 11 | ### Pasos a seguir 12 | 13 | Para proponer algún cambio que agregue información o mejore algo en el repo hay que seguir los siguientes pasos: 14 | 15 | - Hacer un fork al repo 16 | - Realizar algún cambio detallando en el/los commits (utilizando [conventional commits](https://www.conventionalcommits.org/)) lo realizado 17 | - [Hacer un PR](#ejemplo-de-pr) con el/los commits realizados 18 | - Esperar la respuesta al PR 19 | 20 | ### Convención para el commit message 21 | 22 | Para los commits, vamos a utilizar una convención llamada [conventional commits](https://www.conventionalcommits.org/). El proyecto está configurado para que no se pueda committear si no se sigue esta convención. 23 | 24 | **Importante si usas linux o mac:** correr `npm run unix` una vez o no van a poder commitear. 25 | 26 | ### Ejemplo de PR 27 | 28 | En esta sección podemos ver un [ejemplo de un PR](https://github.com/nachovigilante/cheatsheets/pull/1) que realizó [@Sponja](https://github.com/Sponja-) para arreglar un problema en el índice del cheatsheet de PHP. 29 | 30 |  31 | 32 | El PR puede recibir una respuesta positiva o negativa, si la respuesta es positiva el cambio se acepta y si es negativa se rechaza, lo que no significa que la corrección o el arreglo no es necesario, sino que tal vez es necesario mejorar la corrección antes de aceptarla. 33 | 34 | Una vez que el PR es aceptado, el cambio se aplica al repo y se generará un nuevo commit con el cambio, como el que podemos [ver en este commit](https://github.com/nachovigilante/cheatsheets/commit/1fc56153a09720a09a724b600c7386423c83cd66). 35 | 36 | ## Agregar nuevos cheatsheets 37 | 38 | Si se quiere agregar un nuevo cheatsheet de algún lenguaje o herramienta que no se encuentra en el repo, ésta debe ser agregada en formato de archivo `.md`, en la carpeta `/cheatsheets/` con el nombre del lenguaje o la herramienta en cuestión. Es importante, además de seguir los pasos en la [sección anterior](#cómo-hago-un-cambio), cumplir los requerimientos obligatorios. 39 | 40 | ### Requisitos 41 | 42 | - Agregar además del `.md` un logo correspondiente en la carpeta `/assets/images/` que debe estar en formato `svg` y debe tener el mismo nombre que el archivo `.md` (ejemplo: `php.md` y `php.svg`). Intentar que el logo tenga un tamaño adecuado de alrededor de 20x20px, para que se vea bien en la web. 43 | 44 | - Tener una sección de metadata que tenga la siguiente estructura: 45 | 46 | ```plaintext 47 | --- 48 | title: {título} 49 | --- 50 | ``` 51 | 52 | - La primer sección debe ser llamada "Índice" y debe contener una tabla de contenidos (`TOC`), con la misma estructura que la presente en los cheatsheets que se encuentran actualmente en la carpeta `/cheatsheets/`, seguida de un `
` por razones puramente estéticas 53 | 54 | ### Recomendaciones 55 | 56 | - Citar las fuentes de información para acelerar el proceso de verificación y validación 57 | - Hacer uso de las herramientas que brinda markdown para mejorar la legibilidad de la información, aligerando también el proceso de feedback 58 | -------------------------------------------------------------------------------- /public/assets/icons/Sun.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/images/react.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /pages/cheatsheet/[slug].tsx: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | import matter from "gray-matter"; 3 | import path from "path"; 4 | import Head from "next/head"; 5 | import "highlight.js/styles/github-dark.css"; 6 | import React, { useContext, useEffect } from "react"; 7 | import FloatingButton from "../../components/utils/FloatingButton"; 8 | import { LoadingContext } from "../../contexts/LoadingContext"; 9 | import { ThemeContext } from "../../contexts/ThemeContext"; 10 | import router from "next/router"; 11 | import hljs from "highlight.js"; 12 | import marked from "marked-katex"; 13 | import katex from "katex"; 14 | import { twMerge } from "tailwind-merge"; 15 | import prisma from "../../highlighters/prisma"; 16 | 17 | hljs.registerLanguage("prisma", prisma); 18 | 19 | marked.setOptions({ 20 | highlight: function (code, lang) { 21 | if (typeof lang === "undefined") { 22 | return hljs.highlightAuto(code).value; 23 | } else if (lang === "nohighlight") { 24 | return code; 25 | } else { 26 | return hljs.highlight(lang, code).value; 27 | } 28 | }, 29 | kaTex: katex, 30 | }); 31 | 32 | type CheatsheetPageProps = { 33 | frontmatter: { 34 | title: string; 35 | image: string; 36 | }; 37 | content: string; 38 | slug: string; 39 | }; 40 | 41 | const CheatsheetPage = ({ 42 | frontmatter: { title, image }, 43 | content, 44 | slug, 45 | }: CheatsheetPageProps) => { 46 | const { setLoading } = useContext(LoadingContext); 47 | const { theme } = useContext(ThemeContext); 48 | 49 | useEffect(() => { 50 | router.events.on("routeChangeStart", () => setLoading(true)); 51 | router.events.on("routeChangeComplete", () => setLoading(false)); 52 | 53 | return () => { 54 | router.events.off("routeChangeStart", () => setLoading(true)); 55 | router.events.off("routeChangeComplete", () => setLoading(false)); 56 | }; 57 | }, []); 58 | 59 | // console.log(slug); 60 | 61 | return ( 62 | <> 63 | 64 |
72 |
85 | 73 | {title} 74 |
75 | 84 |
86 | window.scrollTo(0, 0)}
88 | ariaLabel="Scroll to the top"
89 | >
90 |
91 |
92 |
93 |
94 | );
95 | };
96 |
97 | export const getStaticPaths = async () => {
98 | const files = fs.readdirSync(path.join("cheatsheets"));
99 |
100 | const paths = files
101 | .map((file) => {
102 | const slug = file.replace(".md", "");
103 |
104 | return {
105 | params: {
106 | slug,
107 | },
108 | };
109 | })
110 | .filter((p) => p.params.slug !== "index");
111 |
112 | return {
113 | paths,
114 | fallback: false,
115 | };
116 | };
117 |
118 | export const getStaticProps = async ({ params: { slug } }) => {
119 | const markdownWithMeta = fs.readFileSync(
120 | path.join("cheatsheets", `${slug}.md`),
121 | "utf8"
122 | );
123 |
124 | const { data: frontmatter, content } = matter(markdownWithMeta);
125 |
126 | return {
127 | props: {
128 | frontmatter,
129 | content,
130 | slug,
131 | } as CheatsheetPageProps,
132 | };
133 | };
134 |
135 | export default CheatsheetPage;
136 |
--------------------------------------------------------------------------------
/public/assets/images/soquetic.svg:
--------------------------------------------------------------------------------
1 |
51 |
--------------------------------------------------------------------------------
/components/utils/Terminal/Terminal.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { useContext, useRef } from "react";
3 | import { twMerge } from "tailwind-merge";
4 | import {
5 | TerminalContext,
6 | TerminalProvider,
7 | } from "../../../contexts/TerminalContext";
8 | import { CheatsheetType } from "../../../pages";
9 | import Command from "./Command";
10 | import Image from "next/image";
11 | import { useWindowSize } from "usehooks-ts";
12 |
13 | type TerminalProps = {
14 | cheatsheets: CheatsheetType[];
15 | };
16 |
17 | const Console = ({ cheatsheets }: TerminalProps) => {
18 | const { commands } = useContext(TerminalContext);
19 |
20 | return (
21 |
22 |
34 | );
35 | };
36 |
37 | const WindowHeader = () => {
38 | return (
39 |
23 | {commands.map((c, i) => (
24 |
33 |
40 |
49 | );
50 | };
51 |
52 | const Sidebar = ({ cheatsheets }: TerminalProps) => {
53 | const windowSize = useWindowSize();
54 | return (
55 |
41 |
42 |
43 |
44 |
45 |
46 | tic://cheatsheets
47 |
48 |
56 |
88 | );
89 | };
90 |
91 | const Window = ({ cheatsheets }: TerminalProps) => {
92 | const { error } = useContext(TerminalContext);
93 |
94 | return (
95 |
57 |
58 | CHEATSHEETS
59 |
60 | -
61 | {cheatsheets.map((c) => (
62 |
-
63 |
64 |
65 | 66 |81 | {c.slug}.md 82 | 83 | 84 |
= 1250 ? 20 : 16 75 | } 76 | height={ 77 | windowSize.width >= 1250 ? 20 : 16 78 | } 79 | /> 80 |
85 | ))}
86 |
101 |
107 | );
108 | };
109 |
110 | const Terminal = ({ cheatsheets }: TerminalProps) => {
111 | return (
112 |
103 |
106 | 
161 | 
162 | 
163 | 
164 | 
165 |
166 | ### Clonar un repositorio de GitHub
167 |
168 | Para clonar un repositorio deberemos ir a la página del repositorio y hacer click en el botón `Clone or download`.
169 |
170 | ### Añadir un colaborador
171 |
172 | Para añadir un colaborador deberemos ir a la página del repositorio y hacer click en `Settings`. Una vez dentro, deberemos ir a la sección `Collaborators` y añadir el nombre de usuario del colaborador.
173 |
--------------------------------------------------------------------------------
/public/assets/images/mysql2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/public/assets/images/ino.svg:
--------------------------------------------------------------------------------
1 |
2 |
46 |
--------------------------------------------------------------------------------
/cheatsheets/postgres.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: postgres
3 | image: "/assets/images/mysql2.svg"
4 | ---
5 |
6 | ## Índice
7 |
8 | - [Índice](#índice)
9 | - [Introducción](#introducción)
10 | - [Creación de una base de datos en Vercel](#creación-de-una-base-de-datos-en-vercel)
11 | - [Conexión a la base de datos](#conexión-a-la-base-de-datos)
12 | - [pgAdmin](#pgadmin)
13 | - [Conexión a la base de datos desde pgAdmin](#conexión-a-la-base-de-datos-desde-pgadmin)
14 | - [Creación de una tabla](#creación-de-una-tabla)
15 | - [Tipos de datos](#tipos-de-datos)
16 | - [Autoincremental](#autoincremental)
17 | - [Claves foráneas](#claves-foráneas)
18 | - [pg en Node.js](#pg-en-nodejs)
19 | - [Instalación](#instalación)
20 | - [Utilización](#utilización)
21 | - [Conexión](#conexión)
22 | - [Consultas](#consultas)
23 |
24 | 25 | 26 | ## Introducción 27 | 28 | PostgreSQL es un motor de base de datos relacional SQL. Será el encargado de almacenar y gestionar los datos de nuestra aplicación. PostgreSQL es el sistema más común entre los sistemas que prestan servicio de hosting de bases de datos de manera gratuita en algunos planes. En particular, esta cheatsheet se enfoca en utilizar PostgreSQL, pgAdmin (una interfaz gráfica para PostgreSQL) y conectarlo a una base de datos hosteada en Vercel. 29 | 30 | ## Creación de una base de datos en Vercel 31 | 32 | Una vez que ingresaron a su cuenta de Vercel, y crearon un proyecto en el que desean utilizar una base de datos PostgreSQL, sigan los siguientes pasos para crear una base de datos en Vercel: 33 | 34 | Ir a la sección "Storage" del proyecto. 35 |
36 |
37 |  38 |
39 | 40 | Luego, tendrán que seleccionar para crear una nueva base de datos en PostgreSQL. 41 | 42 | ## Conexión a la base de datos 43 | 44 | Para conectarse a la base de datos, tanto desde pgAdmin como desde la aplicación, se necesitan datos que se encontrarán en la sección "Quickstart" de la base de datos creada en Vercel. 45 |
46 |
47 |  48 |
49 | 50 | ## pgAdmin 51 | 52 | pgAdmin es una interfaz gráfica para PostgreSQL que permite visualizar y manipular los datos de la base de datos. 53 | 54 | ### Conexión a la base de datos desde pgAdmin 55 | 56 | Para conectarse a la base de datos desde pgAdmin, sigan los siguientes pasos: 57 | 58 | 1. Descargar pgAdmin desde [pgAdmin](https://www.pgadmin.org/download/). 59 | 2. Abrir pgAdmin y agregar un nuevo servidor 60 |  61 | 3. Completar los datos del servidor con los datos de la base de datos de Vercel vistos en la sección "Conexión a la base de datos". 62 |  63 | 64 | Una vez que se conectaron a la base de datos, podrán visualizar y manipular los datos de las distintas tablas que tengan en la base de datos. 65 | 66 | Es importante remarcar que si la base de datos que utilizaremos es la llamada "verceldb", pues no tenemos permisos para editar la llamada "postgres". 67 | 68 | ### Creación de una tabla 69 | 70 | Para crear una tabla en la base de datos, deberán acceder desde el menú de la izquierda a "Servers" -> "nombre_del_servidor" -> "Databases" -> "verceldb" -> "Schemas" -> "public" -> "Tables" -> "Create" -> "Table...". 71 | 72 | Luego, deberán completar los datos de la tabla que desean crear. Y agregando las columnas que deseen. 73 | 74 |  75 | 76 | En general, queremos que todos los campos sean NOT NULL, excepto los que no sean necesarios. 77 | 78 | #### Tipos de datos 79 | 80 | - `integer`: Números enteros. 81 | - `real`: Números con coma. 82 | - `character varying`: Es el equivalente a `varchar` en otros motores de base de datos. 83 | - `text`: Texto. 84 | - `date`: Fecha. 85 | - `timestamp with time zone`: Fecha y hora. 86 | - `boolean`: Verdadero o falso. 87 | 88 | ##### Autoincremental 89 | 90 | Para que un campo sea autoincremental, deberán seleccionar la columna y darle el tipo de dato `serial`. Es importante que el campo que sea autoincremental sea la clave primaria de la tabla. 91 | 92 | ### Claves foráneas 93 | 94 | Para agregar una clave foránea, deberán dar botón derecho en la tabla, entrar en la opción "Properties". Luego, en la pesataña "Constraints" seleccionar seleccionar "Foreign Key". Finalmente, deberán completar los datos de la clave foránea (la columna que será foreign key, la clave que referencia y su respectiva tabla). 95 | 96 | ## pg en Node.js 97 | 98 | Para conectarse a la base de datos desde Node.js, se puede utilizar el paquete `pg`. Aquí su [documentación](https://node-postgres.com/). 99 | 100 | ### Instalación 101 | 102 | Para instalarlo, deberán correr el siguiente comando (dentro de un proyecto de Node.js): 103 | 104 | ```bash 105 | npm install pg 106 | ``` 107 | 108 | ### Utilización 109 | 110 | #### Conexión 111 | 112 | Una vez que instalaron el paquete, podrán conectarse a la base de datos y realizar consultas. 113 | 114 | ```javascript 115 | import { Client } from "pg"; // Importamos el cliente de pg (recordar que para utilizar 'import' es necesario usar "type": "module" en el package.json) 116 | 117 | // Pueden (y deberían) utilizar variables de entorno para almacenar los datos de conexión (dotenv) 118 | const client = new Client({ 119 | user: "
19 | 20 | ## Introducción 21 | 22 | Con estas dos herramientas, podremos subir imágenes a Cloudinary con el objetivo de obtener el enlace público para acceder a ellas desde cualquier lugar. Utilizaremos `Multer` para recibir los archivos de fotos y, con la conexión a `Cloudinary`, podremos subirlas. 23 | 24 | ## Crear Cuenta (`Cloudinary`) 25 | 26 | Primero, debemos crear una cuenta en `Cloudinary` para poder subir nuestras fotos. Es recomendable hacerlo utilizando GitHub. 27 | 28 | URL: https://console.cloudinary.com/users/register_free 29 | 30 | ## Instalación 31 | 32 | Para instalar `Multer` y `Cloudinary`, deberemos ejecutar los siguientes comandos en la consola (dentro de un proyecto de Node.js): 33 | 34 | ```bash 35 | npm i cloudinary 36 | npm i multer 37 | ``` 38 | 39 | ## Configuracion (Multer) 40 | 41 | Para configurar `Multer`, primero debemos crear una carpeta donde se almacenarán las imágenes localmente (ya sea de forma temporal o permanente). Esta carpeta debe estar ubicada dentro del proyecto, ya sea dentro de la carpeta src o en una carpeta separada. 42 | 43 | La configuración de `Multer` debe estar en el router de la ruta donde deseamos trabajar. Por ejemplo, si queremos gestionar la subida de fotos de perfil, configuraremos `Multer` en el router de usuarios. 44 | 45 | Primero, debemos importar el módulo de `Multer`: 46 | 47 | ```js 48 | import multer from 'multer'; 49 | ``` 50 | 51 | A continuación, debemos realizar la configuración de `Multer`. El código debería verse así: 52 | 53 | ```js 54 | const __filename = fileURLToPath(import.meta.url); 55 | const __dirname = dirname(__filename); 56 | 57 | // Poner la ubicacion de la carpeta de Uploads correspondiente, en este caso se ubica dentro del SRC 58 | const uploadDir = join(__dirname, "../uploads"); 59 | 60 | // Se define donde se va a ubicar el archivo que vamos a subir y el nombre, este se puede modificar, en este caso el nombre que se le va a asignar es la fecha de subida sumado del nombre del archivo original 61 | const storage = multer.diskStorage({ 62 | destination: function (req, file, cb) { 63 | cb(null, uploadDir); 64 | }, 65 | filename: function (req, file, cb) { 66 | cb(null, `${Date.now()}-${file.originalname}`) 67 | } 68 | }); 69 | 70 | // El siguiente filtro es para que se suban unicamente archivos con extensiones especificas. En este caso serian JPEG, PNG y JPG 71 | const fileFilter = (req, file, cb) => { 72 | const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg']; 73 | if (allowedTypes.includes(file.mimetype)) { 74 | cb(null, true); 75 | } else { 76 | cb(new Error('Invalid file type. Only PDF, PNG, JPEG, and JPG files are allowed.'), false); 77 | } 78 | }; 79 | 80 | const upload = multer({ 81 | storage: storage, 82 | fileFilter: fileFilter 83 | }); 84 | ``` 85 | 86 | ## Conexion (Cloudinary) 87 | 88 | Para realizar la conexión con `Cloudinary`, debemos acceder a nuestro dashboard personal de `Cloudinary` en el siguiente enlace para obtener nuestras credenciales. 89 | 90 | Desde ahí, podemos acceder a nuestro Cloudname, que se encuentra en el centro de la página, y debemos copiarlo. A continuación, hacemos clic en el botón 'Go to API Keys', ubicado a la derecha del Cloudname, donde encontraremos la API Key y el API Secret, los cuales también debemos copiar. 91 | 92 | En nuestro proyecto, debemos crear un archivo llamado `upload.js`, donde configuraremos toda la conexión. 93 | 94 | ```js 95 | import { v2 as cloudinary } from 'cloudinary'; 96 | 97 | cloudinary.config({ 98 | cloud_name: "
43 |
44 | {"<TIC_Cheatsheets/>"}
45 |
46 |
47 |
70 |
71 |
75 |
87 |
115 |
116 |
117 |
119 |
120 |
121 | );
122 | };
123 |
124 | export const getStaticProps = async () => {
125 | const files = fs.readdirSync(path.join("cheatsheets"));
126 |
127 | const cheatsheets = files.map((file) => {
128 | const slug = file.replace(".md", "");
129 |
130 | const markdownWithMeta = fs.readFileSync(
131 | path.join("cheatsheets", file),
132 | "utf8"
133 | );
134 |
135 | const { data: frontmatter } = matter(markdownWithMeta);
136 |
137 | return {
138 | slug,
139 | frontmatter,
140 | } as CheatsheetType;
141 | });
142 |
143 | return {
144 | props: {
145 | cheatsheets,
146 | },
147 | };
148 | };
149 |
150 | export default Home;
151 |
--------------------------------------------------------------------------------
/components/utils/Terminal/Command.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from "next/router";
2 | import { useContext, useEffect, useRef, useState } from "react";
3 | import { TerminalContext } from "../../../contexts/TerminalContext";
4 | import { CheatsheetType } from "../../../pages";
5 | import { AutocompleteCommand, AutocompleteFile } from "./Autocomplete";
6 | import useCommandList from "./useCommandList";
7 |
8 | const Command = ({
9 | index,
10 | initialCommand,
11 | active,
12 | cheatsheets,
13 | }: {
14 | initialCommand: string;
15 | index: number;
16 | active: boolean;
17 | cheatsheets: CheatsheetType[];
18 | }) => {
19 | const [copyCommand, setCopyCommand] = useState(index);
20 | const [text, setText] = useState(initialCommand);
21 | const [currentCommand, setCurrentCommand] = useState("");
22 | const router = useRouter();
23 |
24 | const {
25 | triggerError,
26 | errorMsg,
27 | addCommand,
28 | changeCommand,
29 | repeatCommand,
30 | clearCommands,
31 | } = useContext(TerminalContext);
32 |
33 | const commandList = useCommandList(cheatsheets, router, clearCommands);
34 | const containerRef = useRef
48 |
69 | 49 | TIC 50 | 51 | CHEATSHEETS 52 | 53 |
54 | 58 | {"> Ir a la terminal"} 59 | 60 |
61 |
68 | 88 | En esta web se encuentra una colección de 89 | "hojas de trucos" a las que se puede 90 | recurrir a la hora de programar en cualquiera de los 91 | lenguajes disponibles. La idea es que ésta sea de 92 | realización colectiva, es decir, que todos (tanto 93 | profesores como alumnos) puedan hacer su aporte a 94 | los cheatsheets, con el objetivo de aumentar la 95 | calidad y la cantidad de la información. Para 96 | aportar algún cambio o un cheatsheet nuevo, es muy 97 | importante que leas el README del repositorio. 98 |
99 |
100 |
111 | Star
112 |
113 |
114 | 101 | Si este repositorio te sirve podés darle una 102 | estrellita{" "} 103 |
104 |
175 |
213 | );
214 | };
215 |
216 | export default Command;
217 |
--------------------------------------------------------------------------------
/components/utils/Terminal/useCommandList.tsx:
--------------------------------------------------------------------------------
1 | type CommandItem = {
2 | type: "text" | "voidAction" | "action";
3 | content?: string;
4 | action?:
5 | | ((...args: any[]) => void)
6 | | ((...args: any[]) => string)
7 | | ((...args: any[]) => boolean);
8 | args?: string[];
9 | preventAdd?: boolean;
10 | man: string;
11 | usesFileNames?: boolean;
12 | };
13 |
14 | type CommandList = {
15 | [key: string]: CommandItem;
16 | };
17 |
18 | type CommandListFunction = (
19 | cheatsheets: any[],
20 | router: any,
21 | clearCommands: () => void
22 | ) => CommandList;
23 |
24 | const useCommandList: CommandListFunction = (
25 | cheatsheets,
26 | router,
27 | clearCommands
28 | ) => {
29 | const openFile = (slug: string, validFileNames: string[]) => {
30 | if (!validFileNames.includes(slug)) return false;
31 |
32 | const link = slug.split(".")[0];
33 | router.push(`/cheatsheet/${link}`);
34 | return true;
35 | }
36 |
37 | const commands: CommandList = {
38 | help: {
39 | type: "text",
40 | content: `
41 | Comandos disponibles:
42 |
176 | ~/ORT/TIC/cheatsheets{" "}
177 | git:
178 | (main)
179 |
180 |
181 | {">"}
182 |
196 | c.slug + ".md")]}
206 | />
207 | ) : null}
208 |
209 | {errorMsg && active && (
210 | {errorMsg}
211 | )}
212 | 43 |
-
44 |
- - about 45 |
- - cls 46 |
- - code 47 |
- - export 48 |
- - github 49 |
- - help 50 |
- - ls 51 |
- - open 52 |
- - pwd 53 |
- - man 54 |
- - shutdown 55 |
57 | Para saber cómo usarlos y qué hacen, podes utilizar 'man [comando]' 58 | `, 59 | man: ` 60 | help 61 |
62 | 63 | Muestra una lista de los comandos disponibles. 64 | 65 | `, 66 | }, 67 | about: { 68 | type: "text", 69 | content: ` 70 | ¿Qué es <TIC Cheatsheets/>? 71 |
72 | 73 | En esta web se encuentra una colección de 74 | "hojas de trucos" a las que se puede 75 | recurrir a la hora de programar en cualquiera de los 76 | lenguajes disponibles. La idea es que ésta sea de 77 | realización colectiva, es decir, que todos (tanto 78 | profesores como alumnos) puedan hacer su aporte a 79 | los cheatsheets, con el objetivo de aumentar la 80 | calidad y la cantidad de la información. Para 81 | aportar algún cambio o un cheatsheet nuevo, es muy 82 | importante que leas el README del repositorio. 83 | `, 84 | man: ` 85 | about 86 |
87 | 88 | Muestra información sobre la web. 89 | 90 | `, 91 | }, 92 | github: { 93 | type: "voidAction", 94 | action: () => 95 | window.open( 96 | "https://github.com/nachovigilante/cheatsheets", 97 | "_blank" 98 | ), 99 | man: ` 100 | github 101 |
102 | 103 | Abre el repositorio de la web en una nueva pestaña. 104 | 105 | `, 106 | }, 107 | open: { 108 | type: "voidAction", 109 | action: openFile, 110 | args: ["slug"], 111 | man: ` 112 | open [slug].md 113 |
114 | 115 | Abre el cheatsheet con el slug indicado (igual que cat). 116 | 117 | `, 118 | usesFileNames: true, 119 | }, 120 | cat: { 121 | type: "voidAction", 122 | action: openFile, 123 | args: ["slug"], 124 | man: ` 125 | cat [slug].md 126 |
127 | 128 | Abre el cheatsheet con el slug indicado (igual que open). 129 | 130 | `, 131 | usesFileNames: true, 132 | }, 133 | export: { 134 | type: "voidAction", 135 | action: (slug: string, validFileNames: string[]) => { 136 | if (!validFileNames.includes(slug)) return false; 137 | 138 | const link = slug.split(".")[0]; 139 | const anchor = document.createElement("a"); 140 | anchor.href = `/download/${link}.pdf`; 141 | anchor.download = `${link}.pdf`; 142 | document.body.appendChild(anchor); 143 | anchor.click(); 144 | return true; 145 | }, 146 | args: ["slug"], 147 | man: ` 148 | export [slug] 149 |
150 | 151 | Descarga el cheatsheet con el slug indicado. 152 | 153 | `, 154 | usesFileNames: true, 155 | }, 156 | cls: { 157 | type: "voidAction", 158 | action: () => { 159 | clearCommands(); 160 | return true; 161 | }, 162 | preventAdd: true, 163 | man: ` 164 | cls 165 |
166 | 167 | Limpia la terminal. 168 | 169 | `, 170 | }, 171 | ls: { 172 | type: "text", 173 | content: ` 174 |
-
175 | ${
176 | cheatsheets
177 | .map((c) => `
- ${c.slug}.md `) 178 | .join("") || "No hay cheatsheets disponibles" 179 | } 180 |
185 | 186 | Muestra una lista de los cheatsheets disponibles. 187 | 188 | `, 189 | }, 190 | pwd: { 191 | type: "text", 192 | content: "tic://cheatsheets/", 193 | man: ` 194 | pwd 195 |
196 | 197 | Muestra la ruta actual. 198 | 199 | `, 200 | }, 201 | code: { 202 | type: "voidAction", 203 | action: () => { 204 | window.open( 205 | "https://vscode.dev/github/nachovigilante/cheatsheets", 206 | "_blank" 207 | ); 208 | }, 209 | man: ` 210 | code 211 |
212 | 213 | Abre el repositorio de la web en VS Code. 214 | 215 | `, 216 | }, 217 | shutdown: { 218 | type: "voidAction", 219 | action: () => { 220 | window.open( 221 | "https://www.youtube.com/watch?v=dQw4w9WgXcQ", 222 | "_blank" 223 | ); 224 | }, 225 | man: ` 226 | shutdown 227 |
228 | 229 | Apaga la terminal. 230 | 231 | `, 232 | }, 233 | man: { 234 | type: "action", 235 | action: (command: string) => { 236 | console.log("AAAAAAAA"); 237 | const commandItemKey = Object.keys(commands).find( 238 | (c) => c === command 239 | ); 240 | const commandItem = commands[commandItemKey]; 241 | if (commandItem) { 242 | return commandItem.man; 243 | } 244 | return "No se ha encontrado el comando indicado."; 245 | }, 246 | args: ["command"], 247 | man: ` 248 | man [command] 249 |
250 | 251 | Muestra la documentación del comando indicado. 252 | 253 | `, 254 | }, 255 | }; 256 | 257 | return commands; 258 | }; 259 | 260 | export default useCommandList; 261 | -------------------------------------------------------------------------------- /cheatsheets/react.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 3 | image: "/assets/images/react.svg" 4 | --- 5 | 6 | ## Índice 7 | 8 | - [Índice](#índice) 9 | - [Elementos](#elementos) 10 | - [Sintaxis de un elemento](#sintaxis-de-un-elemento) 11 | - [Atributos de un elemento](#atributos-de-un-elemento) 12 | - [Componentes](#componentes) 13 | - [Fragmentos de React](#fragmentos-de-react) 14 | - [Propiedades](#propiedades) 15 | - [Condicionales](#condicionales) 16 | - [Operadores ternarios](#operadores-ternarios) 17 | - [If](#if) 18 | - [Listas](#listas) 19 | - [Hooks](#hooks) 20 | - [useState](#usestate) 21 | - [useEffect](#useeffect) 22 | - [useContext](#usecontext) 23 | - [useRef](#useref) 24 | - [useMemo](#usememo) 25 | - [useCallback](#usecallback) 26 | 27 |
28 | 29 | ## Elementos 30 | 31 | ### Sintaxis de un elemento 32 | 33 | Los elementos de React se escriben igual que los de HTML, hay algunas diferencias pero dentro de React se puede escribir HTML puro. 34 |
35 | Una diferencia con HTML, por ejemplo, es que no se pueden escribir elementos que no se cierran, como imagenes o saltos de línea. 36 | 37 | Por ejemplo, en HTML una imagen podría usarse así 38 | 39 | ```html 40 |
Hello world!
;
76 | }
77 | ```
78 |
79 | Los componentes de React deben empezar con una letra mayúscula obligatoriamente y devolver código JSX (HTML de React)
80 |
81 | ### Fragmentos de React
82 |
83 | Los componentes de React deben devolver un único elemento. Por ejemplo, esto no es válido.
84 |
85 | ```javascript
86 | function App() {
87 | return (
88 | Hello world!
89 | Hello world!
90 | );
91 | }
92 | ```
93 |
94 | Si se quiere devolver más de un elemento sin encerrarlo en otro, como un div, se debe usar un Fragmento, el cual puede expresarse de 2 maneras.
95 |
96 | ```javascript
97 | function App() {
98 | return (
99 | <>
100 | Hello world!
101 | Hello world!
102 |
103 | );
104 | }
105 | ```
106 |
107 | ```javascript
108 | function App() {
109 | return (
110 | Hello world!
112 | Hello world!
113 | Hola, {props.nombre}
; 131 | } 132 | ``` 133 | 134 | Esto resultará en 135 | 136 | ```html 137 |Hola, John Doe
138 | ``` 139 | 140 | Hay algunas propiedades que se pasan por defecto, como la propiedad children, la cual contiene los elementos que pusiste adentro del componente. 141 | 142 | Por ejemplo 143 | 144 | ```javascript 145 | function App() { 146 | return ( 147 |Hola, John Doe
149 |{props.children}
;
155 | }
156 | ```
157 |
158 | Esto resultará en
159 |
160 | ```html
161 |
162 |
164 | ```
165 |
166 | ## Condicionales
167 |
168 | Los condicionales en React se pueden hacer de 2 maneras, con operadores ternarios o con if.
169 |
170 | ### Operadores ternarios
171 |
172 | Los operadores ternarios se pueden usar para mostrar un componente si se cumple una condición.
173 |
174 | Por ejemplo, si quiero mostrar un componente si el usuario está logueado, puedo usar un operador ternario de la siguiente manera
175 |
176 | ```javascript
177 | function App() {
178 | const isLogged = true;
179 | return Hola, John Doe
163 |{isLogged ?
;
180 | }
181 | ```
182 |
183 | ### If
184 |
185 | Los condicionales if se pueden usar para mostrar un componente si se cumple una condición.
186 |
187 | Por ejemplo, si quiero mostrar un componente si el usuario está logueado, puedo usar un if de la siguiente manera
188 |
189 | ```javascript
190 | function App() {
191 | const isLogged = true;
192 |
193 | if (isLogged) {
194 | return
213 | {users.map((user) => (
214 |
217 | );
218 | }
219 | ```
220 |
221 | ## Hooks
222 |
223 | Los hooks son funciones que nos permiten usar características de React sin tener que crear un componente. Acá hay una lista de los hooks mas conocidos.
224 |
225 | ### useState
226 |
227 | El hook useState nos permite crear variables de estado, las cuales se pueden modificar y React se encargará de actualizar el componente.
228 |
229 | Por ejemplo, si quiero crear una variable de estado que se llame count y que empiece en 0, puedo usar el hook useState de la siguiente manera
230 |
231 | ```javascript
232 | function App() {
233 | const [count, setCount] = useState(0);
234 | return (
235 |
236 |
239 | );
240 | }
241 | ```
242 |
243 | ### useEffect
244 |
245 | El hook useEffect nos permite ejecutar código cuando se renderiza el componente o cuando se actualiza una variable de estado.
246 |
247 | Por ejemplo, si quiero ejecutar un código cuando se renderiza el componente, puedo usar el hook useEffect de la siguiente manera
248 |
249 | ```javascript
250 | function App() {
251 | useEffect(() => {
252 | console.log("Se renderizó el componente");
253 | }, []);
254 | return (
255 | Count: {count}
237 | 238 |
256 |
259 | );
260 | }
261 | ```
262 |
263 | Si quiero ejecutar un código cuando se actualiza una variable de estado, puedo usar el hook useEffect de la siguiente manera
264 |
265 | ```javascript
266 | function App() {
267 | const [count, setCount] = useState(0);
268 | useEffect(() => {
269 | console.log("Se actualizó la variable count");
270 | }, [count]);
271 | return (
272 | Count: {count}
257 | 258 |
273 |
276 | );
277 | }
278 | ```
279 |
280 | ### useContext
281 |
282 | El hook useContext nos permite usar el contexto de un componente padre en un componente hijo.
283 |
284 | Por ejemplo, si quiero usar el contexto de un componente padre en un componente hijo, puedo usar el hook useContext de la siguiente manera
285 |
286 | ```javascript
287 | const UserContext = React.createContext();
288 |
289 | function App() {
290 | return (
291 | Count: {count}
274 | 275 |Hola, {user}
; 300 | } 301 | ``` 302 | 303 | ### useRef 304 | 305 | El hook useRef nos permite crear una referencia a un elemento del DOM. 306 | 307 | Por ejemplo, si quiero crear una referencia a un elemento del DOM, puedo usar el hook useRef de la siguiente manera 308 | 309 | ```javascript 310 | function App() { 311 | const inputRef = useRef(null); 312 | return ( 313 |
314 |
315 |
316 |
317 | );
318 | }
319 | ```
320 |
321 | ### useMemo
322 |
323 | El hook useMemo nos permite crear una variable que se actualiza solo cuando una variable de estado cambia.
324 |
325 | Por ejemplo, si quiero crear una variable que se actualiza solo cuando el contador cambia, puedo usar el hook useMemo de la siguiente manera
326 |
327 | ```javascript
328 | function App() {
329 | const [count, setCount] = useState(0);
330 | const countDoble = useMemo(() => {
331 | return count * 2;
332 | }, [count]);
333 | return (
334 |
335 |
339 | );
340 | }
341 | ```
342 |
343 | ### useCallback
344 |
345 | El hook useCallback nos permite crear una función que se actualiza solo cuando una variable de estado cambia.
346 |
347 | Por ejemplo, si quiero crear una función que se actualiza solo cuando el contador cambia, puedo usar el hook useCallback de la siguiente manera
348 |
349 | ```javascript
350 | function App() {
351 | const [count, setCount] = useState(0);
352 | const incrementar = useCallback(() => {
353 | setCount(count + 1);
354 | }, [count]);
355 | return (
356 | Count: {count}
336 |Count doble: {countDoble}
337 | 338 |
357 |
360 | );
361 | }
362 | ```
363 |
--------------------------------------------------------------------------------
/cheatsheets/express.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: express.js
3 | image: "/assets/images/express.svg"
4 | ---
5 |
6 | ## Índice
7 |
8 | - [Índice](#índice)
9 | - [Instalación](#instalación)
10 | - [Creación de un servidor](#creación-de-un-servidor)
11 | - [Rutas](#rutas)
12 | - [Requests](#requests)
13 | - [Métodos HTTP](#métodos-http)
14 | - [GET](#get)
15 | - [Query parameters](#query-parameters)
16 | - [Path parameters](#path-parameters)
17 | - [POST](#post)
18 | - [Body parameters](#body-parameters)
19 | - [PUT](#put)
20 | - [DELETE](#delete)
21 | - [Responses](#responses)
22 | - [Métodos de respuesta](#métodos-de-respuesta)
23 |
24 | Count: {count}
358 | 359 |25 | 26 | ## Instalación 27 | 28 | Para instalar Express deberemos ejecutar el siguiente comando (dentro de un proyecto de Node ya inicializado): 29 | 30 | ```bash 31 | npm install express 32 | ``` 33 | 34 | ## Creación de un servidor 35 | 36 | Para crear un servidor con Express deberemos crear un archivo `index.js` y añadir el siguiente código (recordar que para utilizar `import` deben tener la configuración `"type": "module"` en el archivo `package.json`): 37 | 38 | ```js 39 | // Importamos la librería express 40 | import express from "express"; 41 | // Creamos el servidor de Express con la configuración estándar básica 42 | const app = express(); 43 | 44 | // Asociamos la ruta "/" a la función pasada como segundo parámetro 45 | app.get("/", (req, res) => { 46 | // Esto envía el texto "Hello World!" como respuesta a la HTTP request 47 | res.send("Hello World!"); 48 | }); 49 | 50 | // Iniciamos el servidor en el puerto 3000 51 | app.listen(3000, () => { 52 | console.log("Example app listening on port 3000!"); 53 | }); 54 | ``` 55 | 56 | Luego se puede ejecutar con el siguiente comando: 57 | 58 | ```bash 59 | node index.js 60 | ``` 61 | 62 | ## Rutas 63 | 64 | Las rutas son lo que permiten al cliente utilizar diferentes URLs para hacer uso de diferentes funcionalidades de nuestro programa. Para añadir una ruta a nuestro servidor, simplemente debemos añadir una nueva llamada a `app.get` (o `app.post`, `app.put`, `app.delete`, etc.) con la URL deseada y la función que se ejecutará cuando se realice la HTTP request con el método indicado en esa URL. 65 | 66 | ```js 67 | app.get("/ruta", (req, res) => { 68 | // Esto envía el texto "Hello World!" como respuesta a la HTTP request 69 | res.send("Hello World!"); 70 | }); 71 | ``` 72 | 73 | Con la siguiente HTTP request se ejecutará la función asociada a la ruta `/ruta`: 74 | 75 | ```http 76 | GET http://host:port/ruta HTTP/1.1 77 | ``` 78 | 79 | ## Requests 80 | 81 | ### Métodos HTTP 82 | 83 | Los métodos HTTP más comunes son: 84 | 85 | - `GET`: Se utiliza para obtener información del servidor. Toda la información enviada en una petición GET es visible en la URL. 86 | - `POST`: Se utiliza para enviar información al servidor. La información enviada en una petición POST no es visible en la URL, se envía en el cuerpo (_body_) de la petición. 87 | - `PUT`: Se utiliza para actualizar información en el servidor. Se suele enviar información tanto en la URL como en el cuerpo de la petición. 88 | - `DELETE`: Se utiliza para eliminar información del servidor. Al igual que el método `GET`, la información a eliminar se suele enviar en la URL. 89 | 90 | #### GET 91 | 92 | La información enviada en una petición GET es visible en la URL. 93 | 94 | ##### Query parameters 95 | 96 | Una de las formas de envíar datos dentro de la URL, es utilzando los _query parameters_. 97 | 98 | Por ejemplo, si queremos enviar un parámetro `nombre` con el valor `Juan`, la URL sería `http://host:port/ruta?nombre=Juan`. 99 | 100 | Si quereos enviar más de un parámetro, simplemente debemos separarlos con el símbolo `&`. Por ejemplo, `http://host:port/ruta?nombre=Juan&apellido=Perez`. 101 | 102 | ```http 103 | GET http://host:port/ruta?nombre=Juan&apellido=Perez HTTP/1.1 104 | ``` 105 | 106 | Para obtener los valores de los _query parameters_ en el servidor, los encontramos en la propiedad `req.query`. 107 | 108 | ```js 109 | app.get("/ruta", (req, res) => { 110 | // Obtenemos el valor del parámetro "nombre" 111 | const nombre = req.query.nombre; 112 | // Obtenemos el valor del parámetro "apellido" 113 | const apellido = req.query.apellido; 114 | // Esto envía el texto "Hello