From 4ba5c68dffb44ece9f9923e983013d0cff9a3300 Mon Sep 17 00:00:00 2001
From: edgarEOS <76976401+edgarEOS@users.noreply.github.com>
Date: Tue, 26 Jan 2021 19:16:22 -0500
Subject: [PATCH 1/4] feat(docs): react new section
---
docs/tutoriales/tutorial-react.md | 237 ++++++++++++++++++++++++++++++
sidebars.js | 3 +-
2 files changed, 239 insertions(+), 1 deletion(-)
create mode 100644 docs/tutoriales/tutorial-react.md
diff --git a/docs/tutoriales/tutorial-react.md b/docs/tutoriales/tutorial-react.md
new file mode 100644
index 000000000..4003005f0
--- /dev/null
+++ b/docs/tutoriales/tutorial-react.md
@@ -0,0 +1,237 @@
+---
+id: tutorial-react
+title: React Js
+sidebar_label: React Js
+---
+
+
+React es una libreria de JavaScript que servira para construir interfaces web y aplicaciones mobiles con una extension llamada [React Native](https://reactnative.dev/). React trabaja con unidades de código que se trabajan de forma independiente. React tambien utiliza una herramienta llamada JSX que permite una interacción muy sencilla con JavaScript, es decir se podrá utilizar con HTML tambien de forma sencilla.
+>[Más Información](https://es.reactjs.org/)
+
+## Herramientas
+
+Para React se sugieren las siguientes herramientas:
+
+* Navegador Web (Google Chorme, Moxilla Firefox)
+* [Node Js](https://nodejs.org/es/)
+* Administradores de Paquetes ([Brew](https://brew.sh/index_es), [Chocolatey](https://chocolatey.org/) )
+* Terminal, se puede utilizar con la terminal nativa pero te recomendamos [iTerm2](https://iterm2.com/) , [Hyper](https://hyper.is/) , [cmder](https://cmder.net/)
+* Editor de código, se sugiere que se utilice [Visual Studio Code](https://code.visualstudio.com/)
+
+## Extensiones
+
+Estas extensiones son una recomendación para mejorar tu experiencia en el desarrollo con React.
+
+* Instalar [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=es), esta se encuentra en la chrome web store (Navegador Web)
+* Debugger for Chrome (Visual Studio Code)
+* React Extension Pack (Visual Studio Code)
+* Auto Close Tag (Visual Studio Code)
+* Prettier - Code Formatter (Visual Studio Code)
+
+
+* * *
+## Verificar Instalaciones
+
+Verificar Node js, con estos comandos se puede verificar la versión y además si estan instalados.
+
+```shell
+$ node -v
+#v14.15.2
+$ npm -v
+#6.14.9
+```
+
+## Iniciar la primera aplicación con React
+
+Vamos a crear una primera aplicación con React en donde se van a ver reflejados algunas de las funcionalidades de React, en este caso debes cambiar "nombre_de_tu_aplicación" por el nombre que desees, para hacer más sencilla la lectura de ahora en adelante se utilizara my-app.
+
+```shell
+$ npx create-react-app "nombre_de_tu_aplicación"
+```
+Ahora debes entrar a tu directorio de my-app y arrancar tu aplicación.
+
+```shell
+$ cd my-app
+$ yarn start
+```
+Para ver tu código debes utilizar ,duplicando tu terminal, lo siguiente:
+
+```shell
+$ code .
+```
+
+## Primeros Pasos
+
+Una vez abierto tu código en tu editor, en este caso recomendablemente Visual Studio Code, puedes navegar hasta encontrar dentro de la carpeta *src* el archivo `App.js` con un contenido similar a este:
+```javascript
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+ return (
+
+ );
+}
+
+export default App;
+```
+Puedes cambiar el contenido por el siguiente y hacer los cambios que desees como primeros pasos para tu aventura en React. Además puedes ver los cambios en tu navegador, para esto debes mantener tu terminal con el servidor abierto.
+
+```javascript
+import { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component{
+ render(){
+ return (
+
+
Hola Mundo
+
+ );
+}
+}
+export default App;
+```
+
+### Recomendaciones
+
+Es importante para el desarrollo de un buen proyecto la organización de los diferentes componentes del trabjo, por esto es recomendado generar carpetas que tengan contenido similar, algunos ejemplos son:
+
+* Carpeta de *components*, en donde se guardan los componentes que necesiten
+* Carpeta de *styles*, en donde se guardan los estilos del proyecto por ejemplo los archivos `.css`
+* Carpeta de *assets*, en donde se guardan los recursos estáticos de la aplicación como por ejemplo las imagenes.
+
+>Recordar cambiar las referencias una vez ordenado tu proyecto y no hacer cambios, a menos que sea realmente necesario, en el index.js
+
+## Componentes
+
+Los componentes se define como una unidad única de código que tendrá una responsabilidad asignada de manera especifica que se podrá encapsular determinados comportamientos en los componentes.
+
+Este es un ejemplo de un componente. Crea un nuevo archivo dentro de tu carpeta de `componentes` con el nombre de `header.js` y de esta manera poder utilizarlo posteriormente.
+
+```javascript
+import React ,{Component} from "react";
+
+
+class Header extends Component{
+ render(){
+ return(
+
+
Ejemplo
+
+ );
+ }
+}
+
+export default Header;
+```
+Este componente se puede utilizar de la siguiente manera dentro del `App.js`:
+
+```javascript
+import { Component } from 'react';
+
+import './styles/App.css';
+import Header from "./components/header" //Se debe agregar el import del componente
+
+class App extends Component{
+ render(){
+ return (
+
+ /*Se agrega el componente*/
+
+ );
+}
+}
+export default App;
+```
+## Tipos de Componentes
+
+
+
+
+## Conceptos Principales
+
+A continuación te damos una lista de elementos que se toman de la documentación oficial de React para aplicar en tu proyecto.
+
+* [JSX](https://es.reactjs.org/docs/introducing-jsx.html)
+* [Renderizando Elementos](https://es.reactjs.org/docs/rendering-elements.html)
+* [Components y Propiedades](https://es.reactjs.org/docs/components-and-props.html)
+* [Estado y Ciclo de Vida](https://es.reactjs.org/docs/state-and-lifecycle.html)
+* [Manejando Eventos](https://es.reactjs.org/docs/handling-events.html)
+* [Renderizado Condicional](https://es.reactjs.org/docs/conditional-rendering.html)
+* [Listas y Keys](https://es.reactjs.org/docs/lists-and-keys.html)
+* [Formularios](https://es.reactjs.org/docs/forms.html)
+* [Levantando el Estado](https://es.reactjs.org/docs/lifting-state-up.html)
+* [Composición vs. Herencia](https://es.reactjs.org/docs/composition-vs-inheritance.html)
+
+## Lo nuevo en React
+
+### Hooks
+
+Hooks son una nueva característica en React 16.8. Estos te permiten usar el estado y otras características de React sin escribir una clase.
+
+Los Hooks son funciones que te permiten “enganchar” el estado de React y el ciclo de vida desde componentes funcionales. Los hooks no funcionan dentro de las clases estos te permiten usar React sin clases. (No recomendamos reescribir tus componentes existentes de la noche a la mañana, pero puedes comenzar a usar Hooks en los nuevos si quieres).
+
+Se tiene
+
+* [Hook de Estado](https://es.reactjs.org/docs/hooks-state.html)
+* [Hook de Effecto](https://es.reactjs.org/docs/hooks-effect.html)
+
+Este es un ejemplo de utilización, se puede reemplazar el código de tu `App.js` para probarlo. En este ejemplo muestran las dimensiones de la pantalla aún cuando se re-dimensiona.
+
+```javascript
+import React , {useState,useEffect} from "react";
+import "./styles/App.css"
+
+
+const App = () => {
+ const [width,setWidth] = useState(window.innerWidth);
+ const [height, setHeight]= useState(window.innerHeight);
+
+ const updateDimensions = () =>{
+ setWidth(window.innerWidth);
+ setHeight(window.innerHeight);
+ }
+
+ useEffect(()=>{
+ window.addEventListener('resize', updateDimensions);
+
+ return()=>{
+ window.removeEventListener('resize',updateDimensions);
+ }
+ }
+ )
+ return(
+
+ Width = {width}
+
+ Height = {height}
+
+ );
+}
+export default App;
+```
+[**Reglas Recomendadas**](https://es.reactjs.org/docs/hooks-rules.html)
+
+>[Más Información](https://es.reactjs.org/docs/hooks-intro.html)
+
+## React más Limpio con Hooks
+
diff --git a/sidebars.js b/sidebars.js
index be14de2c3..0a5932582 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -33,7 +33,8 @@ module.exports = {
"tutoriales/cpp-moderno",
"tutoriales/tutorial-flujo-trabajo-git",
"tutoriales/guia-markdown",
- "tutoriales/guia-github"
+ "tutoriales/guia-github" ,
+ "tutoriales/tutorial-react"
],
"Herramientas": [
"herramientas/glosario",
From bcba5b4bb91eabd1c5e0c487b2c558f9b548f4be Mon Sep 17 00:00:00 2001
From: edgarEOS <76976401+edgarEOS@users.noreply.github.com>
Date: Wed, 27 Jan 2021 13:20:08 -0500
Subject: [PATCH 2/4] fix(react): minor changes
---
docs/tutoriales/tutorial-react.md | 20 ++++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/docs/tutoriales/tutorial-react.md b/docs/tutoriales/tutorial-react.md
index 4003005f0..e8ebdb5dd 100644
--- a/docs/tutoriales/tutorial-react.md
+++ b/docs/tutoriales/tutorial-react.md
@@ -5,7 +5,7 @@ sidebar_label: React Js
---
-React es una libreria de JavaScript que servira para construir interfaces web y aplicaciones mobiles con una extension llamada [React Native](https://reactnative.dev/). React trabaja con unidades de código que se trabajan de forma independiente. React tambien utiliza una herramienta llamada JSX que permite una interacción muy sencilla con JavaScript, es decir se podrá utilizar con HTML tambien de forma sencilla.
+React es una librería de JavaScript que servirá para construir interfaces web y aplicaciones móviles con una extensión llamada [React Native](https://reactnative.dev/). React trabaja con unidades de código que se trabajan de forma independiente. React también utiliza una herramienta llamada JSX que permite una interacción muy sencilla con JavaScript, es decir se podrá utilizar con HTML también de forma sencilla.
>[Más Información](https://es.reactjs.org/)
## Herramientas
@@ -32,7 +32,7 @@ Estas extensiones son una recomendación para mejorar tu experiencia en el desar
* * *
## Verificar Instalaciones
-Verificar Node js, con estos comandos se puede verificar la versión y además si estan instalados.
+Verificar Node js, con estos comandos se puede verificar la versión y además si están instalados.
```shell
$ node -v
@@ -54,7 +54,7 @@ Ahora debes entrar a tu directorio de my-app y arrancar tu aplicación.
$ cd my-app
$ yarn start
```
-Para ver tu código debes utilizar ,duplicando tu terminal, lo siguiente:
+Para ver tu código debes utilizar, duplicando tu terminal, lo siguiente:
```shell
$ code .
@@ -62,7 +62,7 @@ $ code .
## Primeros Pasos
-Una vez abierto tu código en tu editor, en este caso recomendablemente Visual Studio Code, puedes navegar hasta encontrar dentro de la carpeta *src* el archivo `App.js` con un contenido similar a este:
+Una vez abierto el código en tu editor, en este caso recomendablemente Visual Studio Code, puedes navegar hasta encontrar dentro de la carpeta *src* el archivo `App.js` con un contenido similar a este:
```javascript
import logo from './logo.svg';
import './App.css';
@@ -90,7 +90,7 @@ function App() {
export default App;
```
-Puedes cambiar el contenido por el siguiente y hacer los cambios que desees como primeros pasos para tu aventura en React. Además puedes ver los cambios en tu navegador, para esto debes mantener tu terminal con el servidor abierto.
+Puedes cambiar el contenido por el siguiente y hacer los cambios que desees como primeros pasos para tu aventura en React. Además, puedes ver los cambios en tu navegador, para esto debes mantener tu terminal con el servidor abierto.
```javascript
import { Component } from 'react';
@@ -111,17 +111,17 @@ export default App;
### Recomendaciones
-Es importante para el desarrollo de un buen proyecto la organización de los diferentes componentes del trabjo, por esto es recomendado generar carpetas que tengan contenido similar, algunos ejemplos son:
+Es importante para el desarrollo de un buen proyecto la organización de los diferentes componentes del trabajo, por esto es recomendado generar carpetas que tengan contenido similar, algunos ejemplos son:
-* Carpeta de *components*, en donde se guardan los componentes que necesiten
-* Carpeta de *styles*, en donde se guardan los estilos del proyecto por ejemplo los archivos `.css`
+* Carpeta de *components*, en donde se guardan los componentes que necesiten.
+* Carpeta de *styles*, en donde se guardan los estilos del proyecto por ejemplo los archivos `.css`.
* Carpeta de *assets*, en donde se guardan los recursos estáticos de la aplicación como por ejemplo las imagenes.
>Recordar cambiar las referencias una vez ordenado tu proyecto y no hacer cambios, a menos que sea realmente necesario, en el index.js
## Componentes
-Los componentes se define como una unidad única de código que tendrá una responsabilidad asignada de manera especifica que se podrá encapsular determinados comportamientos en los componentes.
+Los componentes se definen como una unidad única de código que tendrá una responsabilidad asignada de manera específica que se podrá encapsular determinados comportamientos en los componentes.
Este es un ejemplo de un componente. Crea un nuevo archivo dentro de tu carpeta de `componentes` con el nombre de `header.js` y de esta manera poder utilizarlo posteriormente.
@@ -194,7 +194,7 @@ Se tiene
* [Hook de Estado](https://es.reactjs.org/docs/hooks-state.html)
* [Hook de Effecto](https://es.reactjs.org/docs/hooks-effect.html)
-Este es un ejemplo de utilización, se puede reemplazar el código de tu `App.js` para probarlo. En este ejemplo muestran las dimensiones de la pantalla aún cuando se re-dimensiona.
+Este es un ejemplo de utilización, se puede reemplazar el código de tu `App.js` para probarlo. En este ejemplo muestran las dimensiones de la pantalla aun cuando se re-dimensiona.
```javascript
import React , {useState,useEffect} from "react";
From 89d3231bc97247cff4637d0ab6e7a585db13977b Mon Sep 17 00:00:00 2001
From: edgarEOS <76976401+edgarEOS@users.noreply.github.com>
Date: Fri, 29 Jan 2021 16:48:44 -0500
Subject: [PATCH 3/4] update(tutorial-react): update content
---
docs/tutoriales/tutorial-react.md | 138 ++++++++++++++++++++++--------
1 file changed, 102 insertions(+), 36 deletions(-)
diff --git a/docs/tutoriales/tutorial-react.md b/docs/tutoriales/tutorial-react.md
index e8ebdb5dd..a1a281957 100644
--- a/docs/tutoriales/tutorial-react.md
+++ b/docs/tutoriales/tutorial-react.md
@@ -1,35 +1,64 @@
---
id: tutorial-react
-title: React Js
-sidebar_label: React Js
+title: React JS
+sidebar_label: React JS
---
-
React es una librería de JavaScript que servirá para construir interfaces web y aplicaciones móviles con una extensión llamada [React Native](https://reactnative.dev/). React trabaja con unidades de código que se trabajan de forma independiente. React también utiliza una herramienta llamada JSX que permite una interacción muy sencilla con JavaScript, es decir se podrá utilizar con HTML también de forma sencilla.
>[Más Información](https://es.reactjs.org/)
-## Herramientas
+## Herramientas
-Para React se sugieren las siguientes herramientas:
+Para React se sugieren las siguientes herramientas, las herramientas con * son necesarias:
-* Navegador Web (Google Chorme, Moxilla Firefox)
-* [Node Js](https://nodejs.org/es/)
-* Administradores de Paquetes ([Brew](https://brew.sh/index_es), [Chocolatey](https://chocolatey.org/) )
-* Terminal, se puede utilizar con la terminal nativa pero te recomendamos [iTerm2](https://iterm2.com/) , [Hyper](https://hyper.is/) , [cmder](https://cmder.net/)
-* Editor de código, se sugiere que se utilice [Visual Studio Code](https://code.visualstudio.com/)
+* Navegador Web (Google Chorme, Moxilla Firefox)*
+* [Node Js](https://nodejs.org/es/)*
+* Administradores de Paquetes ([Brew](https://brew.sh/index_es), [Chocolatey](https://chocolatey.org/) ).
+* Terminal, se puede utilizar con la terminal nativa pero te recomendamos [iTerm2](https://iterm2.com/) , [Hyper](https://hyper.is/) , [cmder](https://cmder.net/).
+* Editor de código, se sugiere que se utilice [Visual Studio Code](https://code.visualstudio.com/).
## Extensiones
Estas extensiones son una recomendación para mejorar tu experiencia en el desarrollo con React.
-* Instalar [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=es), esta se encuentra en la chrome web store (Navegador Web)
+* Instalar [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=es), esta se encuentra en la chrome web store (Navegador Web)
* Debugger for Chrome (Visual Studio Code)
* React Extension Pack (Visual Studio Code)
* Auto Close Tag (Visual Studio Code)
* Prettier - Code Formatter (Visual Studio Code)
+* ESLint - Estandares de JavaScript (Visual Studio Code)
+
+## Recomendaciones
+
+Es importante para el desarrollo de un buen proyecto la organización de los diferentes componentes del trabajo, por esto es recomendado generar carpetas que tengan contenido similar, algunos ejemplos son:
+
+* Carpeta de *components*, en donde se guardan los componentes que necesiten.
+* Carpeta de *styles*, en donde se guardan los estilos del proyecto por ejemplo los archivos `.css`.
+* Carpeta de *assets*, en donde se guardan los recursos estáticos de la aplicación como por ejemplo las imagenes.
+
+>Recordar cambiar las referencias una vez ordenado tu proyecto y no hacer cambios, a menos que sea realmente necesario, en el index.js
+
+### Estandares de JavaScript
+
+Es importante seguir los estandares de JavaScript, es recomendado utilizar la librería [ESLint](https://eslint.org/) para ayudarte a seguir estos [estandares de JavaScript](https://standardjs.com/rules.html).
+
+## DOM Virtual
+
+**Modelo en Objetos para la Representación de Documentos** (Document Object Model por sus siglas en ingles) es esencialmente una interfaz de plataforma que proporciona un conjunto estándar de objetos para representar documentos HTML, XHTML y XML. Un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos.
+React se dio cuenta que actualizar la pantalla completa es una tarea que puede tener muchos costos en rendimiento y tiempo. Entonces creo un DOM Virtual. Este objeto DOM virtual es identico al objeto DOM de JavaScript.
+
+### ¿Cómo funciona?
+
+* El DOM virtual completo se actualiza.
+* El DOM virtual se compara con una versión anterior a la actualización. React se da cuenta de cuales objetos cambiaron.
+* El objeto actualiazado y solo ese objeto se actualiza en el DOM real.
+* Cambios en el DOM real causa que la pantalla cambie.
+
+>Este proceso se le conoce como la reconciliación.
* * *
+
## Verificar Instalaciones
Verificar Node js, con estos comandos se puede verificar la versión y además si están instalados.
@@ -62,7 +91,8 @@ $ code .
## Primeros Pasos
-Una vez abierto el código en tu editor, en este caso recomendablemente Visual Studio Code, puedes navegar hasta encontrar dentro de la carpeta *src* el archivo `App.js` con un contenido similar a este:
+Una vez abierto el código en tu editor, en este caso recomendablemente Visual Studio Code, puedes navegar hasta encontrar dentro de la carpeta *src* el archivo `App.js` con un contenido igual a este:
+
```javascript
import logo from './logo.svg';
import './App.css';
@@ -90,10 +120,12 @@ function App() {
export default App;
```
+
Puedes cambiar el contenido por el siguiente y hacer los cambios que desees como primeros pasos para tu aventura en React. Además, puedes ver los cambios en tu navegador, para esto debes mantener tu terminal con el servidor abierto.
```javascript
import { Component } from 'react';
+
import logo from './logo.svg';
import './App.css';
@@ -109,25 +141,14 @@ class App extends Component{
export default App;
```
-### Recomendaciones
-
-Es importante para el desarrollo de un buen proyecto la organización de los diferentes componentes del trabajo, por esto es recomendado generar carpetas que tengan contenido similar, algunos ejemplos son:
-
-* Carpeta de *components*, en donde se guardan los componentes que necesiten.
-* Carpeta de *styles*, en donde se guardan los estilos del proyecto por ejemplo los archivos `.css`.
-* Carpeta de *assets*, en donde se guardan los recursos estáticos de la aplicación como por ejemplo las imagenes.
-
->Recordar cambiar las referencias una vez ordenado tu proyecto y no hacer cambios, a menos que sea realmente necesario, en el index.js
-
-## Componentes
+## ¿Qué son los Componentes?
Los componentes se definen como una unidad única de código que tendrá una responsabilidad asignada de manera específica que se podrá encapsular determinados comportamientos en los componentes.
-Este es un ejemplo de un componente. Crea un nuevo archivo dentro de tu carpeta de `componentes` con el nombre de `header.js` y de esta manera poder utilizarlo posteriormente.
+Este es un ejemplo de un componente. Crea un nuevo archivo dentro de tu carpeta de `componentes` con el nombre de `header.js` y de esta manera poder utilizarlo posteriormente. Este tipo de componentes ya no se utiliza en EOS Costa Rica, sin embargo es importante entender su definición y uso.
```javascript
-import React ,{Component} from "react";
-
+import React, { Component } from "react";
class Header extends Component{
render(){
@@ -141,12 +162,14 @@ class Header extends Component{
export default Header;
```
+
Este componente se puede utilizar de la siguiente manera dentro del `App.js`:
```javascript
import { Component } from 'react';
import './styles/App.css';
+
import Header from "./components/header" //Se debe agregar el import del componente
class App extends Component{
@@ -160,15 +183,44 @@ class App extends Component{
}
export default App;
```
-## Tipos de Componentes
-
+
+### Ciclo de Vida de los Componentes
+
+
+### Componente de Orden Superior (HoC)
+
+* * *
+
+>*"Un componente de orden superior (HOC por las siglas en inglés de higher-order component) es una técnica avanzada en React para el reuso de la lógica de componentes. Los HOCs no son parte de la API de React. Son un patrón que surge de la naturaleza composicional de React."*
+
+* * *
+
+Para más informacion sobre [HoC](https://es.reactjs.org/docs/higher-order-components.html#:~:text=Un%20componente%20de%20orden%20superior,de%20la%20l%C3%B3gica%20de%20componentes.&text=En%20concreto%2C%20un%20componente%20de,y%20devuelve%20un%20nuevo%20componente.).
+
+## Componentes en EOS Costa Rica
+
+React utiliza componentes reusables para todas las aplicaciones, estos componentes pueden tener varias versiones, que puede generar conflictos al hacer pequeños cambios. [Storybook](https://storybook.js.org/) es una herramienta opensource que sirve para crear componentes visuales de forma aislada donde se pueden organizar los componentes y sus versiones en historias.
+
+EOS Costa Rica utiliza [Storybook EOS Costa Rica](https://components.eosio.cr/?path=/story/issuanceverifier--issuance-verifier-wrapper) para la creación de sus componentes. Para utilizar estos componentes de `eoscr-components` te dejamos la guía de intalación en [este sitio](https://www.npmjs.com/package/@eoscostarica/eoscr-components#installation).
+
+### Storybook
+
+
## Conceptos Principales
-A continuación te damos una lista de elementos que se toman de la documentación oficial de React para aplicar en tu proyecto.
+A continuación, te damos una lista de elementos que se toman de la documentación oficial de React para aplicar en tu proyecto.
* [JSX](https://es.reactjs.org/docs/introducing-jsx.html)
* [Renderizando Elementos](https://es.reactjs.org/docs/rendering-elements.html)
@@ -189,31 +241,42 @@ Hooks son una nueva característica en React 16.8. Estos te permiten usar el est
Los Hooks son funciones que te permiten “enganchar” el estado de React y el ciclo de vida desde componentes funcionales. Los hooks no funcionan dentro de las clases estos te permiten usar React sin clases. (No recomendamos reescribir tus componentes existentes de la noche a la mañana, pero puedes comenzar a usar Hooks en los nuevos si quieres).
-Se tiene
+Se tiene:
* [Hook de Estado](https://es.reactjs.org/docs/hooks-state.html)
* [Hook de Effecto](https://es.reactjs.org/docs/hooks-effect.html)
+* [Hook de Contexto](https://es.reactjs.org/docs/hooks-reference.html#usecontext)
+
+Otros tipos:
+
+* [useReducer](https://es.reactjs.org/docs/hooks-reference.html#usereducer)
+* [useCallback](https://es.reactjs.org/docs/hooks-reference.html#usecallback)
+* [useMemo](https://es.reactjs.org/docs/hooks-reference.html#usememo)
+* [useRef](https://es.reactjs.org/docs/hooks-reference.html#useref)
+* [useImperativeHandle](https://es.reactjs.org/docs/hooks-reference.html#useimperativehandle)
+* [useLayoutEffect](https://es.reactjs.org/docs/hooks-reference.html#uselayouteffect)
+* [useDebugValue](https://es.reactjs.org/docs/hooks-reference.html#usedebugvalue)
Este es un ejemplo de utilización, se puede reemplazar el código de tu `App.js` para probarlo. En este ejemplo muestran las dimensiones de la pantalla aun cuando se re-dimensiona.
```javascript
-import React , {useState,useEffect} from "react";
-import "./styles/App.css"
+import React , { useState, useEffect } from "react";
+import "./styles/App.css"
const App = () => {
const [width,setWidth] = useState(window.innerWidth);
const [height, setHeight]= useState(window.innerHeight);
- const updateDimensions = () =>{
+ const updateDimensions = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}
- useEffect(()=>{
+ useEffect( () => {
window.addEventListener('resize', updateDimensions);
- return()=>{
+ return() => {
window.removeEventListener('resize',updateDimensions);
}
}
@@ -228,10 +291,13 @@ const App = () => {
}
export default App;
```
+
[**Reglas Recomendadas**](https://es.reactjs.org/docs/hooks-rules.html)
>[Más Información](https://es.reactjs.org/docs/hooks-intro.html)
## React más Limpio con Hooks
-
From 03c435fe393d0abc7e560c3fa97080de15af6bcf Mon Sep 17 00:00:00 2001
From: edgarEOS <76976401+edgarEOS@users.noreply.github.com>
Date: Mon, 1 Feb 2021 13:26:35 -0500
Subject: [PATCH 4/4] fix(tutorial-react): minor changes
---
docs/tutoriales/tutorial-react.md | 22 +++++++++++-----------
1 file changed, 11 insertions(+), 11 deletions(-)
diff --git a/docs/tutoriales/tutorial-react.md b/docs/tutoriales/tutorial-react.md
index a1a281957..cd7419041 100644
--- a/docs/tutoriales/tutorial-react.md
+++ b/docs/tutoriales/tutorial-react.md
@@ -21,12 +21,12 @@ Para React se sugieren las siguientes herramientas, las herramientas con * son n
Estas extensiones son una recomendación para mejorar tu experiencia en el desarrollo con React.
-* Instalar [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=es), esta se encuentra en la chrome web store (Navegador Web)
-* Debugger for Chrome (Visual Studio Code)
-* React Extension Pack (Visual Studio Code)
-* Auto Close Tag (Visual Studio Code)
-* Prettier - Code Formatter (Visual Studio Code)
-* ESLint - Estandares de JavaScript (Visual Studio Code)
+* Instalar [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=es), esta se encuentra en la chrome web store (Navegador Web).
+* Debugger for Chrome (Visual Studio Code).
+* React Extension Pack (Visual Studio Code).
+* Auto Close Tag (Visual Studio Code).
+* Prettier - Code Formatter (Visual Studio Code).
+* ESLint - Estandares de JavaScript (Visual Studio Code).
## Recomendaciones
@@ -48,7 +48,7 @@ Es importante seguir los estandares de JavaScript, es recomendado utilizar la li
React se dio cuenta que actualizar la pantalla completa es una tarea que puede tener muchos costos en rendimiento y tiempo. Entonces creo un DOM Virtual. Este objeto DOM virtual es identico al objeto DOM de JavaScript.
-### ¿Cómo funciona?
+### ¿Cómo Funciona?
* El DOM virtual completo se actualiza.
* El DOM virtual se compara con una versión anterior a la actualización. React se da cuenta de cuales objetos cambiaron.
@@ -70,7 +70,7 @@ $ npm -v
#6.14.9
```
-## Iniciar la primera aplicación con React
+## Iniciar la Primera Aplicación con React
Vamos a crear una primera aplicación con React en donde se van a ver reflejados algunas de las funcionalidades de React, en este caso debes cambiar "nombre_de_tu_aplicación" por el nombre que desees, para hacer más sencilla la lectura de ahora en adelante se utilizara my-app.
@@ -170,13 +170,13 @@ import { Component } from 'react';
import './styles/App.css';
-import Header from "./components/header" //Se debe agregar el import del componente
+import Header from "./components/header" // Se debe agregar el import del componente
class App extends Component{
render(){
return (
- /*Se agrega el componente*/
+ /* Se agrega el componente */
);
}
@@ -233,7 +233,7 @@ A continuación, te damos una lista de elementos que se toman de la documentaci
* [Levantando el Estado](https://es.reactjs.org/docs/lifting-state-up.html)
* [Composición vs. Herencia](https://es.reactjs.org/docs/composition-vs-inheritance.html)
-## Lo nuevo en React
+## Lo Nuevo en React
### Hooks