Cómo aprender a escribir Reactjs con Typecript
1. Instale el nodo, porque el compilador ts está escrito por js/ts.
Después de instalar el nodo, también obtendrá el comando npm, que es el administrador de paquetes en nodejs; world (también puede considerarse como la tienda de aplicaciones de node);
2. Instalar vs 2015 o vs code. Por supuesto, esto no es necesario, pero aquí se recomiendan encarecidamente las herramientas para escribir ts, vs. es el primero, vsc es el segundo;
p>3.vs viene con TypeScript (vs2012, vs2015update1 viene con ts1.7), la última versión de Typescript para vs se puede descargar desde el sitio web oficial, o si no depende de vs (como el entorno mac), puede usar el comando Instalar el compilador ts
npm i -g typescript@next
4. Habrá dos comandos disponibles: tsc y tsd. tsc se usa para compilar código TypeScript, tsd se usa para descargar el archivo de definición ts (o archivo de encabezado) de la biblioteca de clases js de terceros. El uso competente de tsd mejora la eficiencia del trabajo. reduce el tiempo de verificación de documentos en un 80%, por lo que se puede decir que escribir ts es jser que pasó por Ren Duer. Es fácil comenzar rápidamente con cualquier nuevo entorno de desarrollo;
5. desde la línea de comando,
tsd install react-global --save
Tenga en cuenta que la razón por la que escribimos reaccionar-global en lugar de reaccionar arriba es porque usaremos un formato más primitivo. método de escritura y use React directamente como un objeto global en lugar de como un módulo es6 (debe introducirse con la importación), y no es necesario compilar Babel. No es necesario empaquetar el paquete web;
Se ejecutó el comando tsd. Lo anterior descarga el archivo de encabezado de la biblioteca de clases ReactJS. A continuación, use el comando tsc para crear un archivo de configuración del proyecto ts
tsc --init
El comando crea la configuración tsconfig.json. archivo, abra el archivo
Agregue "jsx": "react", que automáticamente convierte tsx en el js final en lugar de jsx
Elimine la línea "outDir": "built", para que el archivo compilado se genere en el directorio actual
"target": "es5", aquí es3 se cambia a es5,
"watch": true si se debe monitorear el archivo modificaciones. Si está utilizando vs, esta línea no es importante
6. Descargue el archivo reactjs. Si el comando bower no está instalado, puede descargar manualmente la biblioteca de clases de reacción desde el sitio web oficial. >
bower install --save reaccionar
7. Después de configurar el entorno anterior, comience a escribir código:
Cree un archivo demo.tsx (tenga en cuenta que este es tsx, no ts o jsx)
Crea un demo.html y agrega una referencia al archivo
lt;!doctype htmlgt;
8. Código
clase MyClass extiende React.Component {
render() {
return hola {this.props.name}; }
}
document.addEventListener('DOMContentLoaded', función () {
ReactDOM.render(, document.body);
});
9. Si después de guardar demo.tsx, no se encuentra ningún demo.js compilado automáticamente, entonces puede ser que vs no esté configurado correctamente. Si no has instalado vs o vsc, no importa ejecútalo desde la línea de comando en la carpeta actual
tsc
. El comando tsc se configurará automáticamente de acuerdo con tsconfig.json. Cuando se trata de cómo aprender, en realidad no es diferente de JS. El código de demo.tsx anterior es exactamente el mismo que el método de escritura de es6 en reaccionar. sitio web oficial, excepto por las dos restricciones de tipo prop y state, y eso es todo 11. En cuanto a cómo aprender, de hecho, es completamente igual que JS. El código de demo.tsx anterior está escrito exactamente igual que es6. en el sitio web oficial de reacción, agregue estas dos restricciones de tipo prop y estados, y eso es todo
12. Después de salir del trabajo, escribiré más cuando tenga tiempo;
————División de tiempo————
13 Continúe escribiendo, pula 1-12 y cambie al modo misionero;
En el código anterior, la fábrica. El método realiza algunas acciones de inicialización mientras crea la subclase, lo cual es diferente de la herencia de prototipo simple, por lo que cuando se usa el método de clase para la herencia de subclases, esta forma de escritura no es válida;
class MyView extends React.Component {
render() {
return hello {this.state.name}; //Se lanzará una excepción porque el estado es nulo
}
//No funciona
getInitialState: (){