GitHub - platzi/curso-frontend-developer-practico

Componentes y Contenedores

1. Inspeccionemos el proyecto anterior. En este caso, se nos facilitará transformar el proyecto del curso práctico de frontend a react pues en cada archivo html tenemos una sección
2. Abrimos el archivo de la clase1.html y copiamos el html principal.

<div class="login">
    <div class="form-container">
      <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">

      <h1 class="title">Create a new password</h1>
      <p class="subtitle">Enter a new passwrd for yue account</p>

      <form action="/" class="form">
        <label for="password" class="label">Password</label>
        <input type="password" id="password" placeholder="*********" class="input input-password">

        <label for="new-password" class="label">Password</label>
        <input type="password" id="new-password" placeholder="*********" class="input input-password">

        <input type="submit" value="Confirm" class="primary-button login-button">
      </form>
    </div>
  </div>

1. Estructuremos nuestro proyecto en react. Para ello, creamos una carpeta llamada containers (dentro de src), dónde tendremos estos mismos módulos de cada archivo html, pero transformado en react. Seamos precavidos en cerrar todas las etiquetas html pues nos pueden dar error.

Diferenciemos componente de "un tipo de contenedor" **en react. Los contenedores o módulos son partes más grandes. En este caso puede ser todo el login. Sin embargo, un componente puede ser un input o un form. Los componentes deben mantenerse pequeños y responder a uno sola necesidad, si no, perdemos funcionalidad.

1. Código en React

import React from 'react';

const Login = () => {
    return (
        <div className="login">
            <div className="form-container">
                <img src="./logos/logo_yard_sale.svg" alt="logo" className="logo" />

                <h1 className="title">Create a new password</h1>
                <p className="subtitle">Enter a new passwrd for yue account</p>

                <form action="/" classNameName="form">
                    <label for="password" classNameName="label">Password</label>
                    <input type="password" id="password" placeholder="*********" classNameName="input input-password" />

                    <label for="new-password" className="label">Password</label>
                    <input type="password" id="new-password" placeholder="*********" className="input input-password" />

                    <input type="submit" value="Confirm" className="primary-button login-button" />
                </form>
            </div>
        </div>
    );
}

export default Login;