React
Использование ReactJS с машинописным текстом

Компонент ReactJS, написанный на машинописном машинописном документе

Фактически вы можете использовать компоненты ReactJS в Typcript, как в примере на facebook. Просто замените расширение файла «jsx» на «tsx»:

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

Но для того, чтобы в полной мере использовать главную функцию Typcript (проверка статического типа), нужно выполнить пару вещей:

1) конвертировать пример React.createClass в ES6 Класс:

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

2) затем добавить интерфейсы реквизита и состояния:

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);

Теперь TypScript отобразит ошибку, если программист забудет передать реквизиты. Или если они добавили реквизиты, которые не определены в интерфейсе.

Агрегаты без учета состояния в машинописном тексте

Реагировать на компоненты, которые являются чистыми функциями своих реквизитов и не требуют какого-либо внутреннего состояния, могут быть записаны как функции JavaScript вместо использования стандартного синтаксиса класса, а именно:

import React from 'react'

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

То же самое можно сделать в TypScript с использованием класса React.SFC :

import * as React from 'react';

class GreeterProps {
   name: string
}

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

Обратите внимание, что имя React.SFC является псевдонимом для React.StatelessComponent Таким образом, либо можно использовать.

Установка и настройка

Чтобы использовать машинопись с реакцией в проекте узла, вы должны сначала создать каталог проекта, инициализированный с помощью npm. Чтобы инициализировать каталог с помощью npm init

Установка через npm или пряжу

Вы можете установить React с помощью npm , выполнив следующие действия:

npm install --save react react-dom

Facebook выпустил собственный менеджер пакетов с именем Yarn , который также можно использовать для установки React. После установки пряжи вам просто нужно запустить эту команду:

yarn add react react-dom

Затем вы можете использовать React в своем проекте точно так же, как если бы вы установили React через npm.

Установка определений типа реакции в TypScript 2.0+

Чтобы скомпилировать свой код с помощью машинописных файлов, добавьте / установите типы определения файлов с использованием npm или пряжи.

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

или, используя пряжу

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

Установка определений типа реакции в более старых версиях Typcript

Вы должны использовать отдельный пакет под названием tsd

tsd install react react-dom --save

Добавление или изменение конфигурации Виджета

Чтобы использовать JSX , язык, смешивающий javascript с html / xml, вам нужно изменить конфигурацию компилятора typescript. В файле конфигурации машинописного файла проекта (обычно называемом tsconfig.json ) вам нужно добавить параметр JSX как:

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

Этот параметр компилятора в основном сообщает компилятору typescript, чтобы перевести теги JSX в код на вызовы функций javascript.

Чтобы избежать компиляции скриптов, конвертирующих JSX в обычные вызовы функций javascript, используйте

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

Безстоящие и не имеющие отношения компоненты

Простейший компонент реакции без состояния и свойств не может быть записан как:

import * as React from 'react';

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

Однако этот компонент не может получить доступ к this.props поскольку машинописный текст не может определить, является ли он реактивным компонентом. Чтобы получить доступ к своим реквизитам, используйте:

import * as React from 'react';

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

Даже если компонент не имеет явно определенных свойств, он теперь может обращаться к props.children поскольку у всех компонентов есть дети.

Другим аналогичным хорошим использованием компонентов без учета состояния и без свойств является простое шаблонирование страниц. Ниже приведен пример простой простой компонент Page , если в проекте есть гипотетические компоненты Container , NavTop и 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>

В этом примере компонент Page позже может использоваться любой другой фактической страницей в качестве базового шаблона.