隆Bienvenida! Este es un curso especial de React Hooks

1

驴Qu茅 aprender谩s en el Curso Profesional de React Hooks?

2

驴Qu茅 son los React Hooks y c贸mo cambian el desarrollo con React?

Introducci贸n a React Hooks

3

useState: estado en componentes creados como funciones

4

useEffect: olvida el ciclo de vida, ahora piensa en efectos

5

useContext: la fusi贸n de React Hooks y React Context

6

useReducer: como useState, pero m谩s escalable

7

驴Qu茅 es memoization? Programaci贸n funcional en JavaScript

8

useMemo: evita c谩lculos innecesarios en componentes

9

useRef: manejo profesional de inputs y formularios

10

useCallback: evita c谩lculos innecesarios en funciones

11

Optimizaci贸n de componentes en React con React.memo

12

Custom hooks: abstracci贸n en la l贸gica de tus componentes

13

Third Party Custom Hooks de Redux y React Router

Configura un entorno de desarrollo profesional

14

Proyecto: an谩lisis y retos de Platzi Conf Store

15

Instalaci贸n de Webpack y Babel: presets, plugins y loaders

16

Configuraci贸n de Webpack 5 y webpack-dev-server

17

Configuraci贸n de Webpack 5 con loaders y estilos

18

Loaders de Webpack para Preprocesadores CSS

19

Flujo de desarrollo seguro y consistente con ESLint y Prettier

20

Git Hooks con Husky

Estructura y creaci贸n de componentes para Platzi Conf Store

21

Arquitectura de vistas y componentes con React Router DOM

22

Maquetaci贸n y estilos del home

23

Maquetaci贸n y estilos de la lista de productos

24

Maquetaci贸n y estilos del formulario de checkout

25

Maquetaci贸n y estilos de la informaci贸n del usuario

26

Maquetaci贸n y estilos del flujo de pago

27

Integraci贸n de 铆conos y conexi贸n con React Router

Integraci贸n de React Hooks en Platzi Conf Merch

28

Creando nuestro primer custom hook

29

Implementando useContext en Platzi Conf Merch

30

useContext en la p谩gina de checkout

31

useRef en la p谩gina de checkout

32

Integrando third party custom hooks en Platzi Conf Merch

Configura mapas y pagos con PayPal y Google Maps

33

Paso a paso para conectar tu aplicaci贸n con la API de PayPal

34

Integraci贸n de pagos con la API de PayPal

35

Completando la integraci贸n de pagos con la API de PayPal

36

Paso a paso para conectar tu aplicaci贸n con la API de Google Maps

37

Integraci贸n de Google Maps en el mapa de checkout

38

Creando un Custom Hook para Google Maps

Estrategias de deployment profesional

39

Continuous integration y continuous delivery con GitHub Actions

40

Compra del dominio y despliega con Cloudflare

Optimizaci贸n de aplicaciones web con React

41

Integraci贸n de React Helmet para mejorar el SEO con meta etiquetas

42

An谩lisis de performance con Google Lighthouse

43

Convierte tu aplicaci贸n de React en PWA

Bonus: trabaja con Strapi CMS para crear tu propia API

44

Crea una API con Strapi CMS y cons煤mela con React.js

驴Qu茅 sigue en tu carrera profesional?

45

Pr贸ximos pasos para especializarte en frontend

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Flujo de desarrollo seguro y consistente con ESLint y Prettier

19/45
Recursos

Aportes 35

Preguntas 20

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Si estan en windows solo qu铆tenle la comillas simples al patron en el sript y ya les funciona.

"format": "prettier --write {*.js,src/**/*.{js,jsx}}"

Comando para instalar eslint:

  • Demanera global
 npm install -g eslint
  • Plugins de eslint
npm install eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Luego creas un archivo con el siguiente nombre .eslintrc y pegas lo siguiente:

{
  "extends": [
    "airbnb",
    "prettier"
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx"
        ]
      }
    ],
    "react/prop-types": 0,
    "no-underscore-dangle": 0,
    "import/imports-first": [
      "error",
      "absolute-first"
    ],
    "import/newline-after-import": "error"
  },
  "globals": {
    "window": true,
    "document": true,
    "localStorage": true,
    "FormData": true,
    "FileReader": true,
    "Blob": true,
    "navigator": true
  },
  "parser": "babel-eslint"
}

Comando para instalar prettier:

npm install prettier eslint-plugin-prettier eslint-config-prettier

Creamos un archivo con el nombre .prettierrc y realizamos la siguiente configuraci贸n:

{
  "trailingComma": "es5",
  "semi": true,
  "singleQuote": true
}

En Windows me funcion贸 de esta forma:

"format": "prettier --write \"{*.js,src/**/*.{js,jsx}}\"",

IMPORTATE ESTUDIATES 2022:
Es altamente probable que les salte errores, por lo que la configuracion correcta es :

npm install eslint @babel/eslint-parser eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react -D

Y el archivo .eslintrc debe ir el siguiente contenido

{
    "extends": [
        "airbnb",
        "prettier"
    ],
    "plugins": [
        "prettier"
    ],
    "rules": {
        "react/jsx-filename-extension": [
        1,
        {
            "extensions": [
            ".js",
            ".jsx"
            ]
        }
        ],
        "react/prop-types": 0,
        "no-underscore-dangle": 0,
        "import/imports-first": [
        "error",
        "absolute-first"
        ],
        "import/newline-after-import": "error"
    },
    "globals": {
        "window": true,
        "document": true,
        "localStorage": true,
        "FormData": true,
        "FileReader": true,
        "Blob": true,
        "navigator": true
    },
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "requireConfigFile": false
    }
}

Deberan ir a la siguiente pagina si ya instalaron segun la clase
https://tjaddison.com/blog/2021/03/updating-babel-eslint-to-babeleslint-parser-for-react-apps/

脡xitos y feliz a帽o 2022!

Chicos este fue el script que me funciono para que el prettier me formateara todos mis documentos dentro de src, ya que los scripts del curso no me localizaban la carpeta src. No formateo el archivo de webpack pero si todos los demas.

Los scripts de Package.json

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "build": "webpack --mode production",
    "format": "prettier --write '{*.jsx,src/**/*.{js,jsx}}'",
    "lint": "eslint src/ --fix"
  }
}

Comando de prettier format para windows

"format": "prettier --write \"{*.js,./src/**/*.{js,jsx}}\" ",```

Por si tienen problemas con arrow-body-style, desactivar la regla con 0, y agregar 鈥渆nv鈥 en el .eslintrc

{
  extends: "airbnb",
  rules: {
    "arrow-body-style": 0
  },
  "env": {
    "jest": true
  }
};```

Utilizando solamente la extension de eslint en vscode y con esta regla en .eslintrc, el IDE resalta los errores de prettier como si fueran de eslint.

  "rules": {
    "prettier/prettier": 2, // Means error

y ademas podemos hacer que se arreglen los errores automaticamente agregando a las settings de vscode lo siguiente

   "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

Al instalar el paquete de babel-eslint nos aparece un warning que nos avisa que este paquete esta deprecated

npm WARN deprecated [email protected]10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.

Para corregirlo tenemos que instalar el paquete que nos sugiere npm, cambiando este paquete nos quedar铆a de la siguiente manera:

npm install eslint @babel/eslint-parser eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Si ya hemos instalado el paquete de babel-eslint podemos removerlo de la siguiente manera:

npm uninstall babel-eslint

Para mas informaci贸n pueden revisar el articulo que segu铆.

Si alguno prefiere la tabulacion en vez de 2 espacios para el codigo agreguen la regla "tabWidth": 4 al archivo .prettierrc

Wow, creo que esto le da mucha m谩s profesionalidad al proyecto 馃槷

Les dejo por aki un repo con todas las configuraciones de un proyecto de WebPack tal cual nos ha indicado el profesor.
React WebPack Structure

En la pagina del modulo de Airbnb eslint recomienda instalar la dependencias mediante

npx install-peerdeps --dev eslint-config-airbnb

https://www.npmjs.com/package/eslint-config-airbnb

驴Todas estas dependencias no son desarrollo?

el profesor Oscar olvido instalar las dependencies con el flag -D (para que quede en devDependencies).
A pesar de que al final de la clase pone todo en su lugar, hay que hacer npm i para que quede configurado correctamente

En Windows me funcion贸 de esta forma:

"format": "prettier --write \"{*.js,src/**/*.{js,jsx}}\"",

Estoy utilizando typescript. Tengo que modificar la configuracion de las dependencias que instalamos?

Si les salta error en la importacion de react.
installen @babel/eslint-parser en vez de babel-eslint y en archivo .eslintrc cambien el parser a este 鈥減arser鈥: 鈥淍babel/eslint-parser鈥

Si con el comando npm run lint les aparece el siguiente error:

Oops! Something went wrong! :(

ESLint: 8.15.0

No files matching the pattern "src/" were found.
Please check for typing mistakes in the pattern.

Deben cambiar el script en su package.json a:

"lint": "eslint \"src/**/*.{js,jsx}\" --fix"

Si con ESlint les aparece el error:

error Parsing error: require() of ES Module

Esto sucede porque babel-eslint esta deprecada y no soporta ES6 modules.

Esto se soluciona instalando el siguiente comando :

npm install @babel/eslint-parser

Y en su archivo de .eslintrc deben cambiar la l铆nea:

"parser": "babel-eslint"

por

"parser": "@babel/eslint-parser" 

Y ya deber铆a funcionar.

Para los que tengan problemas con las importaciones y otras cosas de ESLINT pueden ver esto

No es necesario configurar eslint y prettier por separado, pueden convivir en el mismo archivo de .eslintrc, esto evita que creemos 2 comandos para fixear el c贸digo (est茅tica y sint谩cticamente), instalen:

  1. eslint-plugin-prettier
  2. eslint-config-prettier
  3. prettier

Como devDependencies, luego su archivo .eslint agregan:

{
  "extends": [
    "prettier",
    "eslint-config-prettier"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "arrowParens": "avoid",
        "bracketSpacing": true,
        "htmlWhitespaceSensitivity": "css",
        "insertPragma": false,
        "jsxBracketSameLine": false,
        "jsxSingleQuote": true,
        "printWidth": 80,
        "proseWrap": "preserve",
        "quoteProps": "as-needed",
        "requirePragma": false,
        "semi": false,
        "singleQuote": true,
        "tabWidth": 2,
        "trailingComma": "none",
        "useTabs": false,
        "vueIndentScriptAndStyle": false
      }
    ]
  }
}

