meteor
उल्का + अभिक्रिया

टिप्पणियों

सेटअप और "हैलो वर्ल्ड"

अपनी परियोजना में प्रतिक्रिया जोड़ें:

meteor npm install --save react react-dom react-mounter

एक साधारण प्रतिक्रिया घटक प्रदर्शित करने के लिए client/helloworld.jsx फ़ाइल बनाएँ:

import React, { Component } from 'react';
import { mount } from 'react-mounter';

// This component only renders a paragraph containing "Hello World!"
class HelloWorld extends Component {
  render() {
    return <p>Hello World!</p>;
  }
}

// When the client application starts, display the component by mounting it to the DOM.
Meteor.startup(() => {
  mount(HelloWorld);
});

CreateContainer का उपयोग करके प्रतिक्रियाशील कंटेनर बनाएं

मान लीजिए कि Todos नामक एक संग्रह है और autopublish पैकेज जोड़ा गया है। यहाँ मूल घटक है।

import { createContainer } from 'meteor/react-meteor-data';
import React, { Component, PropTypes } from 'react';
import Todos from '/imports/collections/Todos';

export class List extends Component {
  render() {
    const { data } = this.props;
    return (
      <ul className="list">
        {data.map(entry => <li {...entry} />)}
      </ul>
    )
  }
}

List.propTypes = {
  data: PropTypes.array.isRequired
};

तल पर, आप घटक में प्रतिक्रियाशील डेटा को खिलाने के लिए एक कंटेनर जोड़ सकते हैं। यह इस तरह दिखेगा।

export default createContainer(() => {
  return {
    data: Todos.find().fetch()
  };
}, List);

एक MongoDB संग्रह प्रदर्शित करना

यह उदाहरण दिखाता है कि कैसे एक रिएक्ट घटक में एक MongoDB संग्रह प्रदर्शित किया जा सकता है। सर्वर और क्लाइंट के बीच संग्रह लगातार सिंक्रनाइज़ किया जाता है, और डेटाबेस सामग्री में परिवर्तन के रूप में पृष्ठ तुरंत अपडेट होता है।

प्रतिक्रिया घटकों और उल्का संग्रह को जोड़ने के लिए, आपको react-meteor-data पैकेज की आवश्यकता होगी।

$ meteor add react-meteor-data
$ meteor npm install react-addons-pure-render-mixin

both/collections.js में एक सरल संग्रह घोषित किया गया है। both निर्देशिका में प्रत्येक स्रोत फ़ाइल क्लाइंट-साइड और सर्वर-साइड कोड दोनों है:

import { Mongo } from 'meteor/mongo';

// This collection will contain a list of random numbers
export const Numbers = new Mongo.Collection("numbers");

संग्रह को सर्वर पर प्रकाशित करने की आवश्यकता है। server/publications.js में एक साधारण प्रकाशन बनाएँ। server/publications.js :

import { Meteor } from 'meteor/meteor';
import { Numbers } from '/both/collections.js';

// This publication synchronizes the entire 'numbers' collection with every subscriber
Meteor.publish("numbers/all", function() {
  return Numbers.find();
});

createComponent फ़ंक्शन का उपयोग करके हम प्रतिक्रियाशील मान ( Numbers संग्रह की तरह) एक प्रतिक्रिया घटक को पास कर सकते हैं। client/shownumbers.jsx :

import React from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Numbers } from '/both/collections.js';

// This stateless React component renders its 'numbers' props as a list
function _ShowNumbers({numbers}) {
  return <div>List of numbers:
    <ul>
      // note, that every react element created in this mapping requires 
      // a unique key - we're using the _id auto-generated by mongodb here
      {numbers.map(x => <li key={x._id}>{x.number}</li>)}
    </ul>
  </div>;
}

// Creates the 'ShowNumbers' React component. Subscribes to 'numbers/all' publication,
// and passes the contents of 'Numbers' as a React property.
export const ShowNumbers = createContainer(() => {
  Meteor.subscribe('numbers/all');
  return {
    numbers: Numbers.find().fetch(),
  };
}, _ShowNumbers);

प्रारंभ में डेटाबेस संभवतः खाली है।

MongoDB में प्रविष्टियाँ जोड़ें और स्वचालित रूप से पृष्ठ अपडेट के रूप में देखें।

$ meteor mongo 
MongoDB shell version: 3.2.6
connecting to: 127.0.0.1:3001/meteor

meteor:PRIMARY> db.numbers.insert({number: 5});
WriteResult({ "nInserted" : 1 })

meteor:PRIMARY> db.numbers.insert({number: 42});
WriteResult({ "nInserted" : 1 })