CODEWITHSUNDEEP
reactjs
Jakub Pro
Jakub Pro

Reputation: 163

React.js index.js as a class?

Is it possible to declare index.js as a class? I'm using https://github.com/facebookincubator/create-react-app

which index.js is:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';


/*
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
*/

class Apps extends Component {
  ReactDOM.render(
      <div className="App">
        <p> hello </p>
      </div>
  );
}

The commented out code is what was before and class Apps is what I want to achieve.

Regards,

Upvotes: 0

Views: 2008

Answers (1)

rishat
rishat

Reputation: 8376

The lines

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

are the entry point of your React app. It says "take all that hierarchy of components composition, render them and mount to a certain node". It's an imperative statement that gets called as soon as code execution reaches this point. This is why you see the app working in your browser.

Putting this instruction into a class declaration would mean: "here's a class that would take all the hierarchy of components...". The problem is, it would never get executed, just as a function declaration doesn't make this function execute.

There is no need to put call to ReactDOM.render into any function or class (which is, again, a function declaration with nicer syntax). Let it stay in global scope, it's unlikely to cause any trouble at any point.

Upvotes: 1

Related Questions