React.jsは動作しません

Question

みんな） React.jsでいくつかのToDoリストをやっています。私のtodoリストでは、人はいくつかの項目を追加したり削除したりできるはずです。 しかし、最初はreact.jsの項目をいくつか行いました。 残念ながら、これらの項目は機能しません。コンソールに予期しないトークンがあり、ReactDOMという単語に大文字のRが表示されます。ここで

は私のコードです：

"use strict"; 

    class List extends React.Component ({ 
     displayName: "List", 

     function() { 
      return React.createElement(
       "div", 
       null, 
       React.createElement(
        "svg", 
        { style: "width:20px;height:20px", viewBox: "0 0 24 24" }, 
        React.createElement("path", { fill: "#000000", d: "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" }) 
       ), 
       React.createElement(
        "p", 
        null, 
        this.props.item 
       ) 
      ); 
     } 
    }) 


ReactDOM.render(React.createElement(
    "div", 
    null, 
    React.createElement("List", { item: "Feed the dog" }), 
    React.createElement("List", { item: "Build the house" }), 
    React.createElement("List", { item: "Wash the car" }), 
    React.createElement("List", { item: "Make some shopping" }), 
    React.createElement("List", { item: "Build a list" }) 
    ), 
    document.getElementById("list")); 

私はとても驚きました。私は本当にdidn;この単語の大きなRが間違いであることを知りません。そして、チュートリアルは私に同意します。 または私は正しくないですか？私のミスはどこですか？

Answer 1

React.createClass()とextends React.Componentが混ざっているようです。そう、あなたが得ることができる、

var List = React.createClass ({ 
    displayName: "List", 

    function() { 
    return React.createElement(
     "div", 
     null, 
     React.createElement(
      "svg", 
      { style: "width:20px;height:20px", viewBox: "0 0 24 24" }, 
      React.createElement("path", { fill: "#000000", d: "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" }) 
    ), 
     React.createElement(
      "p", 
      null, 
      this.props.item 
    ) 
    ); 
    } 
}); 


ReactDOM.render(React.createElement(
"div", 
null, 
React.createElement("List", { item: "Feed the dog" }), 
React.createElement("List", { item: "Build the house" }), 
React.createElement("List", { item: "Wash the car" }), 
React.createElement("List", { item: "Make some shopping" }), 
React.createElement("List", { item: "Build a list" }) 
), 
document.getElementById("list")); 

それは非常にあなたの代わりにJSXと一緒のクラスに反応作成するためのJavaScriptクラスを使用をお勧めします。あなたはReact.createClass()（which is no longer recommended）を使用しようとしている場合、それは次のようになります

class List extends React.Component { 

    render() { 
    return (
     <div> 
     <svg 
      style={{width: '20px', height: '20px'}} 
      viewBox="0 0 24 24"> 
      <path 
       fill='#000000' 
       d='M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /> 
     </svg> 
     <p>{this.props.item}</p> 
     </div> 
    )}; 
} 


let element = (
    <div> 
    <List item="Feed the dog" /> 
    <List item="Build the house" /> 
    <List item="Wash the car" /> 
    <List item="Make some shopping" /> 
    <List item="Build a list" /> 
    </div> 
); 

ReactDOM.render(element, document.getElementById('list')); 

の作業例：何かhttps://codepen.io/anon/pen/xdrdwE