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

Было несколько незначительных синтаксических ошибок, удерживающих вас. Нижний регистр для класса, верхний регистр для именования компонента и закрытие компонента, который нужно визуализировать. Этот код ниже работает в вашем 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')); 

Также обратите внимание, что я назвал класс SecoundComponent с капиталом С.

Answer 3

Во-первых, вы должны использовать ReactDOM, чтобы сделать свой компонент в браузер не React. Вы код:

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

Но в последних версиях React (выше 0,14), оно должно быть:

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

Чтобы сделать его работу вы можете добавить в свой library HTML.

Во-вторых, вы должны закрыть свой компонент, если у него нет дочерних компонентов: <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.