수색…
비고
React 는 사용자 인터페이스를 작성하기위한 JavaScript 라이브러리입니다. 페이스 북이 개발 및 유지 관리하는 오픈 소스 입니다. Meteor는 React에 대한 생산 준비 지원을 제공합니다.
자원:
설치 및 "Hello World"
프로젝트에 React를 추가하십시오 :
meteor npm install --save react react-dom react-mounter
간단한 React 구성 요소를 표시하려면 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 구성 요소에 어떻게 표시 될 수 있는지 보여줍니다. 컬렉션은 서버와 클라이언트간에 지속적으로 동기화되며 데이터베이스 내용이 변경되면 즉시 페이지가 업데이트됩니다.
React 구성 요소와 Meteor 컬렉션을 연결하려면, 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
에 간단한 발행물을 만듭니다.
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
컬렉션과 같은 반응 값을 React 구성 요소에 전달할 수 있습니다. 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 })