React => स्थापना

सरल सेटअप

फ़ोल्डर्स सेट करना

यह उदाहरण कोड को src/ और आउटपुट को out/ में रखने के लिए मानता है। जैसे कि फ़ोल्डर संरचना कुछ इस तरह दिखना चाहिए

example/
|-- src/
|   |-- index.js
|   `-- ...
|-- out/
`-- package.json

संकुल की स्थापना

एक सेटअप एनपीएम पर्यावरण को मानते हुए, हमें पहले रिएक्ट कोड को एस 5 कंप्लेंट कोड में ट्रांसप्लांट करने के लिए बेबल को सेटअप करना होगा।

$npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

उपरोक्त कमांड एनपीएम को मुख्य बेबल पुस्तकालयों और साथ ही लोडर मॉड्यूल को वेबपैक के साथ उपयोग करने के लिए निर्देश देगा। हम जेएसएक्स और एस 6 मॉड्यूल कोड को समझने के लिए एबीएस 6 और रिएक्ट्स प्रीसेट भी स्थापित करते हैं। (प्रीसेट बारे में अधिक जानकारी यहां पाया जा सकता कोलाहल प्रीसेट )

$npm i -D webpack

यह कमांड वेबपैक को विकास निर्भरता के रूप में स्थापित करेगा। ( मैं स्थापित करने के लिए आशुलिपि है और -save-dev के लिए आशुलिपि -D )

आप किसी भी अतिरिक्त वेबपैक पैकेज (जैसे अतिरिक्त लोडर या वेबपैक-देव-सर्वर एक्सटेंशन) को स्थापित करना चाह सकते हैं

अंत में हमें वास्तविक प्रतिक्रिया कोड की आवश्यकता होगी

$npm i -D react react-dom

वेबपैक सेट करना

निर्भरता सेटअप के साथ हमें webpack को क्या करना है, यह बताने के लिए webpack.config.js फ़ाइल की आवश्यकता होगी

सरल webpack.config.js:

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'out'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

यह फ़ाइल वेबपैक को index.js फ़ाइल (src / में होना माना जाता है) से शुरू करती है और इसे out बंडल निर्देशिका में एक बंडल बंडल फ़ाइल में परिवर्तित करती है।

module ब्लॉक वेबपैक को बताता है कि नियमित अभिव्यक्ति के खिलाफ सामना की गई सभी फाइलों का परीक्षण करें और यदि वे मेल खाते हैं, तो निर्दिष्ट लोडर को आमंत्रित करेगा। (इस मामले में babel-loader ) इसके अलावा, exclude regex node_modules को node_modules फ़ोल्डर में सभी मॉड्यूल के लिए इस विशेष लोडर को अनदेखा करने के लिए कहता है, इससे ट्रांसप्लिकेशन प्रक्रिया को गति मिलती है। अंत में, query विकल्प वेबपैक बताता है कि कोलाहल को पारित करने के लिए कौन से मापदंडों का उपयोग किया जाता है और हम पहले स्थापित किए गए प्रीसेट के साथ गुजरते हैं।

सेटअप का परीक्षण

अब जो कुछ बचा है वह src/index.js फ़ाइल बनाने और एप्लिकेशन को पैक करने का प्रयास करने के लिए है

src / index.js:

'use strict'

import React from 'react'
import { render } from 'react-dom'

const App = () => {
  return <h1>Hello world!</h1>
}

render(
  <App />,
  document. getElementById('app')
)

यह फ़ाइल सामान्य रूप से एक सरल <h1>Hello world!</h1> हैडर को html टैग में आईडी 'ऐप' के साथ प्रस्तुत करती है, लेकिन अब के लिए यह कोड को एक बार ट्रांसपाइल करने के लिए पर्याप्त होना चाहिए।

$./node_modules/.bin/webpack . वेबपैक के स्थानीय रूप से इंस्टॉल किए गए संस्करण को निष्पादित करेगा (यदि आप विश्व स्तर पर -g के साथ वेबपैक स्थापित करते हैं तो $webpack उपयोग करें)

यह फ़ाइल को out/bundle.js ट्रांसप्लड कोड के साथ out/bundle.js बनाना चाहिए और उदाहरण का निष्कर्ष निकालना चाहिए।

वेबपैक-देव-सर्वर का उपयोग करना

सेट अप

वेबपैक, बैबेल का उपयोग करने के लिए एक सरल परियोजना स्थापित करने के बाद और $npm i -g webpack-dev-server जारी करने वाली प्रतिक्रिया त्वरित विकास के लिए विकास http सर्वर स्थापित करेगी।

Webpack.config.js को संशोधित करना

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'out'),
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    hot: true
  }
};

संशोधनों में हैं

output.publicPath जो हमारे बंडल को रखने के लिए एक रास्ता तय करता है (अधिक जानकारी के लिए वेबपैक कॉन्फ़िगरेशन फ़ाइलें देखें)
devServer
- contentBase का आधार पथ स्थिर फ़ाइलों की सेवा करने के लिए है (उदाहरण के लिए index.html )
- hot गर्म पुनः लोड करने के लिए webpack-देव-सर्वर सेट किए जाने पर परिवर्तन डिस्क पर फ़ाइलों के लिए किया जाता हो

और अंत में हमें बस अपने ऐप को टेस्ट करने के लिए एक सरल इंडेक्स.इन की आवश्यकता है।

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React Sandbox</title>
  </head>
  <body>

    <div id="app" />

    <script src="public/bundle.js"></script>
  </body>
</html>

इस सेटअप के साथ $webpack-dev-server चल रहा है, जिसे पोर्ट 8080 पर एक स्थानीय http सर्वर शुरू करना चाहिए और कनेक्ट करने पर <h1>Hello world!</h1> वाले पेज को रेंडर करना चाहिए।

Modified text is an extract of the original Stack Overflow Documentation

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

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

React
स्थापना

खोज…