Meteor + React

Meteori install

Installida Meteor oma arvutisse.

Luua uus projekt:

meteor create meteorReact

Loodud projekti kaustas käivitan Meteori kohaliku veebiserveri:

cd meteorReact
meteor

Installitud Node moodulite ülevaade on failis package.json - seda tasub jälgida. Teine oluline fail on .meteor/packages Siit saab Meteori mooduleid eemaldada kustutades vastava rea aga samuti ka lisada mooduleid lisades mooduli nimega rea.

Järgnevalt kustutan client kaustast Blaze'i spetsiifilised asjad kuna kasutan frontendis Reacti - seega kustutan failid main.html ja main.js. main.css jääb alles kuna see on universaalne.

Reacti funktsionaalsuse lisamine

Loodud projekti kaustas lisan Meteorile React ja ReactDOM moodulid

meteor npm install --save react react-dom

Loon uue main.html faili, oluline on siincontainer kuhu renderdatakse Reacti kood:

<head>
  <title>Meteor + React</title>
</head>

<body id="container">

</body>

Samuti uus main.js, kus laetakse Reacti moodulid ja renderdatakse peamine komponent:

//vajalike moodulite ja nende funktsioonide import
import React, {Component} from 'react';
import {Meteor} from 'meteor/meteor';
import {render} from 'react-dom';
import App from '../imports/client/App';

Meteor.startup(() =>{
   render(<App />,document.getElementById('container'))
});

Struktureerin natuke failisüsteemi. Teen äpi juurkausta uue kausta imports ning selle sisse client ja server kaustad.

LIsan kaustas client uue faili komponendi App jaoks App.js.

import React, {Component} from 'react';

 let nimi='Juku';
export default class App extends Component {
   klikiSyndmus() {
     console.log("vajutasid tekstile...");
   }
  render () {
    return (
      <h1 onClick={this.klikiSyndmus}>Halloo, {nimi}!</h1>
    );
  }
}

Siin on kasutatud Javascripti muutuja edastamist JSX-i (looksulgude vahel) ja funkstiooni klikiSyndmus kasutamist. this klikiSyndmus-e ees on seepärast et funktsioon ei ole defineeritud globaalsena vaid komponendi sees.

PreviousMeteorNextStates

Last updated