Cómo empezar con React

React es una biblioteca de JavaScript muy popular que se utiliza principalmente para crear aplicaciones web de una sola página. Hay tantas cosas que puede hacer con React y tantos tutoriales disponibles en línea, pero aquí solo hablaré sobre los pasos a seguir para pasar de cero a su primer componente de reacción.

Antes de empezar

Necesita una versión reciente de NodeJs, puede instalar la última versión desde nodesource .

Además, si no está familiarizado con la sintaxis JSX, consulte este enlace .

Configuración de un entorno de desarrollo

Puede probar React de inmediato, simplemente incluyendo una etiqueta de secuencia de comandos en su página web que carga un archivo .js listo para usar, pero no creo que sea el camino a seguir, porque no quiere probarlo. , quieres usarlo.

Con la herramienta create-react-app , puede configurar una plantilla, que le permite ver cómo se ve una aplicación básica de reacción, y un compilador en vivo que le muestra la salida de su código tan pronto como guarda un archivo.

Una vez que todo esté instalado, simplemente vaya a la carpeta de la aplicación y escriba: npm start.

Comprender los componentes y accesorios.

El propósito de un componente es representar algo para mostrar cada vez que ocurre un evento específico. Deben definirse los eventos que activan el renderizado, hablamos de "cambiar el estado" de un componente.

props es un objeto con propiedades que se pasan a la función del componente a través de variables como atributos html.

Entender ganchos

React primero usó clases para definir componentes, pero recientemente se hizo posible usar funciones para definirlos, y los ganchos son los que le permiten acceder a las diferentes funcionalidades de React dentro de estas funciones.

El estado es la funcionalidad más básica, por lo que el primer enlace que necesitará es useState .

Tu primer componente

Localice el archivo app.js (o app.tsx si usa mecanografiado) en la carpeta src y ábralo: la función App( ) será su primer componente. Elimine lo que está dentro de return(), y también lo que está arriba, luego intentemos algo muy simple:

Pon este código dentro de return()

<button onClick={showMessage}>React!</button>

function showMessage(){
    console.log("It works!")
}

ReactDOM.render( ) es lo que le permite a React "escribir" componentes en la página web, lo encontrará dentro de index.js (o index.tsx).

Para comprender los cambios de estado, la mayoría de los tutoriales muestran cómo crear contadores que incrementan su valor cada vez que hace clic en un botón.

Tu primer complemento

Cualquiera puede crear sus propios ganchos, y muchos ganchos personalizados están disponibles como "complementos". Uno de ellos es react-hook-form , que maneja la visualización y validación de formularios,

En RHF, useState se reemplaza por useForm , que contiene funcionalidades listas para usar que están muy bien documentadas.