O bueno, las configuraciones de prettier que ustedes prefieran y listo, ya tendr谩n todo configurado.

Mi configuraci贸n de prettier:

{
  "printWidth": 90,
  "tabWidth": 2,
  "useTabs": true,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "avoid",
  "requirePragma": false,
  "insertPragma": true,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto"
}

Documentaci贸n

La configuraci贸n varia en funci贸n de los gustos de cada cual 馃槂

脡ste es el cap铆tulo de la suerte 11:11 xD

Buenas les dejo m铆 configuraci贸n optimizado para React, con Prettier y ESLint. Debajo del .eslitnrc.js, est谩n las dependencias necesarias.
Espero le sea de utilidad.

Les dejo un peque帽o aporte de configuraci贸n por si quieren usar alias de webpack con eslint para tener imports m谩s organizados.
_
Note un peque帽o error al momento de ejecutar el script de lint ya que no toma en cuenta ningun archivo jsx, asi que lo primero que tenemos que hacer es editar el script que creo el profesor en el package.json para que eslint tambi茅n nos escanee los archivos jsx, esto lo hacemos de la siguiente manera:

"lint": "eslint src/ --ext jsx,js --fix"

Para configurar los alias en webpack basta con a帽adirle esto en la secci贸n resolve del archivo webpack.config.js

resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@styles': path.resolve(__dirname, 'src/styles'),
    }
},

Necesitaremos instalar un par de dependencias para que ESLint los reconozca

npm i eslint-plugin-import eslint-import-resolver-webpack -D

Por ultimo agregaremos las configuraciones necesarias en el archivo .eslintrc

"settings": {
   "import/resolver": {
      "alias": {
        "map": [
          ["@styles", "./src/styles"]
        ]
       },
       "extensions": [".js", ".sass", ".json", ".jsx"]
    }
},
"plugins": [
    "prettier",
    "plugin:import/recommended"
],

Adicionalmente si utilizan vscode y quieren que funcione el intellisense para estos imports pueden crear un archivo a nivel raiz llamado jsconfig.json con el siguiente contenido

{
  "compilerOptions": {
    "target": "esnext",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "@styles/*": ["src/styles/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

Espero les sirva 馃馃徏

Si est谩n en Mac

"format": "prettier --write {*.js,src/**/*.{js,jsx}}",

Yo lo deje de esta manera para ejecutar solo el comando de 鈥榶arn lint o npm run lint鈥

"format": "prettier --write '{*.jsx,src/**/*.{js,jsx}}'",
"lint": "eslint src/ --fix && yarn format"

n

Se puede hacer que el eslint ejecute tus reglas de prettier de esta forma no hay que correr el prettier por aparte. Ademas se puede configurar vsCode para que arregle todo lo que este mal del eslint autom谩ticamente al guardar.

https://github.com/prettier/eslint-plugin-prettier

as铆 luce mi configuraci贸n de eslint hasta el momento

{
  "extends": [
    "airbnb", 
    "airbnb/hooks",
    "airbnb/whitespace",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": ["warn", {
      "trailingComma": "es5",
      "printWidth": 100,
      "tabWidth": 2,
      "useTabs": false,
      "semi": true,
      "singleQuote": true
    }]
  }
}

y mi config de vscode

"editor.codeActionsOnSave": {
    "source.fixAll": true
  },

Me gusta trabajar con Prettier como plugin para VS Code, y realizar su configuraci贸n desde la propia configuraci贸n del editor.

Esto es muy importante tanto ESlint y Prettier pero para grupos de trabajo ya consolidados, pero no est谩 de m谩s aprender xD.

Les facilito la pagina de eslint para que puedan profundizar mas en su configuraci贸n

Hola, estoy siguiendo este proyecto en Nextjs. Les dejo mi repositorio:

https://github.com/danyel117/platzi-conf-store