Preparación del proyecto - Curso de React desde cero - Capítulo 4

Por fin, ya vamos a crear una aplicación. Va a ser sencilla, pero te permitirá establecerte una buena base en React. Lo que vamos a realizar a lo largo de varios capítulos, es una página con un título y tres tarjetas como las que ves en la imagen.

Cajas div de componentes de React

Este capítulo será para dejar el proyecto algo más limpio y preparado para poder empezar a trabajar en nuestro proyecto.

Preparación del proyecto React

Lo primero que haremos, será crear tres carpetas en src. Una para los componentes que creemos, otra para los estilos css y otra para imágenes.

Carpeta de componentes de React

Añade tres imágenes a la carpeta "imagenes". Dales un nombre identificativo.

Con un editor gráfico como Photoshop, vamos a redimensionar estas imágenes (darles un tamaño en concreto). Yo lo haré con PowerToys. En el vídeo te muestro como hacerlo.

Imágenes para el proyecto React

Una vez tenemos las imágenes listas, vamos a eliminar y modificar los archivos y líneas de código que no necesitemos.

Eliminación de archivos

  • public/logo192.png
  • public/logo512.png
  • public/robots.txt
  • src/reportWebVitals.js
  • src/setupTests.js

Sustituciones

  • public/favicon.ico (pon el que quieras o deja el que viene por defecto)

Modificaciones

Estos archivos, no los tienes que eliminar, solo modificar.

  • src/index.js / borrar las líneas del archivo reportWebVitals.js
    • import reportWebVitals from './reportWebVitals';

reportWebVitals();
  • src/App.js / Borrar todo el contenido de dentro del <div>, dejándolo.

Ahora, si vas al navegador, verás que está todo en blanco.

Nos queda cambiarle el título a la aplicación. Para ello, abre el archivo de la carpeta public/index.html. Busca la línea <title> en el <head> y pon lo que quieras.

Aplicación de React en blanco

Para crear un componente, crea un nuevo archivo con extensión .JS o .JSX en la carpeta componentes. Yo voy a crear un archivo .jsx para hacerlo más identificativo según su contenido. No obstante, si lo creas con extensión .JS, va a funcionar igual.

Lo primero es agregar las funcionalidades del paquete React y ReactDOM al archivo.

React JSX 

import React from 'react';
import ReactDOM from 'react';

Listo. Ya tenemos todo lo necesario para empezar a crear el componente en el siguiente capítulo.

Capítulos

    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.

    Comentarios

    Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.