React => Instalacja React, Webpack i maszynopisu

Uwagi

Aby uzyskać wyróżnianie składni w edytorze (np. VS Code), musisz pobrać informacje o pisaniu dla modułów używanych w projekcie.

Załóżmy na przykład, że używasz React i ReactDOM w swoim projekcie, i chcesz uzyskać dla nich wyróżnianie i Intellisense. Będziesz musiał dodać typy do swojego projektu za pomocą tego polecenia:

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

Twój edytor powinien teraz automatycznie pobierać te informacje o pisaniu i dostarczać ci autouzupełniania i Intellisense dla tych modułów.

webpack.config.js

module.exports = {
    entry: './src/index',
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.ts', '.tsx']
    }
};

Głównymi składnikami są (oprócz standardowych właściwości entry , output i innych właściwości pakietu):

Moduł ładujący

W tym celu musisz utworzyć regułę, która .ts .tsx rozszerzenia plików .ts i .tsx , jako ts-loader określ ts-loader loader.

Rozwiąż rozszerzenia TS

Musisz także dodać rozszerzenia .ts i .tsx do tablicy resolve , w przeciwnym razie webpack ich nie zobaczy.

tsconfig.json

Jest to minimalny tsconfig, abyś mógł zacząć działać.

{
    "include": [
        "src/*"
    ],
    "compilerOptions": {
        "target": "es5",
        "jsx": "react",
        "allowSyntheticDefaultImports": true
    }
}

Przejrzyjmy właściwości jeden po drugim:

`include`

To jest tablica kodu źródłowego. Tutaj mamy tylko jeden wpis, src/* , który określa, że wszystko w katalogu src ma zostać uwzględnione w kompilacji.

`compilerOptions.target`

Określa, że chcemy skompilować do celu ES5

`compilerOptions.jsx`

Ustawienie tej wartości na true spowoduje, że TypeScript automatycznie skompiluje składnię React.createElement("div") z <div /> do React.createElement("div") .

`compilerOptions.allowSyntheticDefaultImports`

Przydatna właściwość, która pozwoli ci importować moduły węzłów tak, jakby były modułami ES6, więc zamiast tego robić

import * as React from 'react'
const { Component } = React

możesz po prostu zrobić

import React, { Component } from 'react'

bez błędów informujących, że React nie ma domyślnego eksportu.

Mój pierwszy składnik

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


interface AppProps {
    name: string;
}
interface AppState {
    words: string[];
}

class App extends Component<AppProps, AppState> {
    constructor() {
        super();
        this.state = {
            words: ['foo', 'bar']
        };
    }

    render() {
        const { name } = this.props;
        return (<h1>Hello {name}!</h1>);
    }
}

const root = document.getElementById('root');
ReactDOM.render(<App name="Foo Bar" />, root);

W przypadku korzystania z TypeScript z React, po pobraniu definicji typu React DefinityTyped ( npm install --save @types/react ), każdy komponent będzie wymagał dodania adnotacji typu.

Robisz to tak:

class App extends Component<AppProps, AppState> { }

gdzie AppProps i AppState są interfejsami (lub aliasami typów) odpowiednio dla rekwizytów i stanów komponentów.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

React
Instalacja React, Webpack i maszynopisu

Szukaj…