React
रिएक्ट बॉयलरप्लेट [रिएक्ट + बैबल + वेबपैक]

परियोजना की स्थापना

प्रोजेक्ट निर्भरता स्थापित करने के लिए आपको नोड पैकेज मैनेजर की आवश्यकता होती है। अपने ऑपरेटिंग सिस्टम के लिए नोड को Nodejs.org से डाउनलोड करें । नोड पैकेज मैनेजर नोड के साथ आता है।

अपने नोड और एनपीएम संस्करणों को बेहतर ढंग से प्रबंधित करने के लिए आप नोड संस्करण प्रबंधक का भी उपयोग कर सकते हैं। विभिन्न नोड संस्करणों पर अपनी परियोजना के परीक्षण के लिए यह बहुत अच्छा है। हालांकि, यह उत्पादन पर्यावरण के लिए अनुशंसित नहीं है।

एक बार जब आप अपने सिस्टम पर नोड स्थापित कर लेते हैं, तो आगे बढ़ें और बेबल और वेबपैक का उपयोग करके अपने पहले रिएक्ट प्रोजेक्ट को बंद करने के लिए कुछ आवश्यक पैकेज स्थापित करें।

इससे पहले कि हम वास्तव में टर्मिनल में कमांड मारना शुरू करें। बैबल और वेबपैक के लिए क्या उपयोग किया जाता है, इस पर एक नज़र डालें।

आप अपने टर्मिनल में npm init चलाकर अपनी परियोजना शुरू कर सकते हैं। प्रारंभिक सेटअप का पालन करें। उसके बाद, अपने टर्मिनल में निम्न कमांड चलाएँ-

निर्भरता:

npm install react react-dom --save

देव निर्भरताएँ:

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 webpack webpack-dev-server react-hot-loader --save-dev

वैकल्पिक देव निर्भरता:

npm install eslint eslint-plugin-react babel-eslint --save-dev

आप इस नमूना पैकेज का उल्लेख कर सकते हैं

निम्नलिखित सामग्री के साथ अपने प्रोजेक्ट रूट में .babelrc बनाएं:

{
  "presets": ["es2015", "stage-0", "react"]
}

निम्नलिखित सामग्री के साथ अपने प्रोजेक्ट रूट में वैकल्पिक रूप से .eslintrc बनाएं:

{
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "babel-eslint",
  "rules": {
    "quotes": [2, "single"],
    "strict": [2, "never"],
  },
  "plugins": [
    "react"
  ]
}

अपने git रेपो में उत्पन्न फ़ाइलों को अपलोड करने से रोकने के लिए .gitignore फ़ाइल बनाएँ।

node_modules
npm-debug.log
.DS_Store
dist

न्यूनतम सामग्री के साथ webpack.config.js फ़ाइल बनाएँ।

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

और अंत में, एक sever.js फ़ाइल बनाएँ जो निम्नलिखित सामग्री के साथ sever.js npm start को चलाने में सक्षम हो:

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Serving your awesome project at http://localhost:3000/');
});

अपने रिएक्ट प्रोजेक्ट को कुछ करते देखने के लिए src/app.js फ़ाइल बनाएँ।

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <h1>Hello, world.</h1>
    );
  }
}

टर्मिनल में node server.js चलाएं। node server.js या node server.js npm start , यदि आपने परिभाषित किया है कि आपके package.json में क्या start होता है

प्रतिक्रिया-स्टार्टर परियोजना

इस प्रोजेक्ट के बारे में

यह सरल बॉयलरप्लेट परियोजना है। यह पोस्ट आपको ReactJs + Webpack + Bable के लिए वातावरण स्थापित करने के लिए मार्गदर्शन करेगी।

आएँ शुरू करें

हमें एक्सप्रेस सर्वर के लिए नोड पैकेज मैनेजर की आवश्यकता होगी और पूरे प्रोजेक्ट पर निर्भरता का प्रबंधन करना होगा। अगर आप नोड पैकेज मैनेजर के लिए नए हैं, तो आप यहां देख सकते हैं । ध्यान दें: नोड पैकेज प्रबंधक स्थापित करने की आवश्यकता है।

