CODEWITHSUNDEEP
reactjs
HarshSharma
HarshSharma

Reputation: 660

Call two different components of react js on same html page

I am learning react.js by myself, so you may find this question a silly one. But, I want to learn concepts.

home.js

import React from 'react';
import ReactDOM from 'react-dom';

class AppStyle extends React.Component {
    render() {
        var myStyle = {
            fontSize: 100,
            color: '#FF0000'
        }
        return (
            <div>
                <h1 style = {myStyle}>Header Style</h1>
            </div>
        );
    }
}

ReactDOM.render(<AppStyle />, document.getElementById('style'));
export default AppStyle;

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        var i = 1;
        return (
            <div>
                <h1>Header</h1>
                <h2>Content</h2>
                <p data-myattribute = "somevalue">This is the content!!!</p>
                <h1>{1+1}</h1>
                <h1>{i === 1 ? 'True' : 'False'}</h1>
            </div>
        );
    }
}

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

export default App;

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="widht=device-width, initial-scale=1" />
        <title>Learn React</title>
    </head>
    <body>
        <div id="root"></div>
        <div id="style"></div>
    </body>
</html>

In my index.html, I have placed two divs, which are calling two different components, but the only first component is loaded on the page. Is there any way to call both of them? And if not then why?

Upvotes: 0

Views: 238

Answers (2)

Drew Reese
Drew Reese

Reputation: 202801

Nothing is importing and rendering Home. If you really wanted to render into two separate elements on the same page, then import Home into index.js and then you can render both.

import React from 'react';
import ReactDOM from 'react-dom';
import AppStyle from './home';

class App extends React.Component {
    render() {
        var i = 1;
        return (
            <div>
                <h1>Header</h1>
                <h2>Content</h2>
                <p data-myattribute = "somevalue">This is the content!!!</p>
                <h1>{1+1}</h1>
                <h1>{i === 1 ? 'True' : 'False'}</h1>
            </div>
        );
    }
}

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

Edit frosty-currying-wd76q

As others have pointed out though, the normal pattern is to only render a single react application per page.

Upvotes: 1

anees
anees

Reputation: 1855

Here is the pattern.

home.js

import React from 'react';
import ReactDOM from 'react-dom';

class AppStyle extends React.Component {
    render() {
        var myStyle = {
            fontSize: 100,
            color: '#FF0000'
        }
        return (
            <div>
                <h1 style = {myStyle}>Header Style</h1>
            </div>
        );
    }
}

export default AppStyle;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Home from './home';

class App extends React.Component {
    render() {
        var i = 1;
        return (
           <>
                <div>
                    <h1>Header</h1>
                    <h2>Content</h2>
                    <p data-myattribute = "somevalue">This is the content!!!</p>
                    <h1>{1+1}</h1>
                    <h1>{i === 1 ? 'True' : 'False'}</h1>
                </div>
                <Home />
           </>

        );
    }
}

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


export default App;    // not necessary since you are rendering already...

you can also create a seperate component for the code

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="widht=device-width, initial-scale=1" />
        <title>Learn React</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Upvotes: 1

Related Questions