Reputation: 1478
I am brand new to react with a vuejs background. I am trying to learn the same concepts like building SPAs and such within reactjs. I have a simple page where I am trying to render multiple elements or multiple components, but I am not sure how to modify the code to render multiple elements in that line.So I added myElement2, but not sure how to enable it. Also, what if it was two components instead of elements?
<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<div id="mydiv"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello World!</h1>
}
}
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
}
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('mydiv'))
</script>
</body>
</html>
Upvotes: 0
Views: 45
Reputation: 561
at first, in react, all components names must start with uppercase letters. for rendering multiple components you can return them in the render method like this
render(){
return (
<div>
<ComponentOne/>
<ComponentTwo/>
<h1>My Element</h1>
<div/>
)
}
Upvotes: 1