React - MVC Project ES5 & ES6 Classes Example (JSX)

環境

• VS2013
• React V.14.7

Skill

• reactjs

操作步驟

• Create Project

  

  

• Add Home Controller

  

• Add View

  

• Nuget Install React JS

  

• View Include babel-core 5.8.34 js

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser-polyfill.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
  

• View include React js

    <script src="~/Scripts/react/react.js"></script>
    <script src="~/Scripts/react/react-dom.js"></script>
  

• html tag

    <div id="root">
        <!-- This div's content will be managed by React. -->
    </div>
  

• ES5

    <script  type="text/babel">
        var Message = React.createClass({
            render: function () {
                return  (<h3>Hello, world!</h3>)
            }
        });
      
        ReactDOM.render(<Message/>,document.getElementById('root'));
    </script>
  

• ES6

    <script  type="text/babel">
        class Message extends React.Component{
            render(){
                return <h3>Hello, world!</h3>
            }
        }
      
        ReactDOM.render(<Message/>,document.getElementById('root'));
    </script>
  

• View JS & Result

  

  

參考資料

• [Bebel] React on ES6+
• 一看就懂的 React ES5、ES6+ 常見用法對照表

延伸閱讀

• ECMAScript 6 入門 - Classes