¿Qué son los React Hooks y cómo cambian el desarrollo con React?

¿Qué son los React Hooks y cómo cambian el desarrollo con React?

Es una característica que salió en la versión 16.8 en febrero de 2019.
Los Hooks vienen a cambiar la forma de desarrollo en React.
⠀
Vienen a resolver problemas ligados a React, como la complejidad de los componentes, no se podía compartir la lógica de estado entre componentes, Component Hell, etc.

Los Hooks presentan una alternativa al desarrollo con clases, ya que estos vienen a trabajar con funciones.

⠀
¿Qué es un Hook?

Un Hook es una función especial que nos permitirá conectarnos a características de React, para trabajar con métodos especiales, los cuales nos permitirán manejar el estado de mejor forma sin depender de clases.

⠀
Crear proyecto:
> npx create-react-app react-hooks
Ejecutar proyecto:
> npm run start

Uno de los creadores de los Hooks, Dan Abramov, también fue el creador de Redux!
Los hooks permiten que nuestros componentes funcionales puedan tener el ciclo de vida que tienen las clases además de mantener estado.
Así mismo, al trabajar con funciones y no con clases, no tenemos que preocuparnos por el uso de this que en React tiene un contexto distinto a los demás lenguajes, por lo que podía ser más problemático.

Oscar, ¿cómo se llama el tema de la terminal? Supongo estás usando oh-my-zsh

Hola Platzi Nautas !

En este Repo encontrarán un proyecto base en el cual elimino todo lo que no necesitamos de create-react-app, espero sea de ayuda

Vídeo cuando presentaron los Hooks en la React Conf 2018

Creación del proyecto

Webpack > create-react-app

Para los que quieran hacer el proyecto de una manera mas optimizada, (usando los conocimientos del curso de webpack)

Les comparto mi configuración sencilla y basica de webpack, ademas de las dependencias del package.json y .babelrc que les permitirán usar react, para comenzar a emanciparse de create-react-app que es una excelente herramienta atajo pero que no esta sujeta a optimizaciones

Webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'
    },
    resolve: {
        extensions: ['.js','.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use:{
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.html$/,
                use: {
                    loader: "html-loader"
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            inject: true
        }),
        new MiniCssExtractPlugin()
    ],

    devServer: {
        historyApiFallback: true,
        static: {
            directory: path.join(__dirname, 'dist/'),
        },
        compress: true,
        port: 3000,
        open: true,
    }
}

Package.json para dependencias necesarias

"dependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "html-loader": "^3.0.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.16.7",
    "webpack-dev-server": "^4.7.2"
  }

Configuracion de babelrc para mantener nuestro js compatible

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

Oscar porque te pasaste a Windows 😛😛

• Link oficial de la documentación de la presentación de React Hooks

Aqui les dejo la presentacion de los hooks link

Por si acaso al ejecutar el comando

npm start

Les da el error Error: ENOSPC: System limit for number of file watchers reached . Les dejo la solución al problema.

Antes que nada el problema se debe a que nuestro sistema operativo viene con una cantidad de watchers definida dicha cantidad es muy pequeña. Entonces la solución consiste en aumentar la cantidad de wachers lo cual los podrás hacer con los comandos que te dejo.

• Ejecutas en tu consola los siguientes comandos:

cat /proc/sys/fs/inotify/max_user_watches

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf

sudo sysctl -p

No es muy idóneo crear un proyecto con npm install create-react-app porque al crear la copia local, te priva de mantener actualizados los módulos.

Curso profesinal de React Hooks

Bienvenida

¿Qué aprenderás en este curso?

Implementar React Hooks.

¿Qué son los React Hooks y cómo cambian el desarrollo con React?

Es una característica que salió en la versión 16.8 de React en Febrero de 2019. Son 100% compatibles con las versiones anteriores.

Son opcionales pero ayudan muchísimo, resuelven problemas. Antes manejar componentes era complejo y manejar su lógica era complicado. Se llamaba “component hell”.

Las clases no aportan valor, solamente es sintaxís agradable. Los hooks trabajan directamente con funciones y no con clases.

Un hook es una función especial que nos permitirá conectarnos a características de React.

¿Cuándo deberías usarlos? Siempre.

Empezamos con npx create-react-app react-hooks.

Entramos a la carperta y ejecutamos npm start.

2.-¿Qué son los React Hooks y cómo cambian el desarrollo con React?

–

• Característica que salió en la versión 16.08 en febrero de 2019.
• Son compatibles con versiones anteriores.
• Complementan el desarrollo y su implementación es opcional, pero hoy en día cambian la forma de desarrollo con react.
• Vienen a resolver problemas que estaban de alguna forma ligados a React.

