1

React&TypeScript Setup [ES]

Aqui dejo el link original que esta en ingles --> link
[ES]

  • Escribo aquí sobre las bibliotecas que usé y cómo inicializo un proyecto. El marco que uso ahora es React with TypeScript para una aplicación mejor y limpia. *

BIBLIOGRAFÍA:

GIT INIT

  • Necesario para inicializar el repositorio. Por supuesto que antes has tenido que hacer la carpeta donde se alojará el proyecto. *

NPM init | INICIO DE HILO

  • Esto nos da los paquetes para comenzar nuestros proyectos y dónde se alojarán los próximos paquetes. Viene con dos archivos “package.json” y “lock.json”, que son datos informativos sobre los paquetes instalados. *

REACCIONAR Y TIPO

MECANOGRAFIADO

En primer lugar, necesitamos instalar TypeScript en nuestro proyecto, este paquete contiene la API de la biblioteca de idiomas:

`` jsx
hilo añadir mecanografiado -D
o
npm i mecanografiado --save-dev
’’

** CONFIGURACIÓN TYPESCRIPT **

Necesita un archivo de configuración para guiar el tipo de TypeScript. Acerca del archivo de configuración y su significado aquí.

En la raíz de su proyecto, cree el siguiente archivo: ** tsconfig.json **

‘’
{
“compilerOptions”: {
“sourceMap”: verdadero,
“noImplicitAny”: falso,
“módulo”: “commonjs”,
“target”: “es5”,
“lib”: [
“esnext”,
“dom”,
“dom.iterable”
],
“removeComments”: verdadero,
“allowSyntheticDefaultImports”: verdadero,
“jsx”: “reaccionar”,
“allowJs”: verdadero,
“baseUrl”: “./”,
“esModuleInterop”: verdadero,
“resolveJsonModule”: verdadero,
“moduleResolution”: “nodo”,
“downlevelIteration”: verdadero,
“caminos”: {
“componentes / *”: [
“src / components / *”
]
}
},
“incluir”: [
"./src",
"./webpack.config.ts"
]
}
’’

** REACT Y SUS PAQUETES TYPESCRIPT **

Ahora instalemos la biblioteca de reacción, su API y el paquete DOM para que podamos renderizar en dom. Pero reaccionar comprende Javascript, por lo que también necesitamos paquetes adicionales para que comprenda TypeScript:

`` jsx
hilo añadir reaccionar reaccionar-dom
hilo agregar @ tipos / react @ tipos / react-dom -D
o
npm reacciono react-dom --save
npm i @ tipos / react @ tipos / react-dom --save-dev
’’

** CARPETAS BÁSICAS **

Finalmente, cree una estructura básica para su aplicación. Este paquete incluye un ** index.html ** dentro de una carpeta ./public desde la raíz; un ** index.tsx ** y ** App.tsx ** en la carpeta ./src desde la raíz; y un componente como ** HelloWorld.tsx ** en ./src/components desde la raíz. Entonces, puede que index.js renderice App.tsx que renderizará el componente HelloWolrd. Pero necesitamos un paquete, así que aquí viene Webpack.

