El objetivo del curso es crear una aplicación muy parecida a Instagram, llamada petgram. Tendremos nuestras rutas, gestión de usuarios y likes.
- 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
- Enrutado de la SPA:
- React Router
- Para las buenas prácticas:
- Lighthouse
- Cypress
- SEO, PWA y Deploy
- React Helmet
- Workbox
- Progressive Web App
- Deply con Now
-
Clonar este repositorio que tiene todo el material inicial
-
Iniciar proyecto
npm init -y
-
Instalar Webpack
npm i webpack wepack-cli --save-dev.
-
Agregar archivo src/index.js con un log base
-
Agregar el webpack.config.js
-
Instalar html-webpack-pluging
npm i html-webpack-plugin --save-dev
-
Instalar webpack-dev-server
npm i webpack-dev-server --save-dev
-
Añadir nuevo script para werpack serve en package.json
"dev": "webpack serve"
-
Instalar React
npm i react react-dom
-
Instalar Babel npm i @babel/core @babel/preset-env babel-loader @babel/preset-react --save-dev
-
Instalar linter: standar
npm i standard --save-dev
-
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.
-
Usando https://jakearchibald.github.io/svgomg/ se puede ingresar un svg y este es optimizado c:
-
Finally, en https://react-svgr.com/playground/ se puede convertir el archivo .svg en un componente de react de forma automática