整合Meteor + React + Material UI

前端之家收集整理的这篇文章主要介绍了整合Meteor + React + Material UI前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

看了meteor官方教程,觉得这个做快速开发真的不错。于是尝试和reactmaterial-ui进行整合。由于Meteor不是一个普通的node project,对于npm模块的依赖不能够简单的require()就搞定。这里主要参考这篇文章,但是material-ui版本已经更新到0.12.3,所以期间还是花了点时间。

以下,将会用到:

  1. create package in meteor

  2. add local package in meteor

  3. meteor中client端添加npm模块

如果是普通的node项目,整合React和Material-ui只需要npm install & require,但是meteor中却没有这么简单。

Google了一下meteor添加npm模块,发现meteor添加npm模块有几个方法

  1. meterohacks:npm,用于server端

  2. cosmos:browserify,用于client端

我希望在client端做使用react,因此采用后者(还没有试过server端使用react)。大致思路是:新建一个package,里面使用cosmos:browserify添加对react和material-ui的依赖,在meteor项目中添加此package。
meteor add react可以快速添加对react的支持,但是这样的方式在使用material-ui时会有些问题,具体在参考文中也有谈到。因此采用browserify添加react依赖。

创建meteor项目

meteor create meteor-react-material
cd meteor-react-material

添加meteor的package路径

export PACKAGE_DIRS=$HOME/meteor/local-packages

这里需要自己创建一个路径保存本地的meteor包,meteor add时会搜索这个路径去安装包。由于export仅仅对当前termial session生效,所以不用担心对其他项目bao的安装有影响。

下载react相关包

mkdir $PACKAGE_DIRS/react-packages
git clone https://github.com/meteor/react-packages $PACKAGE_DIRS/react-packages
meteor add babel-compiler babel-runtime jsx react-meteor-data

创建本地package

cd $PACKAGE_DIRS
meteor create --package ygjack:browserify-deps
cd browserify-deps
mv browserify-deps.js client.browserify.js

创建package的时候,需要author,这里ygjack是我的用户名,因此前缀之。
创建package的时候,默认会创建通明的js文件,但是这里要使用cosmos:browersify,所以需要有一个client.browserify.js文件,这里直接修改命名。
更多关于创建package

// browserify-deps/package.js
Npm.depends({
  'react': '0.13.3','material-ui':'0.12.3'
});

Package.onUse(function(api) {
    api.versionsFrom('1.2.0.2');
    api.use(['cosmos:browserify'],'client');
    api.addFiles(['client.browserify.js'],'client');
    api.export('React','client');
    api.export('mui','client');
    api.export('injectTapEventPlugin','client');
});

添加client全局变量

// browserify-deps/client.browserify.js
React = require('react');  
mui = require('material-ui');  
injectTapEventPlugin = require('react-tap-event-plugin');

添加browserify-deps

cd /path/to/meteor-react-material
meteor add ygjack:browserify-deps

这里meteor会build local package。(由于个人创建的package在add时是需要前缀用户名的,所以这个前面是我自己的用户名ygjack)

这样react和material-ui的依赖都添加好了,可以运行项目在浏览器控制台中访问全局的React,mui就能使用相应的功能了。

添加jsx文件

mkdir client
mkdir client/components
touch client/startup.jsx
touch client/components/App.jsx

client是meteor项目中的特殊目录,详细请参考这里

// client/startup.jsx
Meteor.startup(function() {
    injectTapEventPlugin(); // required by material-ui
    React.render(<App />,document.getElementById('mountNode'));
});
// client/components/App.jsx
var DatePicker = mui.DatePicker;
var RaisedButton = mui.RaisedButton;

App = React.createClass({
    render: function() {
        return (
            <div>App
                <RaisedButton label="BUTTON" />
                <DatePicker />
                <mui.List>
                    <mui.ListItem primaryText="item" />
                </mui.List>
            </div>
        );
    }
});
// meteor-react-material.html
...
<div id="mountNode"></div>
...

run it

meteor
原文链接:https://www.f2er.com/react/307636.html

猜你在找的React相关文章