Two Ways of rendering in React Examples

Two Ways of rendering in React Examples

1 - Render twice

HTML

<div id="p1"></div>
<div id="p2"></div>

CSS

.person {
    display: inline-block;
    margin: 10px;
    border: 1px solid #eee;
    box-shadow: 0 2px 2px #ccc;
}

JAVASCRIPT (Babel)

function Person(props) {
    return (
        <div className='person">
            <h1>{props.name}</h1>
            <p>Age:{props.age}</p> 
        </div>
    );
}
ReactDOM.render(<Person name="VK" age="29" />,
document.querySselector('#p1'));

ReactDOM.render(<Person name="HK" age="28" />,
document.querySselector('#p2'));

2 Render all at once

HTML

<div id="app"></div>

CSS

.person {
    display: inline-block;
    margin: 10px;
    border: 1px solid #eee;
    box-shadow: 0 2px 2px #ccc;
}

JAVASCRIPT (Babel)

function Person(props) {
    return (
        <div className='person">
            <h1>{props.name}</h1>
            <p>Age:{props.age}</p> 
        </div>
    );
}

var app = (
    <div>
        <Person name="VK" age="29" />
        <Person name="HK" age="28" />
    </div>
);

ReactDOM.render(app,
document.querySselector('#app'));