// crear un repositorio local git init NOMBRE_PROYECTO // clonar un repositorio remoto a nuestra computadora git clone URL

Crear un repositorio

git status 
 git add . 
 git commit -m 'mensaje descriptivo' 
 git push origin master

Subir código a repositorio remoto

git pull origin master

Traer código de repositorio remoto

// de archivos todavia no agregados 
 git diff 
 // entre dos commits 
 git diff commit1 commit2

Revisar cambios

git reset ARCHIVO

Sacar archivo de add conservando cambios

// listar branches git branch 
 // crear nuevo branch git branch NOMBRE 
 // moverse a otro branch git checkout NOMBRE 
 // mergear branch X a branch actual git merge X 
 // borrar branch X git branch -d X

Trabajando con branches

git reset --hard

Revertir TODO al último commit

import React from 'react' 
 class Prueba extends React.Component { 
 &nbsp render() { 
 &nbsp &nbsp return ( 
 &nbsp &nbsp &nbsp &lt;div&gt;Hola CourseIt!&lt;/div&gt; 
 &nbsp &nbsp) 
 &nbsp} 
 } 
 export default Prueba;

Componente de clase

import React from 'react' 
 function Prueba() { 
 &nbsp return &lt;div&gt;Hola CourseIt!&lt;/div&gt; 
 } 
 export default Prueba;

Componente funcional

const Prueba = () => &lt;div&gt;Hola CourseIt!&lt;/div&gt; 
 export default Prueba 
 import Prueba from './Prueba' 
 export const Prueba = () => &lt;div&gt;Hola CourseIt!&lt;/div&gt; 
 import { Prueba } from './Prueba'

Import/Export

// inicializacion 
this.state = { 
&nbsp;name: &#039;Juani&#039; 
} 
 
// actualizacion 
this.setState({ 
&nbsp;name: &#039;CourseIt&#039; 
}) 
 
// lectura 
render() { 
&nbsp;&nbsp;return( 
&nbsp;&nbsp; &nbsp;{this.state.name} 
&nbsp;&nbsp;) 
}

Estado de un componente

import React, { useState } from &#039;react&#039;; 
 
function Counter() { 
&nbsp;&nbsp;const [c, setC] = useState(0); 
&nbsp;&nbsp;return ( 
&nbsp;&nbsp; &nbsp;&lt;div&gt; 
&nbsp;&nbsp; &nbsp; &nbsp;&lt;button &nbsp &nbsp &nbsp &nbsp onClick={() =&gt; setC(c+1)}&gt;Sumar&lt;/button&gt; 
&nbsp;&nbsp; &nbsp; &nbsp;&lt;p&gt;{c}&lt;/p&gt; 
&nbsp;&nbsp; &nbsp;&lt;/div&gt; 
 &nbsp ) } 
 
export default Counter;

Hook: useState

React

import React from 'react' import Hijo from './components/hijo' class Padre extends React.Component { &nbsp handleCallback(data){ &nbsp &nbsp //En esta función leemos la información que viene del hijo 		 &nbsp &nbsp console.log(data) &nbsp} &nbsp render() { &nbsp &nbsp return ( &nbsp &nbsp &nbsp //Llamamos al componente Hijo y le pasamos la prop "callback" con la función handleCallback() 		 &nbsp &nbsp &nbsp &lt;Hijo callback={(data)=>this.handleCallback(data)}/&gt; &nbsp &nbsp ) &nbsp} } export default Padre;

Componente Padre

import React from 'react' class Hijo extends React.Component { &nbsp handleClick(){ &nbsp &nbsp //llamamos a la prop callback que es una función y le pasamos en su parámetro el valor "hola" 		 &nbsp &nbsp this.props.callback("hola") &nbsp} &nbsp render() { &nbsp &nbsp return ( &nbsp &nbsp &nbsp &lt;button onClick={()=>this.handleClick()}&gt; &nbsp &nbsp &nbsp &nbsp Enviar &nbsp &nbsp &nbsp &lt;/button&gt; &nbsp &nbsp ) &nbsp} } export default Hijo;

Componente Hijo

Callbacks

npm install -g sass

Instalación

sass source/stylesheets/index.scss build/stylesheets/index.css

Compilar CSS

sass --watch input.scss output.css

Vigilar archivos

// declarar una variable $nombre-variable: valor $primary-color: #fff // usar una variable body{ &nbsp &nbsp color: $primary-color }

Variables

SASS

npm list

Listado de paquetes instalados en el proyecto

npm list --depth=0

Listado de paquetes instalados sin dependencias

npm install [nombre del paquete]

Instalar un paquete

npm uninstall [nombre del paquete]

Desinstalar paquete

npm outdated

Ver listado de paquetes desactualizados

npm update

Apuntes

¡Te damos la bienvenida a los apuntes de CourseIt!

GIT

React

ES6

Callbacks

SASS

npm