No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Configuraci贸n

5/26
Recursos

Aportes 44

Preguntas 20

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

pwd: Saber donde estoy ubicado.
mkdir: Creaci贸n de carpeta
cd: Moverse a carpetas
git init: Inicias Git
npm init: Le da nombre, versi贸n, entre otras cosas al proyecto
code . : Inicia el editor de c贸digos

鈿欙笍 饾棖饾椆饾棶饾榾饾棽 #饾煴: 饾棖饾椉饾椈饾棾饾椂饾棿饾槀饾椏饾棶饾棸饾椂贸饾椈 饾煴/饾煯饾煭 鈿欙笍
.
馃枊锔 Conceptos fundamentales antes de crear el proyecto:
.

  • Web APIs JavaScript del lado del cliente: setTimeout, XMLHttpRequest, File Reader, DOM. Node: fs, https.
  • API: El t茅rmino API es una abreviatura de 鈥淎pplication Programming Interface鈥 (Interfaz de programaci贸n de aplicaciones en espa帽ol). Es un conjunto de rutinas que provee acceso a funciones de un determinado software.
  • Hoisting: Sugiere que las declaraciones de variables y funciones son f铆sicamente movidas al comienzo del c贸digo en tiempo de compilaci贸n.
  • XML: Lenguaje de marcado creado para la transferencia de informaci贸n, legible tanto para seres humanos como para aplicaciones inform谩ticas, y basado en una sencillez extrema y una r铆gida sintaxis. As铆 como el HTML estaba basado y era un subconjunto de SGML, la reformulaci贸n del primero bajo la sintaxis de XML dio lugar al XHTML; XHTML es, por tanto, un subconjunto de XML.
  • DOM: El DOM permite acceder y manipular las p谩ginas XHTML como si fueran documentos XML. De hecho, DOM se dise帽贸 originalmente para manipular de forma sencilla los documentos XML.
  • Events: Comportamientos del usuario que interact煤a con una p谩gina que pueden detectarse para lanzar una acci贸n, como por ejemplo que el usuario haga click en un elemento (onclick), que elija una opci贸n de un desplegable (onselect), que pase el rat贸n sobre un objeto (onmouseover), etc.
  • Compilar: Compilar es generar c贸digo ejecutable por una m谩quina, que puede ser f铆sica o abstracta como la m谩quina virtual de Java.
  • Transpilar: Transpilar es generar a partir de c贸digo en un lenguaje c贸digo en otro lenguaje. Es decir, un programa produce otro programa en otro lenguaje cuyo comportamiento es el mismo que el original.
    .
    .
    馃洜锔 Crear e inicializar un Proyecto:
    .
  1. Tener instalado Visual Studio Code.
    .
  2. Abrir la terminal (en Linux al presionar las teclas Ctrl + Alt + T).
    .
  3. Para conocer donde estamos ubicados se escribe pwd y se da ENTER.
    .
  4. Para ver las carpetas y archivos del lugar donde estamos, se escribe ls y se da ENTER.
    .
  5. Para crear una carpeta se escribe mkdir nombre-de-la-carpeta y se da ENTER.
    .
  6. Para entrar a una carpeta se escribe cd nombre-de-la-carpeta y se da ENTER.
    .
  7. Si se quiere ir a la carpeta contenedora de la carpeta actual que estamos, se escribe cd 鈥 y se da ENTER.
    .
  8. En linux para no escribir los comando de mkdir y cd, se escribe take nombre-de-la-carpeta y se da ENTER.
    .
  9. Para crear un archivo se escribe touch nombre-del-archivo-extensi贸n y se da ENTER.
    .
  10. Para limpiar la pantalla en la terminal se escribe clear y se da ENTER.
    .
  11. Si solo se quiere mover el scroll se presionan las teclas Ctrl + Alt + l
    .
  12. Para iniciar el repositorio se escribe git init y se da ENTER.
    .
  13. Vamos a inicializar el proyecto con npm, se escribe npm init y se da ENTER.
    .
  14. Aparece el nombre del proyecto, si no se quiere modificar el nombre, se da ENTER.
    .
  15. Aparece la versi贸n del proyecto, si no se quiere modificar el n煤mero, se da ENTER.
    .
  16. Aparece la descripci贸n del proyecto, si se quiere modificar dejar vac铆o, se da ENTER.
    .
  17. Lo mismo, dejar vac铆o: entry point, test command, git repository.
    .
  18. En keywords se escribe las palabras claves como javascript y se da ENTER.
    .
  19. En la licencia por defecto aparece la ISC, pero la m谩s com煤n es la MIT para compartir y poder comercializar despu茅s el producto.
    .
  20. Por 煤ltimo, aparecen los datos ingresados (guardados en el archivo package.json) y si no hay que modificar, se escribe yes y se da ENTER.
    .
  21. Para entrar al editor VSC se escribe code . y se da ENTER.
    .
  22. Una vez dentro de VSC, en el panel izquierdo aparece el archivo package.json, crear una nueva carpeta llamada src donde contendr谩 nuestro c贸digo.
    .
  23. Crear el archivo .gitignore (estar谩 fuera de la carpeta src). En los sistemas Unix, dado que el archivo empieza con un punto, al abrir un explorador de archivos los toma como archivos ocultos y no son visibles. El contenido del archivo queda:
     /node_modules/
  1. Para guardar los cambios de un archivo, presionar las teclas Ctrl + S
    .
  2. Muy importante instalar la extensi贸n Code Runner, presionar las teclas Ctrl + P y pegar: ext install formulahendry.code-runner y dar ENTER. Lo instala autom谩ticamente (fuente: aqu铆).

