React
प्रतिक्रिया पर्यावरण की स्थापना

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript

सरल प्रतिक्रिया घटक

हम घटक को नीचे संकलित करने और इसे अपने वेबपेज में प्रस्तुत करने में सक्षम होना चाहते हैं

फ़ाइल नाम : src / index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class ToDo extends React.Component {
    render() {
        return (<div>I am working</div>);
    }
}

ReactDOM.render(<ToDo />, document.getElementById('App'));

सभी निर्भरताएँ स्थापित करें

# install react and react-dom
$ npm i react react-dom --save

# install webpack for bundling
$ npm i webpack -g

# install babel for module loading, bundling and transpiling
$ npm i babel-core babel-loader --save

# install babel presets for react and es6
$ npm i babel-preset-react babel-preset-es2015 --save

वेबपैक कॉन्फ़िगर करें

अपनी वर्किंग डायरेक्टरी के रूट में एक फ़ाइल webpack.config.js बनाएं

फ़ाइल नाम : webpack.config.js

module.exports = {
    entry: __dirname + "/src/index.jsx",
    devtool: "source-map",
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    }
}

बाबेल को कॉन्फ़िगर करें

हमारी कार्यशील निर्देशिका की जड़ में एक फ़ाइल .babelrc बनाएं

फ़ाइल नाम : .babelrc

{
    "presets": ["es2015","react"]
}

प्रतिक्रिया घटक का उपयोग करने के लिए HTML फ़ाइल

प्रोजेक्ट डायरेक्टरी की जड़ में एक साधारण html फाइल सेटअप करें

फ़ाइल नाम : index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="App"></div>
    <script src="build/bundle.js" charset="utf-8"></script>
  </body>
</html>

ट्रांसपाइल और अपने घटक को बंडल करें

वेबपैक का उपयोग करके, आप अपने घटक को बंडल कर सकते हैं:

$ webpack

यह build निर्देशिका में हमारी आउटपुट फ़ाइल बनाएगा।

कार्रवाई में घटक देखने के लिए ब्राउज़र में HTML पृष्ठ खोलें

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow