# meteor-react-kit
**Repository Path**: aieryun/meteor-react-kit
## Basic Information
- **Project Name**: meteor-react-kit
- **Description**: Meteor With React Kit
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-06-26
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# meteor-react-kit
---
###技术栈
- Meteor
- React
- ES6
- React Router
###构建过程
####项目创建
创建新的Meteor项目
meteor create my-first-app
命令执行成功后，会创建一个 `my-first-app` 的文件夹，目录结构如下：
client/main.js # a JavaScript entry point loaded on the client
client/main.html # an HTML file that defines view templates
client/main.css # a CSS file to define your app's styles
server/main.js # a JavaScript entry point loaded on the server
package.json # a control file for installing NPM packages
.meteor # internal Meteor files
.gitignore # a control file for git
运行项目
cd my-first-app
meteor npm install
meteor
执行完成后使用浏览器打开 `http://localhost:3000` 查看。
###React组件
安装React模块
meteor npm install --save react react-dom
替换 `client/main.html` 文件代码
``` html
Todo List
```
删除 `client/main.js` 并新建 `client/main.jsx` , `imports/ui/App.jsx ` , `imports/ui/Task.jsx ` 三个文件
`client/main.jsx `文件代码：
``` javascript
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import App from '../imports/ui/App.jsx';
Meteor.startup(() => {
render(, document.getElementById('render-target'));
});
```
`imports/ui/App.jsx`文件代码：
``` javascript
import React, { Component } from 'react';
import Task from './Task.jsx';
// App component - represents the whole app
export default class App extends Component {
getTasks() {
return [
{ _id: 1, text: 'This is task 1' },
{ _id: 2, text: 'This is task 2' },
{ _id: 3, text: 'This is task 3' },
];
}
renderTasks() {
return this.getTasks().map((task) => (
));
}
render() {
return (
);
}
}
```
`imports/ui/Task.jsx` 文件代码：
``` javascript
import React, { Component, PropTypes } from 'react';
// Task component - represents a single todo item
export default class Task extends Component {
render() {
return (
{this.props.task.text}
);
}
}
Task.propTypes = {
// This component gets the task to display through a React prop.
// We can use propTypes to indicate it is required
task: PropTypes.object.isRequired,
};
```