React => React, Webpack & Typescript installatie

Opmerkingen

Om syntaxisaccentuering in uw editor te krijgen (bijv. VS Code), moet u typegegevens downloaden voor de modules die u in uw project gebruikt.

Stel dat u React en ReactDOM in uw project gebruikt en dat u markeringen en Intellisense voor hen wilt krijgen. U moet de typen aan uw project toevoegen met deze opdracht:

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

Uw editor zou nu automatisch deze typegegevens moeten oppikken en u autocomplete en Intellisense voor deze modules moeten bezorgen.

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']
    }
};

De belangrijkste componenten zijn (naast de standaard entry , output en andere webpack-eigenschappen):

De lader

Hiervoor moet u een regel maken die test voor de .ts en .tsx bestandsextensies, ts-loader opgeven als de loader.

Los TS-extensies op

U moet ook de .ts en .tsx extensies toevoegen in de resolve , anders ziet Webpack deze niet.

tsconfig.json

Dit is een minimale tsconfig om je op weg te helpen.

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

Laten we de eigenschappen één voor één doornemen:

`include`

Dit is een reeks broncode. Hier hebben we slechts één vermelding, src/* , die aangeeft dat alles in de map src moet worden opgenomen in de compilatie.

`compilerOptions.target`

Geeft aan dat we willen compileren naar ES5-doel

`compilerOptions.jsx`

Als u dit op true instelt, compileert TypeScript automatisch uw tsx-syntaxis van <div /> naar React.createElement("div") .

`compilerOptions.allowSyntheticDefaultImports`

Handige eigenschap waarmee u knooppuntmodules kunt importeren alsof het ES6-modules zijn, dus in plaats van te doen

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

je kunt het gewoon doen

import React, { Component } from 'react'

zonder fouten die u vertellen dat React geen standaard export heeft.

Mijn eerste component

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

Wanneer u TypeScript met React gebruikt, moet u na het downloaden van de React DefinitelyTyped- npm install --save @types/react ( npm install --save @types/react ) npm install --save @types/react toevoegen.

Je doet dit zo:

class App extends Component<AppProps, AppState> { }

waarbij AppProps en AppState interfaces zijn (of aliassen van typen) voor respectievelijk de rekwisieten en de status van uw componenten.

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

React
React, Webpack & Typescript installatie

Zoeken…