hand Inicio
hand JSBloqs
hand GutenBloqs
Qué?
nochedía

DESARROLLO WEB con
REACT y WORDPRESS

Apúntate a la newsletter (escribo algo de tanto en cuanto)
Wallpaper)

Prepara tu entorno de trabajo para desarrollo GatsbyJS

500 palabras
2 minutos
July 2, 2020
cursosgatsbybasico

Para desarrollar en Gatsby o React necesitarás instalar NodeJS, vscode y ciertas librerías que te facilitarán mucho la vida

Prólogo

Para desarrollar necesitas un entorno de trabajo

En la época de los editores para web visuales los desarrolladores podían funcionar sin problemas con un simple NotePad

Hoy en día esto es impensable, las ventajas que te aporta un entorno de trabajo son masivas

El editor más popular para desarrollo en JavaScript (y compañía) es sin duda el visual studio code, editor libre y de código abierto de Microsoft que además está en sí mismo desarrollado en JavaScript (TypeScript) (aunque integra otros lenguajes para ciertas cosas donde necesita potencia)

Es la primera pieza de un ecosistema del que voy a hablar en este curso

Vamos allá

  1. Prólogo
  2. VSCode
  3. Extensiones de vscode
  4. NodeJS y npm
  5. Git
  6. Gatsby CLI
  7. Librerías para el desarrollo de nuestro proyecto
  8. Archivos para nuestro repositorio

VSCode

Puedes instalar la versión para tu sistema operativo en su web, y listos

Y continúa por instalarte las extensiones básicas y que convierten a vscode en un monstruo de la programación

Extensiones de vscode

Las puedes explorar aquí, y las básicas e indispensables son las siguientes

NodeJS y npm

NodeJS es el backend sobre el que compilaremos nuestro código y sobre el que con Gatsby generaremos nuestras páginas web estáticas

Con Node (recomiendo la versión LTS) también se te instalará npm

NPM es el repositorio de JavaScript por excelencia

Git

Git es un gestor de cambios que una vez te acostumbras a trabajar con él no te cansas de dar gracias de que algo así exista

Básicamente porque es como tener a un secretario/secretaria que te anota todos los cambios que has hecho desde siempre, con lo que tendrás no sólo una copia de seguridad de tu código sino un histórico de TODO

La copia de seguridad sólo la tendrás si te creas una cuenta en sitios tipo github o similares

Una vez tenemos una cuenta y hemos añadido los repositorios que queramos, para vincularlos con la carpeta de nuestro vscode tenemos que añadírselo

bash
git init
git remote add origin <la dirección .git de nuestro repo>

Para ahorrarnos esto siempre podemos crear primero el repositorio en github

Y después clonarlo en local

bash
git clone <la dirección .git de nuestro repo>

Esto nos creará la carpeta correspondiente con su vinculación ya hecha de serie

Gatsby CLI

El acrónimo de CLI se refiere a Command LIne, es decir, la manera de utilizar Gatsby desde el terminal, es lo que utilizaremos para instalar, compilar y publicar

Lo instalamos desde npm y de forma global

Con npm instalamos paquetes de forma global y de forma local

La primera instalará los paquetes en un directorio donde NodeJS siempre tendrá acceso

La segunda los instalará en un directorio que estará confinado en carpeta de nuestra aplicación, por lo que esos paquetes sólo estarán disponibles en ese contexto

Siempre que se pueda, mejor instalar en local

Para instalarlo

bash
npm install -g gatsby-cli

Si queremos hacerlo con yarn tenemos que añadir el path, nos lo explican aquí

Librerías para el desarrollo de nuestro proyecto

Básicamente prettier y eslint, de los que hemos instalado las extensiones en vscode

Prettier nos sirve para formatear tu código JavaScript siguiendo unas convenciones determinadas que hacen innecesario que pierdas un minuto en esto

Eslint es un linter que te avisará cuando detecte errores en tu código, lo cual es posiblemente lo mejor que le ha pasado a JavaScript desde siempre

bash
yarn add --dev eslint eslint-config-react-app eslint-config-prettier babel-eslint eslint-config-standard, eslint-plugin-import, eslint-plugin-node, eslint-plugin-prettier, eslint-plugin-promise, eslint-plugin-react, eslint-plugin-standard, eslint-plugin-mdx, prettier

Para eslint necesitas crear el archivo .eslintrc.json para configurarlo y que se entienda con prettier (y anular el formateador que también incluye eslint)

json
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": ["prettier"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {
"strict": 0,
"prettier/prettier": ["error"]
}
}

Para prettier es opcional pero si quieres cambiar algunas cosas crea el archivo .prettierrc (en mi caso sí hago algunos cambios)

json
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 120,
"arrowParens": "avoid"
}

Archivos para nuestro repositorio

Archivos comunes que te servirán para tu proyecto

  • Para gestionar los finales de línea del archivo y que siempre sean LF

.gitattributes

text=lf
*.css linguist-vendored eol=lf
*.scss linguist-vendored eol=lf
*.js linguist-vendored eol=lf
*.php eol=lf
*.twig eol=lf
*.md eol=lf
*.mdx eol=lf
CHANGELOG.md export-ignore

.gitconfig

[core]
autocrlf = false

.vscode/settings.json

json
{
"files.eol": "\n"
}
  • Para no sincronizar lo que no quieres sincronizar

.gitignore

node_modules
.cache
public
yarn.lock
yarn-error.log

Qué tal el curso?

👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏
Enviar Feedback ✍️
El texto está en blanco!
Gracias por enviarme tu opinión
👍

Si quieres explorar más cursos y más entradas en el blog, los tienes todos en la página principal, y si el contenido te ha ayudado dame las gracias por ejemplo por twitter con este enlace 👍

Privacidad
by kuworking.com
[ 2020 >> kuworking ]