Question

我试图设置使用React和Thymeleaf的Spring项目。我还添加了requirejs，我尝试运行所有内容。我设法如何使用

运行所有内容

React.createClass

现在我正试图做更多的事情并做出反应＆＃39;因此，使用JSX，例如

<CommentForm />

并使用这样的反应组件：

class CommentForm extends React.Component {
    render() {
        ...
    }
}

我知道要让它工作我需要设置babel库，我不知道我该怎么做才能正常。我在google上阅读了很多文章但是所有文章都设置在node.js或webpack上（这也是某种服务器，我是对的吗？）

您知道我应该使用什么来正确配置吗？并包括一切？如果您需要我的任何文件，请告诉我，然后我会在这里添加一些代码。

Answer 1

所以最后，在用户azium的评论之后我已经设法如何做到这一点。所以我有一个结构：

js / 
       components
           comment/
               comment-box.js
       node_modules/
       lib/
       app.js
       webpack.config.jsx
       package.json

这是webpack.config.jsx：

'use strict';
import path from 'path';

module.exports =  {
    entry: './app.js',
    devtool: 'sourcemaps',
    cache: true,
    debug: true,
    output: {
        path: __dirname,
        filename: './built/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loader: 'babel'
            }
        ],
        resolve: {
            extensions: ['', '.js', '.jsx']
        }
    }
};

这是我的package.json：

{
  "name": "app",
  "version": "0.1.0",
  "description": "app",
  "dependencies": {
    "babel-cli": "^6.3.17",
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-3": "^6.3.13",
    "react": "^0.14.5",
    "react-dom": "^0.14.5",
    "rest": "^1.3.1",
    "webpack": "^1.12.2"
  },
  "babel": {
    "presets": [
      "react",
      "es2015",
      "stage-3"
    ]
  },
  "scripts": {
    "watch": "webpack --watch -d"
  },
  "devDependencies": {
    "babel-loader": "^6.2.0"
  }
}

这是一个示例组件：

'use strict';
import React from 'react';
import CommentList from './commentList';
import CommentForm from './commentForm';
import client from './../../lib/client';
class CommentBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
        handleCommentSubmit(comment)
        {
            var comments = this.state.data;
            comments.push(comment);
            this.setState({data: comments}, function () {
                $.ajax({
                    url: this.props.url,
                    dataType: 'json',
                    type: 'POST',
                    data: comment,
                    success: function (data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function (xhr, status, err) {
                        console.error(this.props.url, status, err.toString());
                    }.bind(this)
                });
            });
        }

        getCommentsFromServer()
        {
            client({method: 'GET', path: this.props.url}).done(response => {
                this.setState({data: response.entity._embedded.comments});
            });
        }
        componentDidMount()
        {
            this.getCommentsFromServer();
        }
        render()
        {
            return (
                <div className="commentBox">
                    <h1>Comments</h1>
                    <CommentList data={this.state.data}/>
                    <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
                </div>
            );
        }
    }

    export default CommentBox;

反应巴贝尔并要求配置

1 个答案: