React
Używanie ReactJS z maszynowym skryptem

Składnik ReactJS napisany maszynowym skryptem

W rzeczywistości możesz używać komponentów ReactJS w maszynowym Typescript, tak jak w przykładzie na Facebooku. Po prostu zamień rozszerzenie pliku „jsx” na „tsx”:

//helloMessage.tsx:
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);

Ale aby w pełni wykorzystać główną funkcję Typescript (statyczne sprawdzanie typu), należy wykonać kilka czynności:

1) przekonwertuj przykład React.createClass na klasę ES6:

//helloMessage.tsx:
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="John" />, mountNode);

2) następnie dodaj rekwizyty i interfejsy stanu:

interface IHelloMessageProps {
    name:string;
}

interface IHelloMessageState {
  //empty in our case
}

class HelloMessage extends React.Component<IHelloMessageProps, IHelloMessageState> {
  constructor(){
    super();
  }  
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

Teraz maszynopis wyświetli błąd, jeśli programista zapomni przekazać rekwizyty. Lub jeśli dodali rekwizyty, które nie są zdefiniowane w interfejsie.

Bezstanowe React Components w maszynopisie

Reaguj komponenty, które są czystymi funkcjami swoich rekwizytów i nie wymagają żadnego wewnętrznego stanu, można zapisać jako funkcje JavaScript zamiast używać standardowej składni klasy, jak:

import React from 'react'

const HelloWorld = (props) => (
    <h1>Hello, {props.name}!</h1>
);

To samo można osiągnąć w React.SFC przy użyciu klasy React.SFC :

import * as React from 'react';

class GreeterProps {
   name: string
}

const Greeter : React.SFC<GreeterProps> = props =>
    <h1>Hello, {props.name}!</h1>;

Zauważ, że nazwa React.SFC jest aliasem React.StatelessComponent więc można użyć obu.

Instalacja i konfiguracja

Aby użyć maszynopisu z reakcją w projekcie węzła, musisz najpierw zainicjować katalog projektu za pomocą npm. Aby zainicjować katalog za pomocą npm init

Instalacja za pomocą npm lub przędzy

Możesz zainstalować React przy użyciu npm , wykonując następujące czynności:

npm install --save react react-dom

Facebook wydał własnego menedżera pakietów o nazwie Yarn , którego można również użyć do zainstalowania React. Po zainstalowaniu Yarn wystarczy uruchomić polecenie:

yarn add react react-dom

Następnie możesz użyć React w swoim projekcie dokładnie w taki sam sposób, jakbyś zainstalował React przez npm.

Instalowanie definicji typu reaguj w Typescript 2.0+

Aby skompilować kod za pomocą maszynopisu, dodaj / zainstaluj pliki definicji typu przy użyciu npm lub przędzy.

npm install --save-dev @types/react @types/react-dom

lub za pomocą przędzy

yarn add --dev @types/react @types/react-dom

Instalowanie definicji typu reaguj w starszych wersjach Typescript

Musisz użyć osobnego pakietu o nazwie tsd

tsd install react react-dom --save

Dodawanie lub zmiana konfiguracji maszynopisu

Aby użyć JSX , języka mieszającego javascript z html / xml, musisz zmienić konfigurację kompilatora maszynopisu. W pliku konfiguracyjnym maszynopisu projektu (zwykle o nazwie tsconfig.json ) musisz dodać opcję JSX jako:

"compilerOptions": {
    "jsx": "react"
},

Ta opcja kompilatora mówi kompilatorowi maszynowego, aby tłumaczył znaczniki JSX w kodzie na wywołania funkcji javascript.

Aby uniknąć kompilacji maszynopisu konwertujących JSX na zwykłe wywołania funkcji javascript, użyj

"compilerOptions": {
    "jsx": "preserve"
},

Komponenty bezstanowe i bez właściwości

Najprostszy składnik reagujący bez stanu i żadnych właściwości nie można zapisać jako:

import * as React from 'react';

const Greeter = () => <span>Hello, World!</span>

Ten składnik nie może jednak uzyskać dostępu do this.props ponieważ maszynopis nie może stwierdzić, czy jest to składnik reagujący. Aby uzyskać dostęp do jego rekwizytów, użyj:

import * as React from 'react';

const Greeter: React.SFC<{}> = props => () => <span>Hello, World!</span>

Nawet jeśli komponent nie ma wyraźnie zdefiniowanych właściwości, może teraz uzyskać dostęp do props.children ponieważ wszystkie komponenty z natury mają elementy potomne.

Innym podobnym dobrym zastosowaniem składników bezstanowych i bez właściwości jest proste tworzenie szablonów stron. Poniżej przedstawiono przykładowy prosty komponent Page , przy założeniu, że istnieją już hipotetyczne komponenty Container , NavTop i NavBottom :

import * as React from 'react';

const Page: React.SFC<{}> = props => () => 
    <Container>
        <NavTop />
        {props.children}
        <NavBottom />
    </Container>

const LoginPage: React.SFC<{}> = props => () =>
    <Page>
        Login Pass: <input type="password" />
    </Page>

W tym przykładzie składnik Page może być później używany przez dowolną inną rzeczywistą stronę jako szablon podstawowy.