React hello worldがES6で動作しない

Question

私のコードで何が問題になっていますか？ jsbinのコンソールにエラーは表示されません。

http://jsbin.com/susumidode/edit?js,console,output

Class secondComponenent extends React.Component { 
    render(){ 
    return (
     <p>My id is: {this.props.id}</p> 
    ); 
    } 
} 


React.render(
    <secondComponenent id="abc">, 
    document.getElementById('react_example') 
); 

そしてまたどのようReact.renderで複数のコンポーネントをレンダリングしますか（）？

Answer 1

2つの軽微な構文エラーがありました。クラスの小文字、コンポーネントの名前を付ける大文字、レンダリングするコンポーネントを閉じる。このコードはJSBinで動作します。

class SecondComponent extends React.Component { 
    render(){ 
    return (
     <p>My id is: {this.props.id}</p> 
    ); 
    } 
} 


React.render(
    <SecondComponent id="abc" />, 
    document.getElementById('react_example') 
); 

Answer 2

小道具を使用する場合は、コンストラクタが必要です（この回答の下のコメントを参照してください）。

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 

class SecoundComponent extends Component { 
    constructor(props) { 
    super(props); 

    this.props = props; 
    } 

    render() { 
    return (
     <p>My id is: {this.props.id}</p> 
    ) 
    } 
} 

render(<SecoundComponent id="123" />, document.getElementById('react_example')); 

はまた、資本S.

Answer 3

まずで、私はクラスSecoundComponentの名前ことに注意してください、あなたはブラウザではないReactにコンポーネントをレンダリングするためにReactDOMを使用する必要があります。

React.render(
    <secondComponenent id="abc" />, 
    document.getElementById('react_example') 
); 

しかし（0.14以上）Reactの最近のバージョンではそれがなければなりません： あなたのコードがある

ReactDOM.render(
    <secondComponenent id="abc" />, 
    document.getElementById('react_example') 
); 

それはあなたがあなたのhtmlにこのlibraryを追加することができます動作するように。

次のような子コンポーネントがない場合は、コンポーネントを終了する必要があります。<secondComponent id="abc" />、<secondComponent id="abc">のように記述します。

反応で複数のコンポーネントをレンダリングするために、あなたはこのような例のための単一の親コンポーネントでそれらをラップする必要があります。

ReactDOM.render(
    <div> 
     <firstComponenent id="abc" /> 
     <secondComponenent id="abc" /> 
    </div>, 
    document.getElementById('react_example') 
); 

P.S：また、@ alexi2と言う：class SomeComponentないClass SomeComponent。