React Hello World不适用于ES6

Question

What's wrong with my code? I see no error in the console of 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')
);

And also how to render multiple component in React.render()?

Answer 1

There were a couple of minor syntax errors holding you back. Lower case for class, upper case for naming the component, and closing off the component to be rendered. This code below works in your 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

First, you have to use ReactDOM to render your component to the browser not React . You code is:

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

But in recent versions of React (above 0.14) it must be:

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

To make it work you can add this library to your html.

Second, you must close your component when it hasn't child components like this: <secondComponent id="abc" /> , your writing like this: <secondComponent id="abc"> .

In order to render multiple components in react, you have to wrap them with a single parent component for example like this:

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

PS : Also, as @alexi2 says: class SomeComponent not Class SomeComponent .

Answer 3

If you wish to use props, you (may) need a constructor (please see the comments below this answer).

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'));

Also note that I named the class SecoundComponent , with capital S.