WEBPACK

  • Aquí escribiré sobre lo que hace cada paquete: *
  • ** webpack: ** Contiene la lógica del paquete pero en Javascript.
  • ** webpack-cli: ** Te permite crear un archivo de configuración para trabajar con webpack.
  • ** webpack-dev-server: ** usa webpack con un servidor de desarrollador en la recarga en vivo.
  • ** ts-node: ** le permite ejecutar TypeScript en nodejs sin compilador
  • ** @ tipos / nodo: ** contiene definiciones de tipo para nodejs
  • ** @ types / webpack: ** contiene definiciones de tipos para webpack
  • ** @ types / webpack-dev-server: ** contiene la definición de tipo para webpack-dev-server
  • ** tsconfig-path-webpack-plugin: ** para estructuras de árbol complejas, esto transcribirá las rutas que asignó en ** tsconfig ** al paquete web. Aquí un [enlace] (https://medium.com/@danil_chepelev/how-to-setup-path-aliases-with-react-typescript-and-webpack-54e579c189e1) a lo que estoy hablando.

`` jsx
hilo agregar paquete web paquete web-cli paquete web-dev-servidor ts-nodo @ tipos / nodo
@ tipos / paquete web @ tipos / paquete web-dev-servidor tsconfig-rutas-paquete-web-plugin -D
o
npm i paquete web paquete web-cli paquete web-dev-servidor ts-nodo @ tipos / nodo
@ tipos / paquete web @ tipos / paquete web-dev-servidor tsconfig-rutas-paquete-web-plugin --save-dev.
’’

  • Si queremos utilizar mecanografiado en Webpack, el siguiente paquete funcionará: *
  • Ahora también necesitamos hacer que webpack entienda html y cómo inyectarlo en el dom, para eso: *
  • ** html-webpack-plugin: ** creará archivos HTML para sus paquetes
  • ** htm-loader: ** * Opcional, compila el archivo html en una cadena. Usamos JSX pero html porque html-webpack-plugin. *

`` jsx
hilo agregar ts-loader fork-ts-checker-webpack-plugin html-webpack-plugin -D
o
npm i ts-loader fork-ts-checker-webpack-plugin html-webpack-plugin --save-dev
’’
** WEBPACK.CONFIG.JS **

Ahora gracias a ** webpack-cli ** cuentas con una interfaz para establecer la configuración que desees. La plantilla que obtuve es esta: * Complemento definido por Webpack, podemos configurar y acceder a las variables de entorno dentro de nuestra aplicación (es decir, verificar si estamos en modo de desarrollo o producción, imprimir la etiqueta de la versión) *

`` jsx
importar ruta de “ruta”;
importar paquete web, {Configuración} de “paquete web”;
importar HtmlWebpackPlugin desde “html-webpack-plugin”;
importar ForkTsCheckerWebpackPlugin desde “fork-ts-checker-webpack-plugin”;
importar {TsconfigPathsPlugin} desde “tsconfig-path-webpack-plugin”;

const webpackConfig = (env): Configuración => ({
entrada: “./src/index.tsx”,
resolver: {
extensiones: [".ts", “.tsx”, “.js”],
complementos: [nuevo TsconfigPathsPlugin ()]
},
salida: {
ruta: ruta.join (__ dirname, “/ dist”),
nombre de archivo: “build.js”
},
módulo: {
reglas: [
{
prueba: /.tsx?$/,
cargador: “ts-loader”,
opciones: {
transpileOnly: verdadero
},
excluir: / dist /
}
]
},
complementos: [
new HtmlWebpackPlugin ({
plantilla: “./public/index.html”
}),
nuevo webpack.DefinePlugin ({
“process.env.PRODUCTION”: env.production || ! env. desarrollo,
process.env.NAME”: JSON.stringify (require ("./ package.json"). name),
“process.env.VERSION”: JSON.stringify (require ("./ package.json"). versión)
}),
new ForkTsCheckerWebpackPlugin ({
eslint: {
files: “./src/**/*.{ts,tsx,js,jsx}” // requerido - igual que el comando eslint ./src/**/*.{ts,tsx,js,jsx} - -ext .ts, .tsx, .js, .jsx
}
})
]
});

exportar webpackConfig predeterminado;
’’

** PAQUETE.JASON **

`` jsx
"guiones": {
“dev”: “webpack-dev-server --mode development --env.development --open --hot --progress”,
“build”: “webpack --mode production --env.production --progress”,
“lint”: “eslint ‘./src//*.{ts,tsx}’",
“lint: fix”: "eslint './src/
/*.{ts,tsx}’ --fix”
},
’’

BABEL

  • Normalmente usamos babel para compilar js en js para cualquier navegador. Pero esto no hace que la verificación de tipos sea la razón por la que usamos TypeScript. En su lugar, podemos combinar tanto la verificación de tipos como la compilación para obtener un resultado adecuado. Para eso, se deben instalar los siguientes paquetes y agregar el tscconfig: *
  • ** @ babel / core **: Permítanos crear un archivo para administrar la compilación con babel
  • ** babel-loder: ** Compilará JS en JS que los navegadores puedan entender.
  • ** @ babel / preset-react: ** presest para todos los complementos de react
  • @ ** babel / preset-typescript: ** preset para mecanografiado
  • ** @ babel / preset-env: ** preestablecido para cada entorno.
  • @ ** babel / complemento-propuesta-clase-propiedades: ** Este complemento transforma las propiedades de clase estática, así como las propiedades declaradas con la sintaxis del inicializador de propiedades
  • @ ** babel / plugin-proposition-object-rest-spread: ** Compila el objeto rest y difunde a ES5

`` jsx
hilo add @ babel / core babel-loader @ babel / preset-react @ babel / preset-typescript
@ babel / preset-env @ babel / plugin-propuesta-clase-propiedades
@ babel / plugin-propuesta-objeto-resto-propagación --save-dev
’’

**. BABELRC.JSON **

`` jsx
{
“Preajustes”: [
"@ babel / preset-env",
"@ babel / preset-typescript",
"@ babel / preset-react"
],
“complementos”: [
"@ babel / propuesta-clase-propiedades",
"@ babel / propuesta-objeto-descanso-propagación"
]
}
’’

** TSCONFIG.JSON **

`` jsx
"compilerOptions": {
// Asegúrese de que tsc cree los archivos .d.ts, pero no los archivos .js
"declaración": verdadero,
“emitDeclarationOnly”: verdadero,
// Asegúrese de que Babel pueda transpilar archivos de forma segura en el proyecto TypeScript
"isolatedModules": verdadero
}
’’

TSLINT

** Instalar dependencias **

‘‘
hilo añadir más bonito -D
o
npm yo más bonito --save-dev
’’

Configurar .prettierrc

‘’
{
“printWidth”: 100,
“trailingComma”: “ninguno”,
“tabWidth”: 4,
“semi”: cierto,
“singleQuote”: falso,
“bracketSpacing”: falso,
“jsxBracketSameLine”: falso,
“arrowParens”: “siempre”,
“endOfLine”: “auto”,
“jsxSingleQuote”: falso,
“proseWrap”: “preservar”,
“quoteProps”: “según sea necesario”,
“useTabs”: falso,
“htmlWhitespaceSensitivity”: “css”
}
’’

Además, recomiendo configurar Prettier para que ** se ejecute en cada guardado **. Ver: https://prettier.io/docs/en/editors.html

MÁS BONITO

Instalar dependencias

‘‘
yarn agregar eslint eslint-plugin-react eslint-plugin-react-hooks @ typescript-eslint / eslint-plugin @ typescript-eslint / parser eslint-plugin-más bonito eslint-config-más bonito eslint-plugin-import -D
o
npm i eslint eslint-plugin-react eslint-plugin-react-hooks @ typescript-eslint / eslint-plugin @ typescript-eslint / parser eslint-plugin-prettier eslint-config-prettier eslint-plugin-import --save-dev
’’

Crea un archivo .eslintrc.json en el directorio raíz de tu proyecto

‘’
{
“parser”: “@ typecript-eslint / parser”,
“complementos”: [
"@ mecanografiado-eslint",
“reaccionar”,
“react-hooks”,
“eslint-plugin-import”,
“más bonita”
],
“env”: {
“navegador”: verdadero
},
“extiende”: [
“complemento: @ typescript-eslint / recommended”,
“complemento: reaccionar / recomendado”,
“complemento: más bonito / recomendado”
],
“parserOptions”: {
“proyecto”: [
“tsconfig.json”
],
“ecmaVersion”: 2020,
“sourceType”: “módulo”,
“ecmaFeatures”: {
“jsx”: verdadero
}
},
“reglas”: {
"@ typecript-eslint / explicit-function-return-type": “desactivado”,
"@ typecript-eslint / no-unused-vars": “desactivado”,
“react / jsx-filename-extension”: [
“advertir”,
{
“extensiones”: [
".jsx",
".tsx"
]
}
],
“react / prop-types”: “desactivado”,
“react-hooks / rules-of-hooks”: “error”,
“react-hooks / exhaustive-deps”: “advertir”
},
“configuración”: {
“reaccionar”: {
“versión”: “detectar”
}
}
}
’’

<h1>Cree el archivo .eslintignore y agregue el archivo de configuración del paquete web</h1>

‘‘
webpack.config.ts
’’

Escribe tu comentario
+ 2
0
29632Puntos

Hola tendrás el repositorios del ejemplo que estas mostrando?