Para aquellos que se quieran saltar las preguntas del npm init
pueden agregar el flag --yes o -y para que les genere el archivo por defecto.

npm init -y

Cuando me lo explican todo lo que necesito tan claro como lo hizo el profe!

Un comando 煤til para ignorar archivos cuando se utiliza git con node es:

npx gitignore node

Pueden generar f谩cilmente un gitignore en esta pagina solo deben pasarle el nombre de la tecnolog铆a para la que usaran el archivo

https://www.toptal.com/developers/gitignore/

Para aquellos que no les funcione el npm init
Deben verificar si tienen instalado NodeJS en su 煤ltima versi贸n, pueden chequearlo en la terminal con el siguiente comando 鈥渘ode -v鈥
En caso de no recibir respuesta puedes instalarlo desde su sitio oficial: nodejs .org
Aunque mi recomendacion es que vean el curso de prework para tener todo configurado para este y los proximos cursos 馃槂

Pienso que antes de este curso se debe tomar el curso donde el profesor te dice como instalar todo de acuerdo a tu sistema operaitvo. De hecho lo explica bien.

Aca algunos comandos que me se.

ls -> Te muestra los archivos que hay donde estas ubicado.
cd 鈥 -> Retrocede de carpeta.
cd -> Avanza de carpeta.
rm -> Eliminar un archivo o carpeta.
cd ~ -> Te lleva al home de la terminal.
cd mnt -> Te lleva al directorio de windows.
touch -> Crear un archivo .
mv -> Mover un archivo o carpeta .

Les recomiendo el curso de github con Freddy, github es鈥 hermoso.

https://platzi.com/cursos/git-github/

Me gusta que despues del curso de git, seguimos usando los repositorios asi nos acostumbramos a llevar buenas practicas en nuestros proyectos

Agregar autor

tu nombre <tucorreo@correo.com>

. code me sirvio en windows.

git init -> Repositorio inicializado
npm init -> inicializar nuestro proyecto con NPM

pwd: Print Working Directory
mkdir: MaKe DIRectory

Para crear el .gitignote desde la terminal podemos escribir touch .gitignore

Pueden utilizar esta web para construir su .gitignore mas f谩cil

https://www.toptal.com/developers/gitignore/

Instalado Code Runner

