Meteori andmed Reactis

Reealse andmebaasi kasutamise jaoks teen imports kausta uue alamkausta api ja selle sees faili Items.js

import { Mongo } from 'meteor/mongo';

const Items = new Mongo.Collection('items');

export default Items;

Uuendan faili server/main.js

import { Meteor } from 'meteor/meteor';

import Items from '../imports/api/Items';

Meteor.startup(() => {
  // lisame baasi andmed
  Items.insert({
    asiYks: {
      text:'Tere',
      value: 0,
  },
  asiKaks: {
    text:'Hei',
    value: 0,
}
  })
});

Lisame Meteorile vajalikud paketid andmete seose loomiseks Meteori ja Reacti vahel, lisainfo siin.

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

Teeme failis App.js, mis on meie äpi peamine fail, muutused andmete näitamiseks kollektsioonist Items.

• Impordin kollektsiooni Items failist Items.js: import Items from '../api/Items';

• impordin _createContainer _funktsiooni: import { createContainer} from 'meteor/react-meteor-data';

• Eemaldan export default määragu klassi App konstruktorist.

• Lisan uue nn wrapper konstruktsiooni createContainer()., mis on mooduli react-meteor-data funktsioon. Wrapper konteiner renderdab uuesti (antud juhul komponendi App) alati kui reaktiivsed andmed muutuvad ja saadab uue props väärtused (component created with createContainer will re-render when your reactive data changes and send a new set of props to your actual component).

Selle etapi tulemusena on App.js:

import React, {Component} from 'react';
import { createContainer} from 'meteor/react-meteor-data';
import Items from '../api/Items';

 let nimi='Juku';
class App extends Component {
  constructor() {
    super();
    this.state={
      loendur:0
    }
  }
   klikiSyndmus() {
     this.setState({loendur: this.state.loendur +1});
   }
  render () { //alati peab olema komponendi osa
    return ( // render funktsioon peab midagi tagastana, see on JSX
      <header onClick={this.klikiSyndmus.bind(this)}>
        <Heading loendur ={this.state.loendur} />
      </header>
    );
  }
}
//Wrapper  andmete lisamiseks klassile App
export default createContainer(() =>{
  return {
    items: Items.find({}).fetch()
  }
},App);

//alamkomponent
class Heading extends Component {
  render() { //alati peab olema komponendi osa
    return ( // render funktsioon peab midagi tagastana, see on JSX
      <h1>  {nimi}, oled vajutanud {this.props.loendur} korda!</h1>
    )
  }
}

Eelneva tulemus ei anna veateateid kuid ei väljasta veel andmebaasi kirjeid.