Introducción

  • 4 minutos

Para crear una aplicación interactiva, debe ser capaz de modificar los datos y responder a las solicitudes de los usuarios. En React, esta función se administra mediante el estado y los eventos.

El estado son los datos que se pueden actualizar y compartir entre los componentes de la aplicación. Los eventos permiten controlar todas las formas en las que un usuario puede interactuar con la aplicación: los clics, la escritura y las pulsaciones.

Objetivos

Objetivos de este módulo:

  • Agregar estado a una aplicación
  • Agregar controladores de eventos
  • Usar el enlace Effect para responder a los cambios de estado

Requisitos previos

  • Conocimiento de JavaScript, HTML y CSS
  • Conocimientos básicos de los componentes de React
  • Un editor de código como Visual Studio Code
  • Node.js instalado localmente
  • Git instalado localmente
  • El proyecto de inicio descrito en la sección siguiente

Clonación del proyecto

Este módulo usa un proyecto de inicio. Clone el proyecto y ábralo en Visual Studio Code.

  1. Para obtener el proyecto de inicio, ejecute los pasos siguientes en una ventana de comandos o en una ventana de terminal. En este paso, se clona el repositorio y se abre la carpeta de inicio en Visual Studio Code.

    # Windows
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react\code\3-state-events\start
code .

    # macOS or Linux
git clone https://github.com/MicrosoftDocs/mslearn-react
cd mslearn-react/code/3-state-events/start
code .

  2. En Visual Studio Code, abra el terminal integrado; para ello, seleccione Ver>Terminal. También puede seleccionar Ctrl+`. (En un equipo Mac, seleccione Cmd+`).

  3. En el terminal, ejecute el código siguiente para instalar los paquetes necesarios e iniciar el servidor de desarrollo.

    npm install
npm start

  4. El explorador predeterminado debe abrirse de forma automática. Si no lo hace, abra el explorador y vaya a http://locahost:8080.. Se abrirá la página de inicio.