El objetivo del curso es crear una aplicación muy parecida a Instagram, llamada petgram. Tendremos nuestras rutas, gestión de usuarios y likes.

1. Empaquetador y transpilador:

• Webpack
• Babel

2.Estilado con CSS en JS con:

• styled-components

3.Linter:

• Standard JS

4.Fetching (obtención) de datos:

• GraphQL
• React Apollo

5. Enrutado de la SPA:

• React Router

6. Para las buenas prácticas:

• Lighthouse
• Cypress

7. SEO, PWA y Deploy

• React Helmet
• Workbox
• Progressive Web App
• Deply con Now

1. Clonar este repositorio que tiene todo el material inicial

2. Iniciar proyecto

   npm init -y
   

3. Instalar Webpack

    npm i webpack wepack-cli --save-dev.
   

4. Agregar archivo src/index.js con un log base

5. Agregar el webpack.config.js

6. Instalar html-webpack-pluging

    npm i html-webpack-plugin --save-dev
   

7. Instalar webpack-dev-server

    npm i webpack-dev-server --save-dev
   

8. Añadir nuevo script para werpack serve en package.json

    "dev": "webpack serve"
   

9. Instalar React

    npm i react react-dom
   

10. Instalar Babel npm i @babel/core @babel/preset-env babel-loader @babel/preset-react --save-dev

11. Instalar linter: standar

    npm i standard --save-dev
    

1. Mediante el uso de https://maketext.io/ se puede ingresar texto y se generan multiples alternativas cool, las cuales pueden ser descargadas en formato svg.

2. Usando https://jakearchibald.github.io/svgomg/ se puede ingresar un svg y este es optimizado c:

3. Finally, en https://react-svgr.com/playground/ se puede convertir el archivo .svg en un componente de react de forma automática