> For the complete documentation index, see [llms.txt](https://medellin-js.gitbook.io/workshop-fullstack-js-developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://medellin-js.gitbook.io/workshop-fullstack-js-developer/frontend/reactjs/configuracion-inicial.md).

# Configuración Inicial

### Create React App 🛠

[Create React App](https://github.com/facebookincubator/create-react-app) es un ambiente cómodo para **aprender React**, y es la mejor manera de comenzar a construir **una nueva** [**aplicación de página única**](https://es.reactjs.org/docs/glossary.html#single-page-application) usando React.

Vamos a crear el proyecto create-react-app con npx (Es una [herramienta de ejecución de paquetes que viene con npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).), le indicamos a nuestro CLI, cual sera el nombre del proyecto.

```bash
npx create-react-app shopping-app
```

Una vez creado nuestro proyecto accedemos al directorio desde la consola e iniciamos el mismo con el comando `npm start.`

```bash
cd shopping-app
npm start
```

Esta seria la estructura del proyecto.

```
shopping-app
├── node_modules
├── public
│    ├── favicon.ico
│    ├── index.html
│    ├── manifest.json
├── src
│    ├── App.css
│    ├── App.js
│    ├── App.test.js
│    ├── index.css
│    ├── index.js
│    ├── logo.svg
│    ├── serviceWorker.js
├── .gitignore 
├── package.json  
├── README.md   
└── yarn.lock
```

{% hint style="info" %}
**Proyecto base**: En este [repositorio](https://github.com/mafesernaarboleda/workshop-medjs-fullstack-front) puedes encontrar el proyecto base en el cual se baso esta guía.
{% endhint %}

### Bootstrap 💅🏻

Una vez que tenemos la configuración de nuestro proyecto, vamos agregarle los estilos para que se vea lindo, en este caso no necesitamos algo muy elaborado, por lo cual utilizaremos **Bootstrap**.

![Bootstrap logo](https://2462303721-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LhH_i6obIRi4vB9Keqw%2F-LohgxO-APSvZJydBYmi%2F-Lohhb_3zxLLyxphf-g2%2Fimage.png?alt=media\&token=ab3d1427-c746-4666-a13a-e0b4a8ef7794)

Bootstrap es un kit de herramientas de código abierto para desarrollar con HTML, CSS y JS. Cree prototipos rápidamente o cree toda su aplicación con nuestras variables y mixins Sass, sistema de cuadrícula receptiva, componentes precompilados extensos y complementos potentes creados en jQuery.

Para agregar Bootstrap a nuestro proyecto sera muy sencillo, ingresaremos al Quick Start de Bootstrap donde encontraremos la siguiente linea, en este caso utilizaremos el BootstrapCDN, para acceder a los css de la librería y poderlos agregar a nuestro proyecto.

```markup
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
```

En la raíz de nuestro proyecto, dentro de la carpeta /public encontraremos el archivo **index.html** en el que agregaremos la linea anterior dentro de la etiqueta **\<head>.**

{% code title="/public/index.html" %}

```markup
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="apple-touch-icon" href="logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Ecommerce MedeJS</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
```

{% endcode %}

Solo nos falta un ultimo paso, dentro de nuestro proyecto tenemos el **App.css**, lo modificaremos con el siguiente código.

{% code title="App.css" %}

```css
body {
  padding-top: 56px;
}

.bg-primary {
  background-color: #4e73df !important;
}

.bg-gradient-primary {
  background-color: #4e73df;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #4e73df), to(#224abe));
  background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
  background-size: cover;
}

.bg-login-image {
  background: url("https://source.unsplash.com/K4mSJ7kc0As/600x800");
  background-position: center;
  background-size: cover;
}

.bg-register-image {
  background: url("https://source.unsplash.com/Mv9hjnEUHR4/600x800");
  background-position: center;
  background-size: cover;
}

.bg-password-image {
  background: url("https://source.unsplash.com/oWTW-jNGl9I/600x800");
  background-position: center;
  background-size: cover;
}

form.user .custom-checkbox.small label {
  line-height: 1.5rem;
}

form.user .form-control-user {
  font-size: 0.8rem;
  border-radius: 10rem;
  padding: 1.5rem 1rem;
}

form.user .btn-user {
  font-size: 0.8rem;
  border-radius: 10rem;
  padding: 0.75rem 1rem;
}

.btn-google {
  color: #fff;
  background-color: #ea4335;
  border-color: #fff;
}

.btn-google:hover {
  color: #fff;
  background-color: #e12717;
  border-color: #e6e6e6;
}

.btn-google:focus, .btn-google.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-google.disabled, .btn-google:disabled {
  color: #fff;
  background-color: #ea4335;
  border-color: #fff;
}

.btn-google:not(:disabled):not(.disabled):active, .btn-google:not(:disabled):not(.disabled).active,
.show > .btn-google.dropdown-toggle {
  color: #fff;
  background-color: #d62516;
  border-color: #dfdfdf;
}

.btn-google:not(:disabled):not(.disabled):active:focus, .btn-google:not(:disabled):not(.disabled).active:focus,
.show > .btn-google.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-facebook {
  color: #fff;
  background-color: #3b5998;
  border-color: #fff;
}

.btn-facebook:hover {
  color: #fff;
  background-color: #30497c;
  border-color: #e6e6e6;
}

.btn-facebook:focus, .btn-facebook.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.btn-facebook.disabled, .btn-facebook:disabled {
  color: #fff;
  background-color: #3b5998;
  border-color: #fff;
}

.btn-facebook:not(:disabled):not(.disabled):active, .btn-facebook:not(:disabled):not(.disabled).active,
.show > .btn-facebook.dropdown-toggle {
  color: #fff;
  background-color: #2d4373;
  border-color: #dfdfdf;
}

.btn-facebook:not(:disabled):not(.disabled):active:focus, .btn-facebook:not(:disabled):not(.disabled).active:focus,
.show > .btn-facebook.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}

.error {
  color: #5a5c69;
  font-size: 7rem;
  position: relative;
  line-height: 1;
  width: 12.5rem;
}
```

{% endcode %}

Listo, ahora tenemos estilos dentro de nuestro proyecto!!&#x20;

### Dependencias del proyecto

Nuestro proyecto necesitara instalar una dependencia más y es para el manejo de rutas, para eso vamos a utilizar `react-router-dom`, que en la sección de [Rutas](https://khriztianmoreno.gitbook.io/fullstack-js-developer/frontend/reactjs/rutas) explicaremos más en detalle.

Por ahora solo vamos a instalar esta dependencia por linea de comandos, ejecutando la siguiente linea:

```bash
npm i -S react-router-dom
```