Delete client and server folder. Create new client folder. Under client folder, create main.html :
<head>
<title>Employee Directory</title>
</head>
<body>
<div class="container"></div>
</body>Create main.jsx :
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<div>Hello there!</div>
);
};
// After Meteor loads in the browser, render my app to the browser
Meteor.startup(() => {
// React render call
ReactDOM.render(<App />, document.querySelector('.container'));
});Create imports folder. Under imports folder create collections folder. Under collections folder, create employee.jsx :
// Declare our collection
import { Mongo } from 'meteor/mongo';
export const Employees = new Mongo.Collection('employees');Install faker and lodash :
npm install --save faker lodashCreate server folder. Under server folder create main.jsx :
// Only executed on the server
import _ from 'lodash';
import { Meteor } from 'meteor/meteor';
import { Employees } from '../imports/collections/employee';
import { image, helpers } from 'faker';
Meteor.startup(() => {
// Great place to generate data
// Check to see if data exists in the collection
// See if the collection has any records
const numberRecords = Employees.find({}).count();
if (!numberRecords) {
// Generate some data...
_.times(5000, () => {
const { name, email, phone } = helpers.createCard();
Employees.insert({
name, email, phone,
avatar: image.avatar()
});
});
}
});Create components folder under client folder. Under components folder create employee_list.jsx :
import React from 'react';
const EmployeeList = () => {
return (
<div>
<div className="employee-list">
Employee List
</div>
</div>
);
};
export default EmployeeList;Change main.jsx on client folder :
import EmployeeList from './components/employee_list';
const App = () => {
return (
<div>
<EmployeeList />
</div>Remove autopublish :
meteor remove autopublishChange main.jsx under server folder :
Meteor.publish('employees', function() {
return Employees.find({}, { limit: 20 });
});Install react-addon :
npm install --save react-addons-pure-render-mixinAdd react meteor data, React mixin for reactively tracking Meteor data :
meteor add react-meteor-data