Pages

Las paginas las vamos a definir como componentes más principales a los cuales accederemos a partir de Rutas o que son navegables para el usuario, para nuestro proyecto crearemos un directorio llamado /pagesen el que tendremos las siguientes pages.

Home 🏠

Nuestra primera pagina es el home, esta es realmente sencilla accederemos a los dos componentes, Header y Product que se crearon inicialmente, crearemos entonces el archivo Home.jsx y agregaremos el siguiente código.

src/pages/Home.jsx

import React, { useEffect, useState } from 'react';

import Header from '../components/Header';
import Product from '../components/Product';

const Home = () => {
  const products = []

  return (
    <>
      <Header />
      <div className="container mt-4">
        <div className="row">
          <div key={idx} className="col-lg-4 col-md-6 mb-4">
            <Product {...product} />
          </div>
        </div>
      </div>
    </>
  );
}

export default Home;

Detail 🔎

Por cada producto que nos entregara nuestra api, necesitamos que el usuario pueda dar click en alguno de la lista y ver su detalle, para eso tenemos lo que sera el Detalle del producto, crearemos un archivo con el nombre Detail.jsx con el siguiente código.

src/pages/Detail.jsx

import React, { useEffect, useState } from 'react';

import Header from '../components/Header';
import Product from '../components/Product';

const Detail = (props) => {
  const product = {}
  return (
    <>
      <Header />
      <div className="container mt-4">
        <div className="row">
          <div className="col-lg-12">
            <Product {...product} />
          </div>
        </div>
      </div>
    </>
  );
}

export default Detail;

Register 📝

Uno de los retos de nuestro anterior taller era crear la api para autenticación, ahora vamos a utilizarla, permitiendo que los usuarios que van a navegar en nuestro sitio, se pueden registrar, para eso necesitamos una page de registro, la cual crearemos con el nombre Register.jsx con el siguiente código.

src/pages/Register.jsx

import React from 'react';
import { Link } from 'react-router-dom';

const Register = () => (
  <div className="container">
    <div className="card o-hidden border-0 shadow-lg my-5">
      <div className="card-body p-0">
        <div className="row">
          <div className="col-lg-5 d-none d-lg-block bg-register-image" />
          <div className="col-lg-7">
            <div className="p-5">
              <div className="text-center">
                <h1 className="h4 text-gray-900 mb-4">Create an Account!</h1>
              </div>
              <form className="user">
                <div className="form-group row">
                  <div className="col-sm-6 mb-3 mb-sm-0">
                    <input type="text" className="form-control form-control-user" id="exampleFirstName" placeholder="First Name" />
                  </div>
                  <div className="col-sm-6">
                    <input type="text" className="form-control form-control-user" id="exampleLastName" placeholder="Last Name" />
                  </div>
                </div>
                <div className="form-group">
                  <input type="email" className="form-control form-control-user" id="exampleInputEmail" placeholder="Email Address" />
                </div>
                <div className="form-group row">
                  <div className="col-sm-6 mb-3 mb-sm-0">
                    <input type="password" className="form-control form-control-user" id="exampleInputPassword" placeholder="Password" />
                  </div>
                  <div className="col-sm-6">
                    <input type="password" className="form-control form-control-user" id="exampleRepeatPassword" placeholder="Repeat Password" />
                  </div>
                </div>
                <a href="Register.html" className="btn btn-primary btn-user btn-block">
                  Register Account
                </a>
              </form>
              <hr />
              <div className="text-center">
                <Link className="small" to="/login">Already have an account? Login!</Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

export default Register;

Login 🔐

Una vez creado el registro, nuestros usuarios también necesitan loguearse en nuestro sitio, para eso crearemos el archivo Login.jsx agregando este código.

src/pages/Login.jsx

import React from 'react';
import { Link } from 'react-router-dom';

const Login = () => (
  <div className="container">
    <div className="row justify-content-center">
      <div className="col-xl-10 col-lg-12 col-md-9">
        <div className="card o-hidden border-0 shadow-lg my-5">
          <div className="card-body p-0">
            <div className="row">
              <div className="col-lg-6 d-none d-lg-block bg-login-image"></div>
              <div className="col-lg-6">
                <div className="p-5">
                  <div className="text-center">
                    <h1 className="h4 text-gray-900 mb-4">Welcome Back!</h1>
                  </div>
                  <form className="user">
                    <div className="form-group">
                      <input
                        type="email"
                        className="form-control form-control-user"
                        id="exampleInputEmail"
                        aria-describedby="emailHelp"
                        placeholder="Enter Email Address..."
                      />
                    </div>
                    <div className="form-group">
                      <input type="password" className="form-control form-control-user" id="exampleInputPassword" placeholder="Password" />
                    </div>
                    <a href="index.html" className="btn btn-primary btn-user btn-block">
                      Login
                    </a>
                  </form>
                  <hr />
                  <div className="text-center">
                    <Link className="small" to="/register">Create an Account!</Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

export default Login;