Codificación

Crear aplicación React con Typecript | Agregar mecanografiado al proyecto React existente

Tabla de contenido ocultar 1 Creación de una aplicación React con TypeScript 2 Introducción para crear una aplicación React con TypeScript 2.1 El...

Escrito por Ashok Kumar · Lectura de 6 min >
TypeScript y Create-React-App

A día de hoy, React es viral y una de las mejores bibliotecas front-end; se ha convertido en la biblioteca principal para muchos desarrolladores mientras desarrollan aplicaciones front-end.

Estás a punto de amar aún más la aplicación create-react-app

Construyendo una aplicación React con TypeScript

Typecript, por otro lado, es un lenguaje de programación de tipo estático que hace que nuestro código JavaScript sea más predecible. Una de las razones clave por las que se inventó Typecript fue para ayudar a los desarrolladores no solo a crear cosas, sino también a diseñar productos donde siempre podamos predecir su comportamiento.

Introducción para crear una aplicación de reacción con mecanografiado.

Nuestras aplicaciones React serán más predecibles si usamos Typecript para construirlas, ya que podremos detectar muchos errores en tiempo de ejecución (durante la compilación).

Te llevaré en este viaje conmigo hoy. Haré todo lo posible para que los conceptos sean sencillos para usted. No es necesario que codifiques conmigo. Pero si lo consigues, ¡será fantástico!

En este tutorial, lo guiaré a través de los pasos para crear una aplicación de reacción simple y agregar texto mecanografiado al proyecto de reacción existente.

Esta publicación no pretende ser una guía para principiantes sobre React o Typecript; más bien, nos mostrará cómo usar Typecript en aplicaciones React.

El compilador de TypeScript

Comenzando con el archivo App.tsx, echemos un vistazo más profundo a los componentes y las pruebas. La extensión del archivo es probablemente lo primero que notó. Todos los archivos componentes ahora son tsx en lugar de jsx, y setupTests.js pasó a llamarse setupTests.ts. ¿Pero por qué es eso?

Los navegadores y Node actualmente no aceptan TypeScript directamente; solo comprenden JavaScript, por lo que tendremos que transformar nuestros scripts de TypeScript a JavaScript. Esta es una tarea de la que está a cargo el compilador de TypeScript.

Se utilizan diferentes extensiones de archivo, como las mencionadas anteriormente, porque el compilador tiene que saber qué archivos compilar y qué archivos son JavaScript puro.

Agregar mecanografiado

Nota: esta función está disponible con react-scripts@2.1.0 y más alto.

  1. Instalación: para iniciar un nuevo proyecto de aplicación Create React con Mecanografiado, puede ejecutar el siguiente comando.
npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript

Si ya lo has instalado previamente create-react-app globalmente a través de npm install -g create-react-app, le recomendamos desinstalar el paquete usando npm uninstall -g create-react-app or yarn global remove create-react-app para asegurar eso npx siempre utiliza la última versión.

Instalaciones globales de create-react-app ya no son compatibles.

2. Agregar texto mecanografiado al proyecto React existente

Conversión TypeScript de una aplicación existente. Navegue hasta el directorio de su aplicación en la consola, donde querrá instalar TypeScript:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

# or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Cambie el nombre de cualquier archivo para que sea un archivo TypeScript (p. ej. src/index.js a src/index.tsx) y no olvides reiniciar el servidor!

npm install --save typescript @types/node @types/react @types/react-
dom @types/jest

Después de eso, cambie el nombre de los archivos que desee que sean archivos TypeScript a endin.tsx. En lugar de App.js, puedes usar App.tsx.
Aquí es donde podrías tener problemas. Verás que prácticamente todo lo que hay en tu archivo App.tsx está marcado en rojo. Esto no es ideal.

Si aún no lo ha hecho, importe React desde la sección "act" al principio del archivo.

Cuando pasa el cursor sobre cualquier elemento subrayado en VSCode, aparece el mensaje "No se puede utilizar JSX a menos que se proporcione el indicador '—jsx'". Puede elegir la opción "Corrección rápida" o solucionarlo manualmente en este punto. Cuando seleccione "Solución rápida", se le dará la opción de "Habilitar el indicador '—jsx' en su archivo de configuración". Tardará uno o dos segundos en cargarse y luego los errores deberían desaparecer.

crear una aplicación nativa de reacción mecanografiada

Crear texto mecanografiado de la aplicación React Native (última versión)

No es necesario que cree un archivo tsconfig.json; Se creará uno para ti. Puede realizar cambios en la configuración de TypeScript que se ha generado.

Manual de TypeScript

Guía completa para crear una aplicación mecanografiada Create React Native desde cero

Hay dos ventajas de trabajar dentro de cualquier marco. Mejora tus habilidades como desarrollador y tu comprensión del trabajo que realizas.
También le permite apreciar las cosas que estos marcos realizan detrás de escena que a menudo pasamos por alto.
Quería profundizar en React para ver cómo funciona una aplicación detrás de escena reproduciéndola localmente.

Typecript es un lenguaje de programación estricto y de tipo estático que mejora la previsibilidad de nuestro código JavaScript. Una de las razones clave por las que se inventó Typecript fue para ayudar a los desarrolladores no solo a crear cosas, sino también a diseñar productos donde siempre podamos predecir su comportamiento.

