Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Configurar el entorno de trabajo

3/16
Recursos

Aportes 51

Preguntas 9

Ordenar por:

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

o inicia sesi贸n.

Herramientas:

  • Terminal
  • Editor de codigo
  • Navegador

Todo proyecto inicia:

git init 

Inicializamos proyecto node:

npm init

Abrimos visual studio code:

code . 

Definicion de arquitectura de carpetas

/src //archivos
	/routes // las rutas de la aplicacion
	/utils // utilerias
	/styles // estilos
	/pages // paginas que va a tener nuestro proyecto
	index.js //archivo principal
/public // lo que mandamos a produccion
	index.html //template

Para crear varias carpetas con la terminal.
dentro de src

mkdir pages routes styles utils

El plugin parra mostrar los iconitos es
Material Icon Theme

Desde consola pueden correr todo este comando

mkdir src public; cd src; mkdir pages routes styles utils; touch index.js; cd ../public; touch index.html

Estructura de carpetas y archivos

Quien venga de los cursos basicos de html, es importante mencionar que debe ir un paso atr谩s y conocer sobre el manejo de la consola, sobre git y npm puede ser parte de Node.js

Pensaba que ya tenia un buen dominio de estas herramientas pero seguirle el paso al profe me cuesta, eso no es malo pero quer铆a expresarlo. 馃槃

Asi si me gusta, empezando el curso todo ordenadito, porque luego en otros cursos empiezan todo revuelto y sobre la marcha lo van ordenando y eso confunde, bien por el profe Oscar para poner orden desde el principio.

Les comparto este comando con el que pueden crear el proyecto desde la terminal, lo que deben hacer es ingresar en la carpeta donde quieren iniciar el proyecto y ejecutarlo:

mkdir cientifico; cd cientifico; git init; npm init -y; mkdir src public; mkdir src/routes src/utils src/styles src/pages; touch src/index.js public/index.html

As铆 es c贸mo queda el 谩rbol del proyecto:

.
鈹溾攢鈹 package.json
鈹溾攢鈹 public
鈹偮犅 鈹斺攢鈹 index.html
鈹斺攢鈹 src
    鈹溾攢鈹 index.js
    鈹溾攢鈹 pages
    鈹溾攢鈹 routes
    鈹溾攢鈹 styles
    鈹斺攢鈹 utils

6 directories, 3 files

si les cuesta trabajo crear los archivos al mismo tiempo, bajen la velocidad del video a 0.85

Con fe termino el curso hasta ma帽ana antes de la tarde!!! Todo por ser un Agente Puntoycoma!!!

Recomiendo los cursos de npm y de jquery a javascript.

Aqu铆 tienes el c贸digo en PowerShell para crear la estructura de directorios y archivos que mencionaste:

New-Item -ItemType Directory -Path "./src"
New-Item -ItemType Directory -Path "./src/routes"
New-Item -ItemType Directory -Path "./src/utils"
New-Item -ItemType Directory -Path "./src/styles"
New-Item -ItemType Directory -Path "./src/pages"
New-Item -ItemType File -Path "./src/index.js"

New-Item -ItemType Directory -Path "./public"
New-Item -ItemType File -Path "./public/index.html"

Puedes ejecutar estos comandos en PowerShell y deber铆a crear la estructura de directorios y archivos mencionada. Aseg煤rate de ejecutarlos desde la ubicaci贸n adecuada en tu sistema de archivos para que se creen en la ubicaci贸n deseada.

Se mira bueno este asunto siuuuu

interesante ojala termine a tiempo para ser un agente punto y coma

muy bueno!!

Sigo sin entender porque plazi esta dividido de manera tal que primero creas proyetos usando node, y 20 cursos despues toca hacer el 鈥淐urso basico de node鈥 jajaj los contenidos son geniales, el 鈥渞oadmap鈥 deja mucho que desear

Este curso esta muy bueno

Estructura base de un proyecto
*public
-index.hmtl
*src
-page(carpeta)
-routes(carpeta)
-styles(carpeta)
-utils(carpeta)
-index.js

Si se quieren saltar todos los pasos al inicializar el NPM, pueden usar el comando

npm init -y

Y ya despu茅s configuran el package.json como gusten

Al momento de hacer el 鈥渘pm init鈥, se agregaron el nombre del autor, adem谩s de su correo, porque el maestro ya hab铆a seteado estos par谩metros. Esto se hace de la siguiente manera

npm set init.author.name = "@name"
npm set init author.email = "@email"
Oscar y sus buenas pr谩cticas. 鈽濓笍

