Cómo aprender a escribir Reactjs con Typecript
1. Instale el nodo, porque el compilador ts está escrito en js/ts
Después de instalar el nodo, puede obtener npm; comando al mismo tiempo es el administrador de paquetes en el mundo nodejs (también se puede considerar como la tienda de aplicaciones de node
2. Instale vs 2015 o vs code. Por supuesto, esto no es necesario, pero. se recomienda encarecidamente escribir herramientas ts, vs primero, vsc en segundo lugar;
3 vs viene con TypeScript (vs2012, vs2015update1 viene con ts1.7), se puede descargar la última versión de TypeScript para vs. desde el sitio web oficial, o si no depende de vs (como el entorno mac), puede instalar el compilador ts a través de la línea de comando
npm i -g type script@next
.4. Después de instalar ts, habrá dos comandos disponibles: tsc y tsd. tsc se usa para compilar código TypeScript y tsd se usa para descargar el archivo de definición de ts (o archivo de encabezado) de la clase js de terceros. El uso competente de tsd mejora la eficiencia del trabajo porque reduce el tiempo de búsqueda de documentos en un 80%, por lo que escribir ts puede decir jser. Después de pasar por los dos canales de Ren y Du, es muy rápido adaptarse a cualquier nuevo entorno de desarrollo.
Algunos internautas señalaron que la herramienta tsd no se instala junto con ts y debe instalarse por separado
npm install tsd -g
5. Descargue el archivo de encabezado ts reaccionar en la línea de comando
instalación de tsd respuesta-global-save
Tenga en cuenta la razón por la que escribimos reaccionar-global en lugar de React porque usamos la escritura original método, que utiliza directamente React como un objeto global en lugar de un módulo es6 (debe importarse. No hay compilación de Babel ni empaquetado del paquete web;
El comando tsd ejecutado anteriormente descarga el archivo de encabezado del archivo). Biblioteca de clases ReactJS y el comando tsc a continuación se usa para crear un archivo de configuración del proyecto ts
El comando tsc -initialization
lo crea.
Agregar "jsx": "react" convertirá automáticamente tsx en el js final, no jsx.
Elimine la línea "outDir. ": "build", para que el archivo. los archivos compilados se enviarán al directorio actual.
"Target": "es5", donde es3 se cambia a es5,
"watch": verdadero para monitorear las modificaciones del archivo. usas vs, esta línea no importa.
6. Descarga el archivo reactjs. Si no tienes el comando bower instalado, puedes descargar la biblioteca de clases de reacción manualmente desde el sitio web oficial. >
Respuesta de instalación-guardar
7. Después de configurar el entorno anterior, comience a escribir código:
Cree un archivo demo.tsx (tenga en cuenta que es tsx, no ts o jsx).
Cree un demo.html y agregue una referencia al archivo.
¡Es! doctype html gt
lthtml gt
lthead gt
ltscript src = " bower _ componentes/react/react . min . js " gt; ;
ltscript src = " bower_components/react/react-DOM . min . js " gt; lt/script gt;
ltscript src = " demo.js " gt lt /script gt;
lt/head gt;
ltbody gt
lt/body gt;
lt/html gt;
Escribir código en 8.demo.tsx
Clase MyClass extiende React. componenteltany,anygt{
render() {
return lth 1 gt; hola { this .props nombre } /h 1 gt;
}
document . addevent listener(' DOMContentLoaded ', function () {
react DOM . render( lt; mi nombre de clase = "Tom"/ gt;, document. body);
});
9. Si demo.js no se compila automáticamente en el directorio después de guardar demo.tsx, entonces vs puede tener una configuración deficiente. No importa si no instalas vs o vsc. Ejecútelo desde la línea de comando en la carpeta actual.
ThermalStressCrackingThermal Stress Cracking
El comando Tsc compilará automáticamente el código en js según tsconfig.json, que es la configuración en el archivo js compilado.
10. Abra demo.html para ver el efecto.
11 En cuanto a cómo aprender, en realidad es exactamente lo mismo que JS. El código demo.tsx anterior es exactamente el mismo que el método de escritura es6 de
12. después de salir del trabajo;
-división del tiempo.
13, continúa escribiendo, pule 1-12, cambia al modo misionero;
Monster, falta el texto de 14-15. El editor Zhihu tiene muchos errores.
No recuerdo lo que escribí, pero probablemente hablé sobre la diferencia entre usar métodos de fábrica para crear subclases y usar clases para heredar directamente.
React.createClass y columna vertebral. View.extend son todas subclases creadas por métodos de fábrica.
El texto está roto. . . .
En el código anterior, el método de fábrica realiza algunas acciones de inicialización mientras crea la subclase, lo cual es diferente de la simple herencia de prototipo, por lo que usar la clase para heredar la subclase no es válido.
La clase MyView extiende React. componente {
render() {
return lth 1 gt; hola { this state nombre } /h 1 gt; es nulo.
}
//No funciona
getInitialState: (){
return {Nombre: '', Edad: 20} ;
}
}
Es necesario cambiarlo al siguiente método. La siguiente es la solución proporcionada por el sitio web oficial (TypeScript y ES6 son los. aquí igual).
La clase MyView extiende React. Componente {
Constructor(propiedad, contexto){
Super(props, contexto);
this.state = {
Nombre : '',
};
}
render() {
devuelve lth 1 gt; este estado. name } lt;/h 1 gt;;
}
}
16. Cuando la componenteización encuentra tipificación fuerte:
En el En el pasado, los componentes JS generalmente tenían poca reutilización y aún tenían que escribirse después de escribirlos básicamente. Las razones son las siguientes:
1) Demasiadas estructuras Dom y otros detalles de implementación están expuestos;
2) Nombrar frustración, falta de memoria, nombrar variables y métodos en la propia programación es un sumidero para los programadores;
3) JS naturalmente carece de las limitaciones de los miembros públicos y privados, por lo que no No sé cómo usarlo Bibliotecas de clases/componentes sin anotaciones;
React resuelve el problema de exponer etiquetas DOM, y TS resuelve el problema a nivel de lenguaje y proporciona poderosas capacidades de reconstrucción. No es necesario recordar la API del componente en absoluto porque se enumerarán las herramientas.
17. TS fuertemente tipado tiene indicaciones de código IDE, pero es inútil cuando se enfrenta a varios conjuntos de plantillas de cadenas mvvm. La siguiente es la diferencia en la experiencia de desarrollo entre el enlace de datos mvvm típico y el ensamblaje de datos JSX compatible con IDE:
En el enlace de cadenas de plantilla, la herramienta no puede detectar el problema y solo puede generarlo en tiempo de ejecución. Se produce una excepción y jsx puede provocar errores de ortografía.
18, arroja otro concepto sobre productividad: programación sin barreras.
En nuestro trabajo de desarrollo habitual, dedicamos mucho tiempo a buscar documentos API, depurar código y buscar. para un diccionario (variable con nombre), necesita cambiar constantemente las ventanas de tareas...
El ejemplo anterior es relativamente pequeño. En el desarrollo real, varios objetos JSON pueden tener 10 atributos y la estructura está anidada capa por capa. El desarrollo simplemente no se puede completar sin verificar la documentación y obtener el paquete al mismo tiempo.
Si el proyecto se desarrolla en paralelo y aún no se ha definido el documento (pero se ha desarrollado el prototipo del producto e incluso se ha cortado la página html), cómo completar rápidamente el desarrollo del parte delantera?
Un método común en la industria es utilizar datos simulados (primero falsificar los datos). Aquí hay un método más simple (como crear primero un escenario de demanda virtual: ensamblar un tablero de mensajes html).
No olvides que las variables JS pueden estar en chino. Bueno, no lo busques en el diccionario. Primero termine la solicitud. TS JSX juega una gran ventaja en el proceso de ensamblaje de HTML. El código para la interfaz ensambladora se escribe tres veces, cinco veces y dos veces. Sin depurar puedo confirmar que no hay errores.
Después de unos días, la estructura de datos de WebAPI se ha definido y puede comenzar a refactorizar el código (o centrarse en la búsqueda en el diccionario) y utilizar la función de refactorización de la herramienta de desarrollo para cambiar el nombre de las variables. :
p>Finalmente, cuando se complete el proyecto, todas las definiciones de tipo se moverán a archivos de descripción independientes (como webapi.d.ts) y la interfaz original se podrá cambiar para escribir la palabra clave (tipo alias):
Lo más importante es que en este proceso de desarrollo, básicamente no hay búsqueda de documentos ni búsqueda de diccionario, y la eficiencia se ha mejorado significativamente.