Configurar el entorno de trabajo

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

curso básico de npm == https://platzi.com/clases/1763-npm/25047-acerca-de-npm-paquetes-y-modulos/

Sigo sin entender porque plazi esta dividido de manera tal que primero creas proyetos usando node, y 20 cursos despues toca hacer el “Curso basico de node” jajaj los contenidos son geniales, el “roadmap” deja mucho que desear

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!!

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 “npm 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"

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 →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

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 “CIENTIFICO” 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 “npm init” esto es para crear un “package.json” el cual tiene una configuración establecida por el profesor. Se van a crear dos carpetas principales: “public”(esta mostrara los archivos en la web) y “src” (aquí se enlazarán los archivos entre si). En la carpeta "public” se creara un archivo index.html (archivo principal), y en la carpeta “src” 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 “make 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?