si no lo han hecho, les recomiendo mucho tomar antes el curso de nodeJs y saber un poco de Git, si no saben nada de nodeJs se van a perder mucho a lo largo del curso

Para instalar node js

sudo apt-get update
apt-get update

sudo apt install nodejs
nodejs -v
sudo apt install npm 

Otra opci贸n:
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-es

![]()![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-03-07%20111256-f308c519-b97a-435e-b9b8-6dc97136d9a6.jpg) ayuda me sale este error una y otra vez

Resumen de la clase

Comandos importantes

  • pwd (print working directory) 鈫 Imprime la ruta del directorio en el cual estamos
  • mkdir (make directory) 鈫 Crea un nuevo directorio con el nombre que indiquemos
  • cd (change directory) 鈫 Cambiar la ruta de trabajo
  • gitEl sistema de control de versiones
  • git init 鈫 Inicializa un repositorio
  • npm init 鈫 Inicializar el package.json
  • code 鈫 El comando de VS Code para abrir un directorio o fichero que indiquemos

Estructura de trabajo

  • El directorio src (source) contendr谩 todo nuestro c贸digo
  • El archivo .gitignore sirve para ignorar directorios y ficheros que indiquemos
Lo unic贸 que no entiendo es por qu茅 usar Code Runner en lugar de instalar NodeJS de una vez

Ventajas de saber manejar la terminal

Requiere pocos recursos

Al manejarse solo con texto no necesita mucho procesamiento lo que le brinda la capacidad de utilizar el tiempo no desperdiciado en cumplir la tarea requerida y no en procesar la visualizaci贸n de una imagen.

Conciso y poderoso

Bajo este paradigma un programa tiene much铆simas opciones que suelen estar ocultas pero pueden ser accedidas mediante el comando correcto dando poder a la herramienta. Esto se d谩 gracias a que el enfoque es la funcionalidad y no necesariamente la simpleza.

Preferido por expertos

Suele ser una tendencia. Lo que no quiere decir que siempre los expertos la emplean o que uno es experto por el simple hecho de usarlas. Gracias al poder que este paradigma y el escaso consumo de recursos los usuarios exigentes suelen utilizarlos.

Esto se d谩 por ejemplo en el campo de las ingenier铆as y ciencias de la computaci贸n.

Alguien sabe cual es el tema que tiene el profe en su terminal?

yaestamo uwu

.gitignore

# Created by https://www.toptal.com/developers/gitignore/api/node
# Edit at https://www.toptal.com/developers/gitignore?templates=node

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

### Node Patch ###
# Serverless Webpack directories
.webpack/

# Optional stylelint cache

# SvelteKit build / generate output
.svelte-kit

# End of https://www.toptal.com/developers/gitignore/api/node
Ask AI to edit or generate...

los comandos de la consola de windows son los de ms-dos.
cd nombreCarpeta- para ingresar a al carpeta
cd鈥 para salir de la carpeta
md para crear carpeta
rd para eliminar carpeta
copy para copiar archivo o carpeta
rename para renombrar archivo o carpeta
del para borrar archivo
del *.jpg para borrar todos los archivos con extension jpg

  • lo mismo para todas las extensiones *
    del . para borrar todo dentro de una carpeta o directorio
    dir para ver lo que hay en la carpeta o el directorio
    dir / ah para ver el contenido oculto archivos y carpetas dentro del directorio o carpeta
    attrib para mostrar u ocultar archivos o carpetas y son las que me recuerdo por ahora

Algunos comandos de la consola de windows:

CD - sirve para cambiar de directorio.
DIR - lista el contenido del directorio o carpeta, mostrando las subcarpetas que tiene.
TREE CARPETA - 谩rbol de directorios de una carpeta concreta.
CLS - limpia la ventana de la consola de Windows, quedar谩 como si la acabaran de abrir.
EXIT - cierra la ventana de la consola de Windows.
HELP - muestra todos los comandos disponibles.
COPY ARCHIVO DESTINO - copia uno o m谩s archivos en la direcci贸n que elijas.
ROBOCOPY - borra el archivo o carpeta que le indiques.
RENAME ARCHIVO - permite cambiar el nombre de un archivo, incluso de una extensi贸n.
MD NOMBREDECARPETA - crea una carpeta con el nombre que asignes en la direcci贸n en la que te encuentres.

Otra extensi贸n que recomiendo es Error Lens para saber si hay un error en tal l铆nea en espec铆fico.

Lo importante que es git y el curso de Freddy, se utiliza en todo, dejo un recorderis por ac谩 de algunos comandos importantes.

  • pdw: Muestra la ruta donde est谩n los archivos del usuario
  • cd /: change direction y la direcci贸n a la que quiero ir.
  • ls: listar archivos
  • clear o ctrl l: limpiar la consola
  • ls -al: todos los archivos incluso los ocultos en una lista
  • flecha arriba: ultimo comando
  • ls -a: grupos de archivos pero no en una lista
  • cd 鈥 carpeta anterior
  • cd 鈥渓etra+tab鈥 y rellena
  • mkdir nombrecarper //crear carpeta en la ubicaci贸n
  • rmdir nombmnrecarpe //eliminar carpeta en la ubicaci贸n
  • mv nombrearchivo nombrearchivonevo Para cambiar el nombre de un archivo/carpeta
  • cd . carpeta actual
  • source ~/.bashrc Actualizar cambios en configuraci贸n de la terminal.
  • touch crear un archivo vac铆o
  • history para listar la lista de comandos anteriores
  • !## para reproducir esa acci贸git rn de nuevo
  • rm archivoaborrar borra archivo
  • git init iniciar un repositorio en esa ubicaci贸n
  • git add nombredelarchivo.ext para agregar el archivo a la rama de GIT (actualizar su contenido)
  • git status muestra el estado del archivo en GIT, muestra si hay cambios
  • git rm nombredelarchivo.ext eliminar el archivo del repositorio

馃崈 Les paso dejando algunas herramientas que les pueden.

Creador de gitignore

Toptal tiene una web que les puede crear archivos .gitignore bastante completos.
馃檲 https://www.toptal.com/developers/gitignore

Cursos de Platzi

Les dejo por ac谩 unos cursos que les pueden ayudar a entender bien git, la terminal y la configuraci贸n de VSCode.

Espero les sirvan!

En https://www.gitignore.io/ puedes generar informaci贸n m谩s completa para el fichero, indic谩ndole las tecnolog铆as que trabajaras por ejemplo visual studio code y node o los que necesites y la herramienta te genera la informaci贸n que debes copiar y luego pegar dentro del archivo .gitignore que creaste.

Saludos

Vscodium, en caso de querer usar vscode pero sin los extras innecesarios de microsoft, esto es posible gracias a que MS 鈥渓ibrero鈥 el c贸digo de vscode.

https://vscodium.com/

Les recomiendo utilizar la pagina gitignore.io para generar si archivo git ignore mucho mas ordenado. solo deben colocar las tecnologias que van a usar y el autocompleta el archivo, luego solo deben copiar y pegar en su archivo

La extencion de VSC cCode Runner te permite ejecutar codigo directamente desde el editor sin usar una terminal aparte

Estoy viendo que puedo usar Git Bash, y wsl (ubuntu) para hacer lo que dijo el profe.

Quiero un teclado como el del profe

Para quienes se encuentren en Linux, pueden instalar NVM (node version manager) para obtener las ultimas versiones de este y poder probar cosas nuevas incorporadas, tan solo tienes que ir a la documentacion de NVM

god

Hey como que falto decir que plugin como eslint y cosas que nos ayuden con js

Por si les aparece esto en WSL 鈥榖ash\r鈥: No such file or directory

entren ac谩

Es importante el curso de dependencias npm, Oscar es un maestro鈥

Instalando Code Runner:

En Visual code 鈥楥trl + P鈥 y pega esto:

ext install formulahendry.code-runner