fix(content): Social Network con Frameworks: Actualizar proyecto con …

…Objetivos de Aprendizaje estandarizados y revisión general del enunciado (#1207)

* adding OAs yml and part of readme

* fix(content): fix mdlink list errors

* correct indice section

* making linter happy

* undo the automated generated index

* fix(content): revision readme, update links, remove dead ones

* chore(fix): add js OAs loops y vars to make it similar to SN OAs

* add note about create-react-app

* correct link to hacker edition

projects/05-social-network-fw/README.md

@@ -51,11 +51,9 @@ cero, su alcance, sus particularidades, el flujo, las validaciones, etc.
 Concéntrate en aprender y utilizar estas nuevas tecnologías.
 
 El alcance del proyecto y el detalle de sus características es exactamente
-[el mismo que el original](https://github.com/Laboratoria/curricula-js/tree/v2.x/projects/03-social-network),
+[el mismo que el original](https://github.com/Laboratoria/curricula-js/tree/main/projects/03-social-network),
 incluyendo la parte de Hacker Edition pero excluyendo la parte de UX.
 
-## 3. Objetivos de aprendizaje
-
 El objetivo principal de aprendizaje es familiarizarse con el desarrollo web
 usando el _framework_ o _librería_ elegido, y todo lo que ello conlleva:
 **documentación**, **arquitectura**, **principios de diseño**, **paradigma**,
@@ -68,6 +66,16 @@ web, es muy común tener que enfrentarse a este tipo de escenario donde decidimo
 (o alguien decide por nosotros) que lo mejor para seguir evolucionando una
 aplicación es re-escribirla usando una nueva tecnología.
 
+## 3. Objetivos de aprendizaje
+
+> ℹ️ Esta sección será auomáticamente generada en el idioma pertinente, a partir
+> de los objetivos de aprendizaje declarados en [`project.yml`](./project.yml),
+> al crear el repo del proyecto para un cohort en particular usando
+> [`./scripts/create-cohort-project.js`](../../scripts#create-cohort-project-coaches).
+>
+> Acá puedes ver una [lista de todos los objetivos de aprendizaje](../../learning-objectives/data.yml)
+> que contempla nuestra currícula.
+
 ## 4. Consideraciones generales
 
 Este proyecto se debe "resolver" en duplas.
@@ -82,11 +90,11 @@ Para comenzar tendrás que hacer un _fork_ y _clonar_ este repositorio.
 
 ## 5. Criterios de aceptación mínimos del proyecto
 
-Ver [03-social-network](https://github.com/Laboratoria/curricula-js/tree/v2.x/projects/03-social-network#parte-obligatoria).
+Ver [03-social-network](https://github.com/Laboratoria/bootcamp/tree/main/projects/03-social-network#5-criterios-de-aceptación-mínimos-del-proyecto).
 
 ## 6. Hacker edition
 
-Ver [03-social-network](https://github.com/Laboratoria/curricula-js/tree/v2.x/projects/03-social-network#hacker-edition).
+Ver [03-social-network](https://github.com/Laboratoria/curricula-js/tree/main/projects/03-social-network#6-hacker-edition).
 
 ## 7. Entrega
 
@@ -103,13 +111,6 @@ Antes de elegir un framework, te recomendamos leer los siguientes artículos:
 * [The deepest reason why modern JavaScript frameworks exist](https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445)
 * [Should I use frameworks or libraries such as Angular, React, or VueJS or not?](https://dev.to/ericpaulbasbas/should-i-use-frameworks-or-libraries-such-as-angular-react-or-vuejs-or-not-3dp)
 
-Hemos preparado algunos videos introductorios:
-
-* [Introducción a Frameworks de JavaScript (Lupo)](https://laboratoria-1.wistia.com/medias/22j8ut23y5)
-* [Introducción a Angular (Fabián)](https://laboratoria-1.wistia.com/medias/2dxpgs2s59)
-* [Introducción a React (Elizabeth)](https://es.reactjs.org/)
-* [Introducción a Vue (Luis)](https://vuejs.org/)
-
 No dejes de explorar la documentación oficial de cada herramienta:
 
 ### React
@@ -120,6 +121,42 @@ No dejes de explorar la documentación oficial de cada herramienta:
 * [create-react-app](https://github.com/facebook/create-react-app)
 * [React js en español - tutorial básico, primeros pasos y ejemplos - frontendlabs.io](https://frontendlabs.io/3158--react-js-espanol-tutorial-basico-primeros-pasos-ejemplos)
 
+### :information_source: Nota para estudiantes que elijan React y `create-react-app`
+
+Si tratas de usar [`create-react-app`](https://reactjs.org/docs/create-a-new-react-app.html)
+en el directorio del proyecto recibirás un error diciendo que hay archivos que
+podrían presentar un conflicto. Para evitar este problema puedes crear una nueva
+app usando `create-react-app` y de ahí _mezclarla_ con la carpeta del proyecto:
+
+```sh
+# Si estabas en la carpeta del proyecto, salimos a la carpeta de más arriba
+cd ..
+
+# Creamos una nueva aplicación con `create-react-app` en la carpeta
+# `social-network-tmp`
+npx create-react-app social-network-tmp
+
+# Copiamos el _boilerplate_ del proyecto _encima_ de la aplicación creada con
+# `create-react-app`
+cp -r <cohort-id>-social-network-fw/* social-network-tmp/
+
+# Copiamos el contenido de la aplicación creada con `create-react-app` de vuelta
+# al repo del proyecto (teniendo en cuenta el archivo _oculto_ `.gitignore`).
+cp -r social-network-tmp/.gitignore social-network-tmp/* <cohort-id>-social-network-fw/
+
+# Ya podemos borrar la instalación _temporal_ y quedarnos solo con el repo del
+# proyecto, con el que partimos.
+rm -rf social-network-tmp
+
+# Volvemos a entrar en el directorio del proyecto y ya deberíamos estar listas
+# para comenzar.
+cd <cohort-id>-social-network-fw
+
+# Para confirmar que todo fue bien arranca la aplicación con el siguinte comando
+# y verifica que la interfaz se abre en el navegador.
+yarn start
+```
+
 ### Angular
 
 * [Angular - docs oficiales](https://angular.io/)

projects/05-social-network-fw/project.yml

@@ -0,0 +1,39 @@
+learningObjectives:
+  - html/semantics
+  - css/selectors
+  - css/box-model
+  - css/flexbox
+  - css/grid
+  - css/media-queries
+  - js/data-types/arrays
+  - js/data-types/objects
+  - js/data-types/primitive-vs-non-primitive
+  - js/variables
+  - js/conditionals
+  - js/loops
+  - js/functions
+  - js/testing/unit
+  - js/testing/async
+  - js/testing/mocks
+  - js/modules/es-modules
+  - js/linting
+  - js/semantics
+  - js/expression-vs-statement
+  - js/async/callbacks
+  - js/async/promises
+  - scm/git/setup
+  - scm/git/intro
+  - scm/git/integration
+  - scm/github/setup
+  - scm/github/gh-pages
+  - scm/github/collaboration
+  - scm/github/project-management
+  - user-centricity/centricity
+  - product-design/interactivity
+  - product-design/visual-design
+  - research/test
+  - firebase/auth
+  - firebase/firestore
+  - angular
+  - react
+  - vue