Multiple elements in JSX
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/babel">
var app = document.getElementById('app')
var ele = <h1>Hello world</h1>
var para = <p> This is going to be awesome </p>
var parent = <div>{ele} {para}</div>
ReactDOM.render(parent, app)
</script>
</html>
Please try without the curly braces to see what happens. So far we saw how to create react dom elements and how to finally render into an actual DOM element.
Next, you to need learn 3 things, then you're done learning Reactjs. The three things are:
- Component
- State
- Lifecycle methods
What is a component?