标签: fluxible

我正在开发一款与助焊剂配合使用的最小应用程序.几乎所有东西看起来都很清楚但有一点:脱水和再水化状态的概念.

我知道这是在客户端和服务器之间同步存储所需要的,但我不知道为什么.这条线对我来说很不清楚:

 var exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';

在server.js中(https://github.com/yahoo/fluxible/tree/master/examples/react-router)

如果你能用"更简单的单词"告诉我它意味着什么,我将非常感激.

我有:

JobScreen

handleSetView(mode, e) {
        this.setState({
            view: mode
        });
        console.log(this.state.view)
    }

    render() {
        return (

            <div className="jobs-screen">
                <div className="col-xs-12 col-sm-10 job-list"><JobList view={this.state.view} /></div>
                <div className="col-xs-12 col-sm-2 panel-container">
                    <div className="right-panel pull-right"><RightPanel handleSetView={this.handleSetView} /></div>
...
)
}

RightPanel

render() {
        return (
            <div>
                <div className="controls">
                    <span className="title">Views <img src="images\ajax-loader-bar.gif" width="24" id="loader" className={this.state.loading ? "pull-right fadeIn" : "pull-right fadeOut"}/></span>
                    <button onClick={this.props.handleSetView.bind(this, 'expanded')}><img src="/images/icons/32px/libreoffice.png" /></button>
                    <button onClick={this.props.handleSetView.bind(this, 'condensed')}><img src="/images/icons/32px/stack.png" /></button>
                    </div>
...
)}

招贤纳才

render() {
        var jobs = [];
        this.state.jobs.forEach((job) => {
            jobs.push( …

我想将静态资源复制到build文件夹,例如images和css以及资产.

我注意到在他们的示例项目中,server.js将构建文件夹映射到/ public.

server.use('/public', express.static(path.join(__dirname, '/build')))

我是不是该

一个.作为构建过程的一部分,将我的公用文件夹的webpack副本复制到构建文件夹中

湾 或者,在express中指向我的公共文件夹时设置另一个静态路由,如果对build文件夹的引用可能会引起混淆,因为它也有公共名称.

C.混合,向webpack步骤添加css处理并使处理过的css文件也进入构建文件夹,但是具有静态资产,例如未处理的图像,这些资源在单独的/ assets express.static路由中提供.

我是webpack的新手,所以不确定如何设置或如此帮助,我们将不胜感激.

webpack.config.js

var webpack = require('webpack');
var path = require('path');

var webpackConfig = {
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './client.js'
    ],
    output: {
        path: path.resolve('./build/js'),
        publicPath: '/public/js/',
        filename: 'main.js'
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loaders: [
                    require.resolve('react-hot-loader'),
                    require.resolve('babel-loader')
                ]
            },
            { test: /\.json$/, loader: 'json-loader'}
        ]
    },
    node: {
        setImmediate: false
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(), …

因此，我一直在摆弄：​​最近使用了一些同构的React + Flux，并且发现一些概念实在令人困惑。我一直在研究有关如何构造同构应用程序的最佳实践，并正在寻求建议。

假设您正在创建一个由相同的REST API支持的Web应用程序和一个移动应用程序。您是否将REST API与网络应用程序捆绑在一起？我见过有人提倡捆绑和为REST API建立单独的代码库。

任何建议或建议的阅读表示赞赏！

我目前在我的React项目中使用Twitter Typeahead,我想显示基于Typeahead的建议,但我无法使其工作.

在我的代码下面:

var Search = React.createClass({
    getInitialState: function () {
        return {query: ''};
    },
    handleChange: function (e) {
        this.setState({query: e.target.value});
    },
    componentDidMount(){
        var suggestions = {
            query: "d",
            results: [
                {name: "first"},
                {name: "second"},
                {name: "third"},
                {name: "fourth"}
            ]
        };


        var suggests = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            limit: 10,
            local: suggestions
        });

        var template = _.template('<span class="name"><%= name %></span>');

        $(React.findDOMNode(this.refs.suggestion)).typeahead({
                hint: true,
                highlight: true,
            },
            {
                name: 'suggests',
                displayKey: 'name',
                source: suggests.ttAdapter(),
                templates: {
                    suggestion: function (data) …