how to render with ReactDOM.render() using ES6?

Question

creating class component with ES5 would be like this

var someClass = React.createClass({});

and rendering it using

ReactDOM.render(<someClass/>, elementSelector);

creating class component with ES6 somehow be like this

class someAnotherClass extends React.Component{
     constructor(){
          super();
     }
     render(){}
}

how do we render with ES6?

Exactly the same way. Note that components must be captialized. See the documentation: facebook.github.io/react/docs/rendering-elements.html, facebook.github.io/react/docs/components-and-props.html — Felix Kling
– Felix Kling, Commented Oct 29, 2016 at 7:28

Fazal Rasel · Accepted Answer · 2016-10-29 07:37:57Z

2

Step 1: create Component-

///dashboard.js
import React from 'react';
class Dashboard extends React.Component {    
   render() {
      return (
         <div>
            Dash board
         </div>
      );
   }
}

export default Dashboard;

Step 2: mount it to DOM as-

//index.js
import {render} from 'react-dom';
import Dashboard from './dashboard';

render(<Dashboard/>, document.getElementById('target');

edited Oct 29, 2016 at 7:37

answered Oct 29, 2016 at 7:27

Fazal Rasel

4,5262 gold badges23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felix Kling Over a year ago

So you are saying... in exactly the same way? Or what are you trying to say with that answer?

Collectives™ on Stack Overflow

how to render with ReactDOM.render() using ES6?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related