React
टाइपस्क्रिप्ट के साथ ReactJS का उपयोग करना

टाइपस्क्रिप्ट में ReactJS घटक लिखा है

वास्तव में आप फेसबुक के उदाहरण में टाइपस्क्रिप्ट में ReactJS के घटकों का उपयोग कर सकते हैं। बस 'jsx' फ़ाइल के एक्सटेंशन को 'tsx' में बदलें:

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

लेकिन टाइपस्क्रिप्ट की मुख्य विशेषता (स्टैटिक टाइप चेकिंग) का पूर्ण उपयोग करने के लिए कुछ चीजें करनी चाहिए:

1) ESct वर्ग में React.createClass उदाहरण में परिवर्तित करें:

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

यदि प्रोग्रामर प्रॉपर पास करना भूल जाता है, तो टाइपस्क्रिप्ट एक त्रुटि प्रदर्शित करेगा। या अगर उन्होंने प्रॉपर जोड़ा है जो इंटरफ़ेस में परिभाषित नहीं है।

टाइपस्क्रिप्ट में स्टेटलेस रिएक्ट घटक

प्रतिक्रियाशील घटक जो उनके प्रॉप्स के शुद्ध कार्य हैं और किसी भी आंतरिक स्थिति की आवश्यकता नहीं है, मानक क्लास सिंटैक्स का उपयोग करने के बजाय जावास्क्रिप्ट फ़ंक्शन के रूप में लिखा जा सकता है, जैसे:

import React from 'react'

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

इसे 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 install --save react react-dom

फेसबुक ने यार्न नाम से अपना स्वयं का पैकेज मैनेजर जारी किया, जिसका उपयोग रिएक्ट स्थापित करने के लिए भी किया जा सकता है। यार्न को स्थापित करने के बाद आपको बस इस कमांड को चलाने की आवश्यकता है:

yarn add react react-dom

फिर आप अपनी परियोजना में ठीक उसी तरह से रिएक्ट का उपयोग कर सकते हैं जैसे कि आपने npm के माध्यम से रिएक्ट स्थापित किया था।

टाइपस्क्रिप्ट 2.0+ में रिएक्शन टाइप परिभाषाएँ स्थापित करना

टाइपस्क्रिप्ट का उपयोग करके अपने कोड को संकलित करने के लिए, npm या यार्न का उपयोग करके टाइप डेफ़िनिशन फ़ाइलों को जोड़ें / स्थापित करें।

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

या, यार्न का उपयोग कर

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

टाइपस्क्रिप्ट के पुराने संस्करणों में प्रकार की परिभाषाएँ स्थापित करना

आपको tsd नामक एक अलग पैकेज का उपयोग करना होगा

tsd install react react-dom --save

टाइपस्क्रिप्ट कॉन्फ़िगरेशन जोड़ना या बदलना

JSX का उपयोग करने के लिए, html / xml के साथ जावास्क्रिप्ट मिश्रण करने वाली भाषा, आपको टाइपस्क्रिप्ट कंपाइलर कॉन्फ़िगरेशन को बदलना होगा। प्रोजेक्ट की टाइपस्क्रिप्ट कॉन्फ़िगरेशन फ़ाइल (आमतौर पर tsconfig.json नाम से) में, आपको tsconfig.json विकल्प जोड़ना होगा:

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

यह कंपाइलर विकल्प मूल रूप से जावास्क्रिप्ट कंपाइलर को जेएसएक्स टैग्स को जावास्क्रिप्ट फंक्शन कॉल्स में कोड में ट्रांसलेट करने के लिए कहता है।

JSX को सादे जावास्क्रिप्ट फ़ंक्शन कॉल में परिवर्तित करने वाले टाइपस्क्रिप्ट कंपाइलर से बचने के लिए, उपयोग करें

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

स्टेटलेस और प्रॉपर्टी-कम अवयव

एक राज्य के बिना सबसे सरल प्रतिक्रिया घटक और कोई गुण नहीं लिखा जा सकता है:

import * as React from 'react';

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

हालांकि, यह घटक this.props तक नहीं पहुँच this.props क्योंकि टाइपस्क्रिप्ट बता नहीं सकता है कि क्या यह एक प्रतिक्रिया घटक है। इसके प्रॉप्स तक पहुँचने के लिए, उपयोग करें:

import * as React from 'react';

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

यहां तक कि अगर घटक में स्पष्ट रूप से परिभाषित गुण नहीं हैं, तो यह अब props.children तक पहुंच 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 घटक को बाद में आधार टेम्पलेट के रूप में किसी अन्य वास्तविक पृष्ठ द्वारा उपयोग किया जा सकता है।