From a554da547a03bc01f84ef449d2b391fe74c59b94 Mon Sep 17 00:00:00 2001 From: Ivy Feraco Date: Tue, 16 Aug 2022 11:26:40 -0500 Subject: [PATCH] =?UTF-8?q?fix(content):=20Social=20Network=20con=20Framew?= =?UTF-8?q?orks:=20Actualizar=20proyecto=20con=20Objetivos=20de=20Aprendiz?= =?UTF-8?q?aje=20estandarizados=20y=20revisi=C3=B3n=20general=20del=20enun?= =?UTF-8?q?ciado=20(#1207)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 | 61 ++++++++++++++++++----- projects/05-social-network-fw/project.yml | 39 +++++++++++++++ 2 files changed, 88 insertions(+), 12 deletions(-) create mode 100644 projects/05-social-network-fw/project.yml diff --git a/projects/05-social-network-fw/README.md b/projects/05-social-network-fw/README.md index f8e8e5e7e..840dfaadb 100644 --- a/projects/05-social-network-fw/README.md +++ b/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 -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/* -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 -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/) diff --git a/projects/05-social-network-fw/project.yml b/projects/05-social-network-fw/project.yml new file mode 100644 index 000000000..e1b05979e --- /dev/null +++ b/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