Configuración Inicial

Create React App 🛠

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 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+.), le indicamos a nuestro CLI, cual sera el nombre del proyecto.

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.

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

Proyecto base: En este repositorio puedes encontrar el proyecto base en el cual se baso esta guía.

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

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

/public/index.html
<!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>

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

App.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;
}

Listo, ahora tenemos estilos dentro de nuestro proyecto!!

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 explicaremos más en detalle.

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

npm i -S react-router-dom
PreviousReactJS 💙NextComponentes

Last updated