उपयुक्त नाम वाला एक फोल्डर बनाएं और उसमें टर्मिनल या GUI से नेविगेट करें। इसके बाद टर्मिनल पर जाएं और npm npm init टाइप करें, इससे एक पैकेज बन जाएगा। जज फाइल, कुछ भी डरावना नहीं है, यह आपसे आपकी परियोजना के नाम, संस्करण जैसे कुछ सवाल पूछेगा। विवरण, एंट्री पॉइंट, गिट रिपॉजिटरी, ऑथर, लाइसेंस आदि। यहाँ एंट्री पॉइंट महत्वपूर्ण है क्योंकि नोड जब आप प्रोजेक्ट को चलाएंगे, तब शुरू में इसे देखेंगे। अंत में यह आपको आपके द्वारा दी गई जानकारी को सत्यापित करने के लिए कहेगा। आप हाँ टाइप कर सकते हैं या इसे संशोधित कर सकते हैं। खैर यह बात है, हमारी package.json फ़ाइल तैयार है।

एक्सप्रेस सर्वर सेटअप रन npm स्थापित एक्सप्रेस @ 4 - save । यह इस परियोजना के लिए आवश्यक सभी निर्भरताएँ हैं। हमारे पास ध्वज को सहेजना महत्वपूर्ण है, इसके बिना पैकेज। Js फ़ाइल को अपडेट नहीं किया जाएगा। Package.json का मुख्य कार्य निर्भरताओं की सूची को संग्रहीत करना है। यह एक्सप्रेस संस्करण जुड़ जाएगा 4. अपने package.json तरह दिखेगा "dependencies": { "express": "^4.13.4", ............. },

पूर्ण डाउनलोड के बाद आप देख सकते हैं कि हमारे निर्भरता का नोड_मॉडल फ़ोल्डर और उप फ़ोल्डर है। अब प्रोजेक्ट के रूट पर नई फ़ाइल server.js फ़ाइल बनाएँ। अब हम एक्सप्रेस सर्वर स्थापित कर रहे हैं। मैं सभी कोड को पार करने जा रहा हूं और बाद में समझाता हूं।

var express = require('express');
// Create our app
var app = express();

app.use(express.static('public'));

app.listen(3000, function () {
  console.log('Express server is using port:3000');
});

var एक्सप्रेस = आवश्यकता ('एक्सप्रेस'); यह आपको संपूर्ण एक्सप्रेस एपीआई की पहुंच प्रदान करेगा।

var app = express (); फ़ंक्शन के रूप में एक्सप्रेस लाइब्रेरी को कॉल करेगा। app.use (); कार्यक्षमता को अपने एक्सप्रेस एप्लिकेशन में जोड़ें। app.use (express.static ( 'सार्वजनिक')); उस फ़ोल्डर का नाम निर्दिष्ट करेगा जो हमारे वेब सर्वर में सामने आएगा। app.listen (पोर्ट, फंक्शन () {}) यहां हमारा पोर्ट 3000 होगा और हम जिस फंक्शन को कॉल कर रहे हैं वह यह सत्यापित करेगा कि वेब सर्वर ठीक से चल रहा है। यह एक्सप्रेस सर्वर स्थापित है।

अब हमारे प्रोजेक्ट पर जाएं और एक नया फ़ोल्डर सार्वजनिक करें और index.html फ़ाइल बनाएँ। index.html आपके लिए डिफ़ॉल्ट फ़ाइल है और एक्सप्रेस सर्वर इस फ़ाइल को देखेगा। Index.html simple html file है जो देखने में कैसी लगती है

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
</head>

<body>
  <h1>hello World</h1>
</body>

</html>

और टर्मिनल के माध्यम से प्रोजेक्ट पथ पर जाएं और नोड server.js टाइप करें। फिर आपको * कंसोल.लॉग ('एक्सप्रेस सर्वर पोर्ट: 3000' का उपयोग कर रहा है) *; * दिखाई देगा।

ब्राउज़र पर जाएँ और http: // localhost: 3000 बार नेव बार में आप हैलो वर्ल्ड देखेंगे।

अब सार्वजनिक फ़ोल्डर के अंदर जाएं और एक नया फ़ाइल ऐप बनाएं ।jsx JSX एक प्रीप्रोसेसर कदम है जो आपके जावास्क्रिप्ट में XML सिंटैक्स जोड़ता है। आप निश्चित रूप से JSX के बिना React का उपयोग कर सकते हैं लेकिन JSX प्रतिक्रिया को बहुत अधिक सुरुचिपूर्ण बनाता है। यहाँ app.jsx के लिए नमूना कोड है

ReactDOM.render(
  <h1>Hello World!!!</h1>,
  document.getElementById('app')
);

अब index.html पर जाएँ और कोड को संशोधित करें, यह इस तरह दिखना चाहिए

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23                                              /browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js">                           </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js">    </script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel" src="app.jsx"></script>
</body>

</html>

इसके स्थान पर आप सभी काम कर रहे हैं, मुझे आशा है कि आप इसे सरल पाएंगे।