perfecto 馃槃

Tendr茅 que tomar el curso de npm s铆 o s铆, es algo que me despierta mucha curiosidad porque todos en JS trabajan con eso

Estamos listos

Listoo

para este proyecto es aconsejable ver el curso de npm y el de jquery a javascript. a mi me toco ver el de npm me suelen sarrer algunos errores

Si deseas saltar las preguntas cuando haces npm init puede ejecutarlo de esta manera

npm init --y

Perfecto, ahora si se entiende, sigamos!

Muy bien, hasta aqui todo ok!

A darle con todo.

驴Como se llama el plugin para que en VSC muestre los iconos del folder?

genial 馃槃 iniciemos este nuevo curso.

PREGUNTA DE EXAMEN:
Como iniciar GIT

Este man es uno de los mejores profesores, ya es el quito curso que tomo con el

Incre铆ble ahora comenzamos a programar

Listo el entorno, vamos por m谩s 鈥

Les dejo el Tema de Visual Studio Code que esta usando el profesor esta bastante cool, tiene fuentes con Glow Effect! esta muy bueno, sigan las instrucciones para poder instalar el tema correctamente porque no funciona con solo habilitarlo 馃槂

Thema SynthWave '84

Resumen de la clase

Configuracion del proyecto

Debemos comenzar creando una carpete

mkdir cientifico

Luego nos movemos al directorio

cd cientifico

Iniciamos iniciando el repositorio

git init

Luego se conectara al repositorio remoto que puede ser Github,Gitlab u otro de preferencia.

Iniciando el proyecto con npm(node)

npm init

Luego debemos completar los valores que nos node nos indica:

package name 鈫 indicamos el nombre que puede el mismo que nos da de referencia

version 鈫 indicamos que es la version 1.0.0

description 鈫 single page application

entry point 鈫 dejamos por defecto (se puede cambiar por otro)

test comando 鈫 no se va a usar por el momento

git repository 鈫 todavia no lo tenemos

keywords 鈫 javascript

licence鈫 MIT

Arquitectura del proyecto

Creamos carpeta src donde va a estar todo el codigo de la app.

  /src 鈫抋rchivos	

/routes  鈫  las rutas de la aplicacion	

/utils 鈫 utilerias

/styles 鈫 estilos

/pages 鈫 paginas que va a tener nuestro proyecto

index.js 鈫 archivo principal

/public 鈫 lo que mandamos a produccion

index.html 鈫 template

siento que prefiero la terminal de linux que las que vienen en windows

Genial, Todo listo a Darle 馃挭

Me gustan las clases de Oscar porque deja en claro desde un inicio cu谩l va a ser la estructura del proyecto. Cero improvisaci贸n.

Siempre arquitectura con est谩ndares de frontend, esto es importante, ya que en recursos de empresas a veces no es as铆, por lo tanto es un 谩rea de oportunidad

Instale hasta los plugins!!!..jaja

Si no pudiste seguir el paso del profesor te aconsejo que veas el curso de terminal de comandos y git y github. En tal caso simplemente abres tu VISUAL STUDIO CODE y creas una carpeta con el nombre del proyecto 鈥淐IENTIFICO鈥 tranquilamente y desde el panel de herramientas le das a la secci贸n terminal, alli ejecutas git init y se creara el archivo .git, luego colocas 鈥渘pm init鈥 esto es para crear un 鈥減ackage.json鈥 el cual tiene una configuraci贸n establecida por el profesor. Se van a crear dos carpetas principales: 鈥減ublic鈥(esta mostrara los archivos en la web) y 鈥渟rc鈥 (aqu铆 se enlazar谩n los archivos entre si). En la carpeta "public鈥 se creara un archivo index.html (archivo principal), y en la carpeta 鈥渟rc鈥 4 carpetas ( pages, routes, styles, utils) y un archivo principal para el javascript llamado index.js.

Genial este curso a falta del de webpack, por ahora

mkdir en la consola sirve para crear una nueva carpeta es como la abreviatura de 鈥渕ake a direction鈥.
cd es "change direction"
En la carpeta creada inicializamos nuestro proyecto con git init y luego npm init.

Oscar no suelo mucho comentar pero debo decir que sin duda hasta ahora eres el mejor profe que tiene Platzi, la experiencia de aprendizaje contigo es diferente. Se aprecia tu entusiasmo.

f

Hola, alguien me puede decir cu谩l es el comando en windows que corresponde al comando git init?