News APP

Proyecto para trabajar con todo lo aprendido con react, context y sass/scss a través de un sitio web/aplicación de noticias utilizando la API para desarrolladores del new york times como base para el front.

Authors

• @daniCabrera91

Tech Stack

React Vite SASS SCSS ReactRouter Context

Empezar un proyecto

1.- Creamos nuestra app de React con vite

npm create vite@latest 

2.- Completamos la configuración en terminal:

Need to install the following packages:
create-vite@5.4.0
Ok to proceed? (y) y
> npx
> create-vite

✔ Project name: … tuProyecto
✔ Select a framework: › React
✔ Select a variant: › JavaScript

3.- Abrimos la ruta de nuestro proyecto en el terminal

cd personal-page

4.- Instalamos todos los paquetes que Vite genera al crear el proyecto

  npm install

5.- Inicializamos el proyecto

  npm run dev

6.- Instalamos la librería ReactRouter para el enrutamiento de nuestra página SPA.

npm install react-router-dom@6

7.- Instalamos Axios para poder hacer la petición a la API

npm install axios

8.- Instalamos Axios para poder hacer la petición a la API

npm install axios

9.- Accedemos a la web de la api y leemos la documentación. Nos loggeamos y obtenemos nuestra apy-key y nuestra api para poder trabajar con Axios y context.

https://developer.nytimes.com

10.- Instalamos SASS para añadir estilos y un diseño responsive.

  npm install sass

OPCIONAL.- Instalamos la extensión VSC para React

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

IMPORTANTE: Para poder trabajar con este proyecto debes tener tu propia Api-key y modificar el nombre del archivo .env_example por .env e introducir tu apikey en su interior.