–
¿Cuáles son estos problemas que vienen a resolver?

• Los componentes eran algo complejos y no era fácil de compartir la lógica de estado entre estos mismos, se le denominaba component hell que era componente con componente con componente donde a cada uno le teníamos que compartir props. Con los hooks esto ya no es un problema.
• Otro problema eran las clases, que confundían a las personas y a las máquinas. Las clases no aportan valor ya que solo son una mejora sintáctica sobre la forma en la que podemos trabajar la herencia basada en prototipos de JS. Esto alenta el proceso de aprendizaje de React. Los hooks nos dan una alternativa a estas dándonos un proceso más amigable en el desarrollo. Usan funciones y no clases.

–
¿Qué es un hook?

Es una función especial que nos permite conectarnos a características de React, por lo tanto vamos a poder trabajar métodos especiales para manejar el estado de mejor forma sin depender de las clases.

–
Para inicializar el proyecto

npx create-react-app react-hooks
y

npx es para ejecutar desde la nube un programa, en este caso el script de react app.

Hace un tiempo había creado un pequeño vídeo en donde hacía una introducción a React Hooks, por sí a alguien le es de ayuda se puede dar una vuelta por acá 🤗 https://www.youtube.com/watch?v=onHm3vRaYSI&list=PL82aCs8EBQgueHMstfqztYpTpEJfI1WR0

Y de paso me regala su feedback 🙏🙏🙏

Si tienes github cli desde el terminal

gh repo clone platzi/curso-react-hooks
cd curso-react-hooks
yarn install

Excelente, espero algo grande de éste curso, no tengo tanta experiencia y quiero aprender

¿Qué son los React Hooks y cómo cambian el desarrollo con React?

Es una característica que salió en la versión 16.8 💻

Los Hooks son ahora una alternativa para poder trabajar con React, son 100% compatibles con versiones anteriores, complementan al desarrollo y son opcionales si así lo quieres, pero hoy en día los Hooks vienen a cambiar la forma en la que hacemos desarrollo con React.

Los Hooks vienen a resolver problemas que estaban ligados con React. ✅

Algunos de los problemas que resuelven los Hooks son:

• Los componentes eran algo complejos y no era fácil compartir la lógica de estado de estos mismos
• Component Hell (como el call back hell)
• Las clases, ya que confunden a las personas y maquinas

Los Hooks vienen a ofrecer una alternativa a todos estos problemas.

Los Hooks trabajan con funciones y no con clase 👀

¿Qué son los React Hooks?

Un Hooks es una función especial que nos permite conectarnos a características de React. Con eso vamos a poder trabajar métodos especiales (useState) sin depender de las clases.

Los Hooks pueden ser implementados cuando sea y ayudan con tu desarrollo

Hooks

Introducción

💡 INFO
Son características adicionales a React con lo cual podemos abstraer patrones de estado o diseño.

.
Anteriormente, previa los hooks, React carecía fuertemente de "la interconexión de estados" donde se resolvía vinculado propiedades o elaborando componentes de alto nivel. Dichos patrones, requerían volver a estructurar componentes originando que el código sea engorroso de ver y probar.
.
En una aplicación de React, muchas veces se puede encontrar con abstracciones como:

• Proveedores-Consumidores en capas.
• “Wrapper Hell”.
• Componentes de alto orden.

.
React necesitaba una herramienta primitiva que le ayudará a resolver y compartir estructuras lógicas.
.
Los Hooks son soluciones que permite extraer dicha lógica y separarla para que, de manera independiente, sea reusable y probable. Además, con los Hooks es posible usar soluciones compartibles entre componentes, sin cambiar la jerarquía.
.

Complejidad de componentes

.
En medida que va creciendo una aplicación, en ocasiones se necesita cierta lógica o efectos secundarios administrados entre los diferentes ciclos de React ( componentDidMount o componentDidUpdate ). Todo pudiera irse administrando manualmente abstrayendo su lógica (que necesariamente no está relacionada), como la asignación de events listeners o cleanup performed, introduciendo bugs o incosistencias en el código.
.
En la mayoría de los casos, no es posible fragmentar los componentes en pequeñas instancias ya que la lógica lo impediría, y con ello la dificultad de probarlos.
.
Para resolver este punto, los Hooks permite separar un componente en pequeñas funciones en función de su utilidad/lógica, inalterando su ciclo de vida.

Que son los react hooks

(Y como cambian el desarrollo web con react)

Apuntes

• Caracteristica de react 16.8 (Feb 2019)
• Presentados en react conf
• Alternativa para trabajar en react
• 100% compatibles con versiones anteriores
• Complementan el desarrollo
• Son opcionales, pero hoy vienen a cambiar la forma de desarrollar en react
• Vienen a resolver problemas que estan ligados a react
  • los componentes eran complejos y no era facil compartir la logica de los estados (component hell)
  • las clases confunden a las personas y a las maquinas, las clases no aportan valor
  • los hooks trabajan directamente con funciones y dejan de lado a las clases

Que es un hook

• Es una funcion especial que nos permite conectarnos a caracteristicas de react (como usar useState)
• Cuando deberia usarlo?
  • En cualquier momento en el proyecto, son opcionales pero muy recomendados, para mejorar la logica de desarrollo

Primeros pasos

//console
npx create-react-app react-hooks
//crea el proyecto en base en react

Mi resumen:
Nacen para resolver problemas ligados y no tan ligados a react:

• Evitar el component hell.
• Evitar tener que estar pasando props en cada componente.
• Facilitar el uso de React.
• Evitar usar clases que ralentizan el aprendizaje de React

Los Hooks trabajan directamente con funciones.

¿Qué es un Hook?
Es una función especial que nos permite conectarnos a caracteristicas de React.

¿Cuándo usar un Hook?
Son opcionales pero su uso es recomendado ya que facilita mucho programar con React.

Me marcaba el siguiente error al crearlo:

You are running `create-react-app` 4.0.1, which is behind the latest release (4.0.2).

We no longer support global installation of Create React App.

hice lo siguiente en consola:

npm uninstall -g create-react-app

then

npm install -g create-react-app

then

npx create-react-app hooks-react

Y funciono 😄 npx como lo menciona el profesor es para traer la version/script más reciente de react desde la nube.

Les facilito un poco mas de info sobre npx en este link.

exelente explicacion

Si quizá alguno, se encuentra en Ubuntu y acaba de realizar la instalación de todo y le resultó un error así:

Error: ENOSPC: System limit for number of file watchers reached

Únicamente eliminen la carpeta de node_modules

En consola

> rm -rf node_modules/

y vuelven a instalar todo

> npm install

Excelente! tenia tiempo esperando este curso

A mi me gustaban más las clases xp

En mi ruta empece REDUX pero quiero ya tomar este curso!
Oscar es un excelente profesor
saludos!!!

Justo cuando empezaba a entender las clases de JS ahora vamos a dejar de usarlas, que buen servicio xD

Para crear proyecto con create-react-app ejecutamos el siguiente comando:

$ npx create-react-app [app-name]

1. Que es un Hook: Es una funcion especial que nos permite conectarnos a caracteristicas de React

2. npx: Permite ejecutar desde la nube un programa, en este caso (npx create-react-app) ejecutar el script create-react-app. Para no requerir tener instalada la instancia de create-react-app en nuestra maquina

¿Qué son los React Hooks?

Salió en la versión 16.8 en febrero de 2019.

Los hooks son una alternativa para trabajar con React. Pero vienen a cambiar la forma en como trabajamos con él.

Los Hooks tienen ventajas como:

-Los componentes con clases era complejos y no era tan fácil la forma de compartir lógica (Component hell).

-Resuelven el tema de las clases, las clases confunden a las personas y a las máquinas. Las clases no aportan ningún valor, ya que solo son una forma sintáctica de como podemos trabajar la herencia basada en prototipo en Js.

Hooks vienen a trabajar directamente con funciones.

**Un hook es una función especial **que nos permite conectarnos con cierto método y funcionalidades que nos provee React.

Comando para inicializar un proyecto con React:

**npx nos permite ejecutar desde la nube un programa
**
npx create-react-app nombre_del_proyecto

npm run start

Npm run start nos permite correr el proyecto en un localhost por defecto el 3000

Las clases confunden a las personas y máquinas.
Existe el Component Hell que es colcoar muchos componentes, dentro de componentes
No aportan valor: son una mejora sintática en la que se trabaja la herencia de prototipos en JS.
.
Hooks es una alternativa y son opcionales en su implementación. Y tienen un proceso más amigable en el desarrollo, pues trabaja con funciones.
.

• UN HOOK ES UNA FUNCIÓN ESPECIAL PARA CONECTARNOS A CARACTERÍSTICAS DE REACT.

I´m like bruh!! preach brother preach
Gotta get that React hook knowledge asap.

Abordamos también los siguientes hooks ? :

• useImperativeHandle
• useContentLayout
• useDebugValue

https://es.reactjs.org/docs/hooks-reference.html

s