整合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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom