0_koobin-formacions-index.md

Índex de formacions a Koobin

Sessió 1 (24/10/2017): Introducció a Node.js, npm i yarn

Continguts

• Que és Node.js?
• Que és npm?
• Gestió de dependències
  • Semver
  • Problemes freqüents
• Que es yarn? Quins problemes resol?

Referències

• Node.js
  • Artícle Modules
• npm
  • npm-semver
• Yarn
• Semver

Gravació de pantalla

Exercici

Go!

Sessió 2 [1/2] 30m (31/10/2017): Yarn workspaces i Lerna

• Multirepo vs. monorepo
• Administrar un monorepo multipaquet

Referències

• Yarn Workspaces
• Lerna

Sessió 2 [2/2] 30m (31/10/2017): Introducció a React

• Que és react?
• create-react-app (si hi ha temps)

Referències

• React

Sessió 3 (14/11/2017): Creació d'un component (CSS)

Continguts

• Creació d'un component amb CSS i HTML

Referències

• Emmet
• BEM
• CSS positions 1
• CSS positions 2
• CSS units
• Flexbox guide
• Flexbox zombies 🤢: Curs gratuït de flexbox (valor estimat 225$)

Codepen

ToDo Component part 1

1_exercici_1.md

Exercici sessió 1

Requisits previs

• Instalar Node.js
• Instalar Yarn

Pas 1: Iniciar un nou projecte

Executa les següents comandes:

mkdir koobin-control-panel
cd koobin-control-panel
yarn init

Omplena els camps que va demanant el prompt.

El resultat ha deser un nou arxiu package.json amb la següent estructura:

{
  "name": "koobin-control-panel",
  "version": "1.0.0",
  "description": "Aplicació per generar automàticament noves instàncies Koobin.",
  "main": "index.js",
  "author": "David Asensio Cañas",
  "license": "MIT",
  "private": false
}

Crea un nou arxiu anomenat index.js:

touch index.js

Pas 2: Afegir nova dependència

yarn add chalk

Pas 3: Hello colorful world!

Crea la carpeta src:

mkdir src

Crea un nou arxiu DyeIt.js dins de la carpeta src:

cd src
touch DyeIt.js

Implementa el codi:

./src/DyeIt.js

const chalk = require('chalk')

const colors = [
  chalk.red,
  chalk.green,
  chalk.yellow,
  chalk.blue,
  chalk.magenta,
  chalk.cyan,
  chalk.white,
  chalk.gray
];

function PickRandomColor() {
    return colors[Math.floor(Math.random() * (colors.length-1))];
}

function DyeIt(textToDye) {
  let dyedText = '';
  let charCount = textToDye.length;
  
  while(charCount--) {
    dyedText = PickRandomColor()(textToDye[charCount]) + dyedText;
  }

  return dyedText;
}


module.exports = DyeIt;

./src/index.js

const DyeIt = require('./src/DyeIt');

console.log(`Hello ${DyeIt('colorful')} world!`);

Pas 4: Executa el codi

node index.js

Pas 5: Registra un nou script npm

Afegeix al package.json la següent clau:

{
  "scripts": {
    "start": "node index.js"
  }
}

Pas 6: Executa l'script via Yarn

yarn start

Resultat:

.
└── koobin-control-panel
    ├── index.js
    ├── node_modules
    │   │...
    ├── package.json
    ├── src
    │   └── DyeIt.js
    └── yarn.lock

You're all set!! 👍