Cursos Empresas Blog Live Conf Precios

Definir requerimientos

Clase 3 de 15 • Curso de Creación de Librerías UI para React

Clase anteriorSiguiente clase

Juan Camilo Lentino Villalba

student•

npm install @emotion/css

"devDependencies": {
    "@babel/cli": "^7.17.6",
    "@babel/core": "^7.17.7",
    "@babel/eslint-parser": "^7.17.0",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@testing-library/dom": "^8.11.3",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "babel-loader": "^8.2.3",
    "babel-preset-minify": "^0.5.1",
    "eslint": "^8.11.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.29.4",
    "jest": "^27.5.1",
    "prettier": "^2.5.1",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }

.gitignore:

node_modules

.eslintrc.js:

module.exports = {
    env: {
        browser: true,
        es2021: true,
        jest: true,
    },
    extends: ['eslint:recommended', 'plugin:react/recommended', 'airbnb', 'airbnb/hooks', 'prettier'],
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 13,
        sourceType: 'module',
    },
    plugins: ['react', 'prettier'],
    rules: {
        'import/prefer-default-export': 'off',
        'import/no-unresolved': 'off',
        'arrow-body-style': 'off',
        'react/jsx-fragments': ['error', 'element'],
        'import/no-extraneous-dependencies': 'off',
        'react/function-component-definition': [
            'error',
            {
                namedComponents: 'arrow-function',
            },
        ],
    },
    overrides: [
        {
            files: ['./src/components/**/index.js'],
            rules: {
                'no-restricted-exports': 'off',
            },
        },
    ],
  };

.prettierrc:

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

babel.config.js:

module.exports = {
    presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }], 'minify'],
    plugins: ['@babel/plugin-transform-runtime']
  };

config/test.config.js:

module.exports = {
    presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }], 'minify'],
    plugins: ['@babel/plugin-transform-runtime']
  };

config/jest.config.js:

module.exports = {
    rootDir: '../',
    testPathIgnorePatterns: ['<rootDir>/node_modules/'],
    setupFilesAfterEnv: ['<rootDir>/config/tests.config.js'],
    testEnvironment: 'jsdom',
    modulePathIgnorePatterns: ['dist']
  };

Rodrigo Andrés Moreno Pertúz

student•

Linea 36 jest ha salido del chat

Ricardo Andrés Nakanishi

student•

F

Pablo Tedesco

student•

Las dependencias de desarrollo debiesen ser aquellas que los componentes necesitan para compilar? Ejemplo; styled-components, mui, etc? Cual es la diferencia a la hora de implementar?

Daniel Rodrigo Valdivieso Merino

teacher•

Las dependencias de Desarrollo serán aquellas que necesitamos en el proyecto solo en durante el Desarrollo de nuestro proyecto, por ejemplo, ESLint.

Las otras dependencias son las que la compilación necesita para entender el código que proporcionamos, por ejemplo React en una app final.

Pero en este caso, no necesitamos a React como dependencia de producción, ¿Por qué?

Porque nuestro proyecto en principio es una librería, cuando sea implementada nuestra librería, el proyecto que la utilice SI tendrá a React como dependencia de producción.

Revisa la prueba de fuego, allí usamos a React como dependencia en producción y no como DevDependencie

Espero haber solucionado tu duda, sin embargo quedo atento 💚

#NeverStopLearning 🔥🚀

Gilbert Ardila

student•

y si usara vite ¿debería configurar algo?

Daniel Rodrigo Valdivieso Merino

teacher•

Creeria yo que independientemente de la herramienta siempre hay una pequeña configuración por ahí. La documentación siempre es nuestra mejor aliada... :)

Por otra parte nunca he utilizado Vite 😅

Gilbert Ardila

student•

uff Vite es genial, incluso en el nuevo curso de introducción a empaquetadores web Oscar Barajas muestra lo facil que es usarlo, no hay que configurar nada, ¿quieres usar Ts? instalalo y listo, ¿quieres usar Tailwindcss? instalalo y usalo