Crear una aplicación React de pila completa

Implementación

• Cree una nueva aplicación de React

  La manera más simple de crear una aplicación de React es con el comando create-react-app. Instale este paquete mediante el siguiente comando en el símbolo del sistema o la terminal:

  npx create-react-app amplifyapp
  cd amplifyapp
  npm start

  Code snippet copied

  Copiar
• Inicie el repositorio de GitHub

  En este paso, creará un repositorio de GitHub, a donde luego enviará el código. Para completar este paso necesitará una cuenta de GitHub; si no tiene una, regístrese aquí.

  a. Cree un nuevo repositorio de GitHub para su aplicación.
  

  

  b. Abra una nueva terminal y vuelva a la carpeta raíz de la aplicación, por ejemplo, amplifyapp.

  c. El uso de create-react-app inicializará automáticamente el repositorio de git y realizará una confirmación inicial. Si está intentando implementar una aplicación React existente donde git no se ha inicializado, asegúrese de introducir los siguientes comandos antes de continuar:

  git init
  git add .
  git commit -m "initial commit"

  Code snippet copied

  Copiar

  d. Si nunca usó GitHub en su computadora, siga estos pasos antes de continuar permitiendo la conexión a su cuenta.
  

  Envíe la aplicación al nuevo repositorio de GitHub, ejecute los siguientes comandos en la interfaz de línea de comandos:

  git remote add origin git@github.com:username/reponame.git
  git branch -M main
  git push -u origin main

  Code snippet copied

  Copiar
• Inicie sesión en la Consola de administración de AWS

  Abra la Consola de administración de AWS en una nueva ventana del navegador para poder mantener abierta esta guía paso a paso. Cuando la pantalla se cargue, ingrese su nombre de usuario y contraseña para comenzar. A continuación, escriba Amplify en la barra de búsqueda y seleccione AWS Amplify para abrir la consola del servicio.
  

  

• Implemente su aplicación con AWS Amplify

  En este paso, conectará el repositorio de GitHub que acaba de crear al servicio AWS Amplify. Esto le permitirá crear, implementar y alojar la aplicación en AWS.

  a. En la consola de servicio AWS Amplify, seleccione Get Started (Comenzar) en Amplify Hosting.
  

  

  b. Seleccione GitHub como el servicio de repositorio y, luego, Continue (Continuar).

  

  c. Autentique con GitHub y regrese a la consola de Amplify. Elija el repositorio y la ramificación principal que creó antes y seleccione Next (Siguiente).
  

  

  d. Acepte la configuración de recopilación predeterminada y seleccione Next (Siguiente).

  

  e. Revise los detalles finales y seleccione Save and Deploy (Guardar y desplegar).
  

  

  f. Ahora AWS Amplify creará el código fuente e implementará la aplicación en https://...amplifyapp.com.
  

  

  g. Una vez que la compilación finalice, seleccione la imagen en miniatura para ver la aplicación web en funcionamiento. 

  

• Implementar automáticamente los cambios en el código

  En este paso, hará algunos cambios en el código utilizando el editor de texto y enviará los cambios a la ramificación principal de su aplicación.

  a. Edite src/App.js con el siguiente código y guarde.
  

  import React from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1>Hello from V2</h1>
        </header>
      </div>
    );
  }
  
  export default App;

  Code snippet copied

  Copiar

  b. Envíe los cambios a GitHub en el símbolo del sistema (Windows) o en el terminal (macOS) para iniciar automáticamente una nueva creación: 

  git add .
  git commit -m “changes for v2”
  git push origin main

  Code snippet copied

  Copiar

  c. Cuando la compilación finalice, seleccione la imagen en miniatura en la consola de AWS Amplify para ver la aplicación actualizada.