Puede utilizar plantillas para iniciar una nueva aplicación TypeScript. Agregue —template mecanografiado al comando de creación para utilizar nuestra plantilla TypeScript.

npx create-react-app my-app --template typescript

Se compila maravillosamente sin configuraciones especiales para habilitar ni paquetes para descargar. Todos los archivos que habrían sido .js los archivos están ahora .ts or .tsx.

agregar texto mecanografiado al proyecto de reacción existente

No se preocupe si ya comenzó a trabajar en un proyecto y desea cambiar a TypeScript. También hay una solución para ello.

Yarn crea una aplicación de reacción mecanografiada

Si ya lo has instalado previamente create-react-app globalmente a través de npm install -g create-react-app, le recomendamos desinstalar el paquete usando npm uninstall -g create-react-app or yarn global remove create-react-app para asegurar eso npx siempre utiliza la última versión.

1. yarn create react app typescript
npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript


2. how to install react with typescript
npx create-react-app my-app --template typescript

# or
yarn create react-app my-app --template typescript



3. npx react typescript
npx create-react-app my-app --template typescript



4. create-react-app typescript
npx create-react-app my-app --template typescript
# or #
yarn create react-app my-app --template typescriptCopy



5. create react app ts
To create typescript version
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript

Inicializar el proyecto con hilo

Luego ejecute el siguiente comando para crear un proyecto npm (se recomienda hilo).

yarn init
or
npm init

Así es como se ve la producción de hilo

Cómo declarar tipos en aplicaciones React

Creemos un tipo para nuestro Todo objeto, dentro del App.tsx El archivo coloca este objeto después de la importación.

type ITodo = { 
  // Our todo should have the title and completed fields and the id field to 
  id: number;
  title: string;
  completed: boolean;
}

type ITodos = {
  todos: ITodo[], // Our Todos is an array of Todo
}

Tipos de eventos en reaccionar

El desafío ahora es: ¿cómo podemos saber qué tipo se pasó al evento?

Bueno, React tiene muchos eventos y no podemos saber qué tipo tiene cada uno de ellos, por lo que normalmente coloco el objeto de evento en el controlador donde se usa, coloco el cursor sobre él y copio el tipo.

<button onClick={e => {console.log(e) }}>Add</button>
(parameter) e: React.MouseEvent<HTMLButtonElement, MouseEvent>

Declarar tipos de accesorios usando 'React.FC'

const TodosComponent: React.FC<{
  todos: ITodos, 
  toggleTodos: (id: number) => void,
  deleteTodos: (id: number) => void
}> = ({todos, toggleTodos, deleteTodos}) => {
  const deleteTodo = (id: number) => {
    if (window.confirm(`Are you sure you want to delete todo?`)) {
      deleteTodos(id);
    }
  }
  return (
    <div className="section__todos">
    <h2>Todos</h2>
    {todos.todos.length ? <ul className="todos">
      {todos.todos.map(todo => (
        <li key={todo.id}>
          <span style={{textDecoration: todo.completed? 'line-through': 'none'}}>{todo.title}</span>
          <input 
            type="checkbox" 
            checked={todo.completed} 
            onChange={() => toggleTodos(todo.id)} />
          <button onClick={() => {deleteTodo(todo.id)}}>X</button>
        </li>
      ))}
    </ul>: <div>No Todo has been created</div>}
  </div>
  );
};

Escribir variables en TypeScript

Echemos un vistazo al siguiente ejemplo:

let helloWorld = "Hello World";

Debido a que el valor de la variable helloWorld es una cadena, ahora es de tipo cadena y puedes manipularlo como lo harías normalmente con una cadena. Sin embargo, si el tipo de variable cambia en el futuro, el tipo de variable también cambiará.

Así es como funciona TypeScript: asigna el tipo de variable en función de su valor en el momento de la declaración, por lo que la misma línea de código funcionará en ambos idiomas. La distinción se basa en lo que sucede cuando desea asignar un nuevo valor a una variable de un tipo diferente.

Ya vimos cómo hacerlo con JavaScript, pero ¿y si intentáramos lo mismo con TypeScript?

Documentación

Estos son algunos de los mejores lugares para encontrar información actualizada sobre React y TypeScript:

Crear aplicación de reacción mecanografiada eslint en 2022

Requisitos previos para crear una aplicación de reacción mecanografiada eslint

Nota: Necesita tener instalada la versión de Nodo >= 10. Entonces, si no lo tiene, vaya al sitio web de NodeJS, descárguelo e instálelo en su máquina local. (https://nodejs.org/en/)

Paso 1: crea un proyecto de React con Typecript

npx create-react-app my-app --template typescript

Paso 2: eliminar la configuración ESLint preestablecida

“eslintConfig”: {
“se extiende”:[
“aplicación de reacción”,
“reaccionar-aplicación/broma”
]
}

Paso 3: instale el paquete ESLint

npm install eslint --save-dev

Lea los próximos pasos aquí

Escrito por Ashok Kumar
Director ejecutivo, fundador y director de marketing de Make An App Like. Soy escritor en OutlookIndia.com, KhaleejTimes, DeccanHerald. Contáctame para publicar tu contenido. Mi Perfil
código_fuente_ejemplo-eliminar-vista previa

¿Para qué se utiliza MongoDB?

Ashok Kumar in Codificación
  ·   Lectura de 3 min

Deje un comentario

Translate »