# Páginas

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 `/pages`en 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.

{% code title="src/pages/Home.jsx" %}

```jsx
import React from 'react';

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

const Home = () => {
  return (
    <>
      <Header />
      <Product />
    </>
  );
}

export default Home;

```

{% endcode %}

### 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.

{% code title="src/pages/Detail.jsx" %}

```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;
```

{% endcode %}

### 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.

{% code title="src/pages/Register.jsx" %}

```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;
```

{% endcode %}

### 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.

{% code title="src/pages/Login.jsx" %}

```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;
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://medellin-js.gitbook.io/workshop-fullstack-js-developer/frontend/reactjs/paginas.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.