How to fix the beginner's ReactJS error?

问题

I'm beginner in ReactJS and am trying to run the following code:

@{
    ViewBag.Title = "Index";
}

<h2>Hello World-React JS</h2>

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

<script type="text/javascript">
    var HelloWorldComponent = React.createClass({
        getInitialState: function () {
            return {
                serverMessage: ''
            };
        },
        componentDidMount: function () {
            $.get('/Home/getmessage', function (result) {
                if (this.isMounted) {
                    this.setState({
                        serverMessage: result
                    });
                }
            }.bind(this));
        },
        render: function () {
            return ("<h1>{this.state.serverMessage}</h1>");
        }
    });
    ReactDOM.render(<HelloWorldComponent />, document.getElementById("helloworldcontainer"));
</script>

<div id="helloworldcontainer"></div>

As you can see this is VS2017 MVC simple test application.

Actually, in VS editor I have some complaints that is shown on the screen shot bellow:

How to fix it and run it?

回答1:

Change your script type as <script type="text/babel">

sample code :

<html>

<head>
    <title>demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</head>
<body>
    <div id="container"/></div>

    <script type="text/babel">
        class MessageBox extends React.Component {
            constructor(props){
            super(props);
            }
            render() {
                return (
                    <div>
                        <div className={`messageBox ${this.props.type} || hidden`}>
                            {this.props.message}
                        </div>
                    </div>
                );
            }
        } 

    class NameInput extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                message: {
                type: "success",
                body: "Now my message is in NameInput's state"
                }
            }
            this.buttonClicked = this.buttonClicked.bind(this);
        }

        buttonClicked(evt) {
            alert("hi");
        }

        render() {

            let msg = this.state.message;

            return (
                <div>
                <label>Name: <input type="text" /></label>
                <button onClick={this.buttonClicked}>Click me!</button>

                <MessageBox type={msg.type} message={msg.body}/>
                </div>
            )
            }
    }

    ReactDOM.render(
        <NameInput />,
        document.getElementById('container')
    );
</script>
</body>
</html>

Hope this helps.

as @Adeel Imran suggests, For just checking how react works, this is fine. For future development use babel-cli and try to write a component in a separate file.

来源：https://stackoverflow.com/questions/48879281/how-to-fix-the-beginners-reactjs-error

标签

reactjs

asp.net-mvc-5