git

Flujo de trabajo: el repositorio local esta compuesto por tres arboles administrados
por git:
Directorio de trabajo: contiene los archivos
Index: actúa como zona intermedia
Head: apunta al último commit realizado

git checkout master: volver a la ultima versión de la rama master

git checkout -b new_branch_name: crear un nuevo Branch
git branch: listar todas las ramas existentes
git branch -d nombredela_rama: eliminar una rama. Tienes que encontrarte en otra
rama distinta en ese momento
commit y add juntos: git commit -m “ “: significa mensaje que debe ser una breve
descripción de los cambios a los que se les está realizando commit. git commit -a
“ “ : representa todo (all). Esta opción prepara automáticamente todos los archivos
para realizarles commit.
git rm nombredelarchivo: eliminar archive del index
git diff: para ver los cambios realizados en el codigo antes de usar la orden git add.
Si se indica parametro hara una comparativa entre la version indicada y el estado
actual.
git tag -a v1.0 -m “esta es la version 1.0 del tag” : marca un commit especifico con
un id simple que nunca se cambia:
git tag -d nombredelaetiqueta: borrar una etiqueta
clase 3:
cat nombredelarchivo: muestra el contenido del archive
git reset --soft head~1: elimina el ultimo commit generado
git reset --hard head~: elimina por complete los datos introducidos
git stash: guarda los cambios sin confirmer (los preparados y los que no) para
usarlos mas adelantes y los deshace en el codigo que estas trabajando
git stash pop: Vuelve a aplicar los cambios de un stash
.gitignore: es un archive de texto que le dice a git que archivos o carpetas ignorar
en un Proyecto
*se utiliza como una coincidencia comodin
/ se usa para ignorar las rutas relativas al archive .gitignore
# es usado para agregar comentarios

git clone [email protected]:user/test.git : crear una copia de repositorio git de una

Fuente externa
cargar tu proyecto a github: tienes que añadir el repositorio remota a github que
creaste
git remote add origin (nombre del repositorio)

git pull <nomre-remoto>: obtiene los archivos del repositorio remote y los combina
con el local
git push <nombre-remoyo> <nombre-de-tu-rama>: envia todos los onjetos
modificados localmente al repositorio remoto

11
Formularios controlados y no controlados javascript (react)
: Formularios no controlados se deja la responsabilidad de procesamiento al DOM,
los imputs se manejan solos y cuando realizamos un submit, se capturan sus
valores para mandarlos a la API
Formularios controlados se los piensa a estos como componentes y hace que los
valores que se quieran mandar a la API se guarden en un estado, se mantiene el
valor del elemento imput en un estado de react en lugar de mantenerlo en el DOM.
Cuando se modifica el estado, se hace un render que actualiza la vista, sin
embargo la vista no puede modificar el estado
(one way data binding) dice que los datos entre vista y estado están ligados
solamente en un sentido.
Input controlado: acepta la prop value para indicar cual es el valor actual que el
input renderizara y una función tipo callback que aparece cuando el valor escrito
en el <input > cambia y se llama onChange. El estado y la interfaz (input) están
siempre en sincronia
Prevent default (): cancela el evento si este ES cancelable. Por ej: al hacer click en
el botón enviar evita que envie el formulario
14 –
Axios es una librería JavaScript que puede ejecutarse en el navegador y que nos
permite hacer sencillas las operaciones como cliente HTTP, por lo que podremos
configurar y realizar solicitudes a un servidor y recibiremos respuestas fáciles de
procesar.
Está altamente pensado para facilitar el consumo de servicios web, API REST que
devuelvan datos JSON.
Tiene nombres de funciones que coinciden con cualquier método http ej: .get()
Para acceder a los datos de JSON solicitados debe usar .then()
Manejo de errores 400 y 500 automatico
Se puede utilizar tanto en el servidor como en el cliente. También se puede usar
en un entorno separado del navegador
npm install axios
rutas a las q se puede realizar solicitudes
GET /post
GET /posts/1
GET /post/1/comments
GET /comments?postid=1
POST /post
PUT /posts/1
PATCH /posts/1
DELETE /posts/1
GET: para obtener datos o recuperarlos. Cuando se monta el componente utiliza
hookuseEffect (importar axios) .get() para realizar una solicitud get a su endpoint y
usar el callback .then() para recuperar todos los datos de respuesta
Un endpoint es una dirección de una API, o un backend que se encarga de dar
respuesta a una petición
POST: para crear nuevos datos. Utiliza el método .post() como segundo
argumento, incluye una propiedad de objeto que especifica como deseas que sea
la nueva publicación. Luego usa callback .then() para recuperar los datos de
respuesta y reemplaza la vieja con la nueva q solicitaste
PUT: para actualizar un recurso determinado. Usando la devolución de
llamada .then() actualiza el JSX con los datos que se devuelven
DELETE: para eliminar un recurso. Se usa para garantizar que la solicitud se
devuelva con éxito .then()
React es una librería js desarrollada por Facebook que sirve para desarrollar SPAs
(Single Page Application) que quiere decir que muestra todo su contenido en una
sola página y carga el contenido de html,css y js en la misma.
React usa una sintaxis de XML que es similar al html y también utiliza jsx que es
una extensión de js para uso con react
•se usan comillas para usar strings como atributos
•llaves para una expresión js
•se puede cerrar una etiqueta con />
Componentes se los crea aparte y nos permite indicarle a react que mostrar en
pantalla. Y deben tener la primera letra del nombre en mayúscula
*Componentes funcionales: se usan funciones tal y como haríamos en js
*Componentes de clases: se debe extender de la clase react.component
Props que son propiedades y tienen una importante función, pasan los datos de un
componente a otro ofreciendo así un canal de por medio por el cual los
componentes se pueden comunicar
*las props deben considerarse como sólo de lectura
*pueden tener un valor por defecto
*son inmutables
Con React-bootstrap se pueden crear más componentes pero hay que importarlos
de la librería. Por ej: Tarjetas,Alertas,Carrusel, etc.
Renderizado condicional se utiliza para mostrar un cierto componente u otro
dependiendo de una condición.
Existen dos formas para hacer un renderizado condicional
*operador lógico && => evalúa de la mano de un true o false, entonces si la
condición es true, los elementos despues del operador && se mostrará y si es
false React JS lo ignora y no lo muestra.
*operador ternario => condición ? Expre1 : Expre2 si la condición es true muestra
el valor de la Expre1 y si no, muestra el valor de la Expre2.
Para renderizar componentes de forma condicional se puede usar operadores de
js como el if o el operador condicional
Para hacer un Renderizado De Listas se puede usar el método filter() de js para
devolver solo esos datos, este método agarra un array de objetos, los pasa por
una función para saber si es true o false y devuelve un array con los objetos true
Funcion flecha permite definir de manera compacta una función convencional, esta
función permite eliminar llaves y el return.
() => { sentencias }
•Un parámetro con una expresión simple, no necesita return
•Varios parámetros requieren paréntesis con una expresión simple no necesita
return
•La declaración de varias líneas requieren corchetes y return
•Varios parámetros requieren paréntesis y las declaraciones de varias líneas el
corchete y return
•Si es con nombre se trata la función flecha como una variable

Los Eventos permiten que los usuarios visitantes interactuen con los componentes
Los eventos de react se nombran usando camelCase, en vez de minúsculas
Para implementar un evento hay que hacer dos cosas: Primero el tipo de evento
que hay que utilizar y luego el método que hará las veces de manejador de evento

React Router es la biblioteca para la gestión de rutas de un proyecto de React,

tiene tres paquetes: react-router que es el principal, react-router-dom que es para
sitios web y el react-router-native que es para aplicaciones móviles.
Tiene 3 componentes esenciales:
<BrowserRouter/> conecta nuestra app a la URL del navegador, es decir mantiene
la interfaz de usuario en sincronía con la URL del navegador
<Routes/> genera un árbol de rutas y nos permite reemplazar la vista con el
componente que coincide con la URL
<Route/> es una ruta del árbol pero necesita al menos las propiedades path y
element para representar una ruta

Si el path coincide con la URL del navegador renderizara el valor de element

<Link /> este componente recibe en su propiedad to el path de la ruta a la cual nos
queremos dirigir dentro de nuestra app, este no recarga la app.

La prop de solo lectura localStorage permite acceder al objeto local Storage

localStorage es una variable global, los métodos principales son setItem(key,
value) y getItem(key)
El comando build es el que nos va a generar la aplicación final sirve para no
entregar el resultado final e instruir de que usen el comando start para arrancar la
app. Lo correcto es crear un build
Hook: es una función especial que permite “conectarse” a características de React. Por
ejemplo, useState: que te permite añadir el estado de React a un componente de función
devolviendo dos valores: el estado actual y una función que lo actualiza.

UsseEffect: recibe como parámetro una función que se ejecutará cada vez que nuestro
componente se renderice, ya sea por un cambio de estado, por recibir props nuevas o, y esto es
importante, porque es la primera vez que se monta.