Universidad React

# Universidad React
#Udemy/React
* NPM - Es un repositorio y gestor de paquetes
* Babel - Toma el código moderno y actualizado y lo transforma en código compatible con
cualquier navegador
* WebPack - Permite usar módulos, permite mitificarlos y comprimiendo
## 6. Chrome DevTools
Herramientas de desarrollo
### Console
```javascript
console.error("Woops ha ocurrido un error");
//arroja un mensaje de error a la consola
console.warn("Esto es una advertencia");

//Arroja una alerta warning a la consola
```
### Elements
Sirve para inspeccionar todos los elementos que hay en nuestra página, seleccionarlos y
hacer cambios de estilos.
### Network
Ver linea de tiempo, información y recursos que se han estado cargando en nuestra
página.
Podemos filtrar por tipos de recursos
Podemos simular una conexión específica.
## 7. Introducción a la creación de aplicación REACT

Usando el CLI de react con ::create-react-app::
Paquetes:
* react - Core para crear componentes
* react-dom - interacción de react con el DOM
* prop-types - Validación de datos de entrada de los componentes
## 8. Crear aplicación con create-react-app

::node -v:: - Verificar instalación de Node
::npm - v:: - Verificar la instalación de NPM
::npm install -g create-react-app:: - Instalar el paquete create-react-app
::create-react-app <project-directory>:: - crear estructura de aplicación
::npm start:: - para correr el servidor de desarrollo en Pian Biot
::npm run build:: - para compilar el proyecto para producción
::npm test:: - para correr los test
::npm run eject:: - para que se extraigan las herramientas como webpack y babel. Esta
acción es irreversible. Puede ser útil cuando se desee hacer personalizaciones a fondo por
ejemplo de la configuración de webpack
## 18. Crear componentes con ESTADO usando Clases
El Estado representa el momento actual del componente, si el estado cambia, el
componente debería de cambiar.
## 20. Inicializadores de propiedad (property initializers)
Nos ayuda a evitar el problema de pasar el find al método .
La característica de las Arrow función es heredar el this del Padre.
Los inicializadores de propiedad no forman parte del estándar
## 22. Aprendiendo JSX en mas profundidad
Para agregar una clase de estilo CSS a un nodo no se debe usar ::class:: ya que es una
palabra reservada de javascript, se debe usar ::className::
## 23. Aplicar estilos CSS en linea a componentes de REACT
En react no es valido usar ::style:: , lo correcto es pasarlo entre llaves para que sea
evaluado como javascript ::style={{ border: ‘1px solid black’ }}:: o separar los estilos
dentro de una constante.
El estándar de React recomienda que para aquellos estilos que se compongan de 2
palabras como ::margen-bottom:: se debe usar camel case ::marginBottom::
## 25. Sistema de modulos CSS

Se tiene que crear un archivo de la siguiente manera ::NombreArchivoJs.module.css::
## 26. Modularización de componentes en Folders
Al mover los archivos de un componente dentro de una carpeta podemos hacer lo
siguiente
```javascript
//ANTES
import Card from "./components/Card"; //El nombre del archivo se llamaba Card y se
ubicaba dentro de components
//DESPUES
//El archivo js se movio a /components/Card/Card.js lo cual seria repetitivo colocarlo de
esta manera en el import por lo cual podemos renombrar el archivo a
/components/Card/index.js de esa manera nuestro import qudara asi
import Card from "./components/Card";
```
Esto dara como resultado que posteriormente cuando el proyecto crezca tengamos una
gran cantidad de archivos índex.js y el soporte pueda ser complicado.
Una forma mas, es dentro de la carpeta del componente, dejar el nombre como ::Card.js::
y crear otro archivo índex.js donde tengamos la importación y la exportación del mismo.
```javascript
//component/Card/index.js
export {default} from './Card'
```
## 27. Entendiendo el Object.assign()
Nos ayuda a clonar un objeto o a combinar las propiedades de objetos diferentes.
```javascript
// Se le pueden pasar un numero indefinido de objetos
// El orden de los factores si afecta el resultado ya que si encuentra una propiedad que ya
se habia agregado previamente, la sobreescribira
//Solo actua sobre las propiedades de primer nivel
const resultado = Object.assign(
{}, //el primer argumento es el objeto destino
objeto1,
objeto2,
:
:
:
objetoN
)
```
## 28. Entendiendo el operador Spread

Nos ayuda a clonar un objeto o a combinar las propiedades de objetos diferentes de una
manera mas sencilla que con Object.assign().
```javascript
//Tampoco revisa los objetos en profundidad
const resultado = {
...region,
...perfil,
...social,
info: {
...perfil.info,
...region.info
}
}
```
## 29. Operador spread con arrays
El operador spread, funciona con cualquier objeto iteradle como arreglos y listas
## 30. Manejando el estado de un componente con una función
El metodo setState es asincrono.
## 31 . Usando operador spread para pasar props
```javascript
class App extends Component {
render (){
const otrosDatos = {
raza: 'Persa',
ataque: 300
}
return (
<div>
<Gato
name="Garfield"
age="2 años"
//otrosDatos={otrosDatos} //Esto da como resultado un objeto anidado
{...otrosDatos} //Podemos pasar esas otras propiedades usando el operador
spread
></Gato>
</div>
)
}
}
```
## 32. Manejando eventos del mouse
Usando los escuchadores de eventos se pueden ejecutar funciones del componente
```javascript
state = {
x: 0,
y: 0
}
manejador = (event) => {

this.setState({
x: event.clientX,
y: event.clientY
})
}
render (){
return (
<div style={styles}
onMouseMove={this.manejador}
>
<div>
x: {this.state.x}
</div>
<div>
y: {this.state.y}
</div>
</div>
)
}
}
```
## 33. Eventos de input
Los escuchadores de eventos pueden variar según el elemento al que se le coloquen
## 34. Diferencia entre evento nativo DOM y evento sintético de React

```javascript
manejador = (e) => {
// e es un evento estandarizado uniforme e independiente del navegador
e.preventDefault() //Para prevenir el comportamiento por defecto
console.log(e)
console.log(e.nativeEvent) //Para acceder al evento nativo
}
render (){
return (
<div >
<a href="https://google.com.mx"
onClick={this.manejador} //Evento con react
onclick="return false" //Evento en HTML
>Google</a>
</div>
)
}
}
```
## 35. Conservar eventos con React
``` javascript
handlerChange = (event) => {
// event.persist()
//Tambien, en vez de persistir el evento, podemos hacer una copia del valir, ya que se
javascript
//copia los valores primitivos por valor y no por referencia
const color = event.target.value
console.log(event.target.value)
//Esto deberia de marcar error, segun el video, ya que despues de que se ocupa el
evento se limpia y
//setState es asincrono, cuando se ejecuta el evento ya esta limpio
//pero no marco error al usar
this.setState(state => ({
// color: event.target.value
color
}))
}
render (){.....
```
## 36. Crear eventos personalizados con React
Esta es la forma de comunicación entre un componente hijo y un padre
## Renderizados condicionales con React

Universidad React

Cargado por

Copyright:

Formatos disponibles

Universidad React

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Universidad React

Cargado por

Copyright:

Formatos disponibles

# Universidad React

console.warn("Esto es una advertencia");

## 7. Introducción a la creación de aplicación REACT

## 8. Crear aplicación con create-react-app

## 25. Sistema de modulos CSS

## 28. Entendiendo el operador Spread

manejador = (event) => {

## 34. Diferencia entre evento nativo DOM y evento sintético de React

También podría gustarte