Hello world
Create an index.html in your Desktop. You could copy paste and check your result in the browser at each step.
Hello world using html
<html>
<head></head>
<body>
<div id="app">
<h1> Hello world </h1>
</div>
</body>
</html>
Hello world using javascript
<html>
<head></head>
<body>
<div id="app">
</div>
</body>
<script>
var app = document.getElementById('app')
var ele = document.createElement('h1')
ele.textContent = "Hello world"
app.appendChild(ele)
</script>
</html>
Instead of browser creating the DOM by reading from HTML, here we create DOM element and append it to an existing DOM element.
Hello world using reactjs
<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>
</head>
<body>
<div id="app">
</div>
</body>
<script>
var app = document.getElementById('app')
var ele = React.createElement('h1', null, 'Hello world')
ReactDOM.render(ele, app)
</script>
</html>
Reactjs is a simple JS library, there is nothing special about it. If you know JS (latest features of it - es5, es6..) you are ready 90%. 10% is the react terminology or the way of doing.
HTML tag inside Reactjs
<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>
</head>
<body>
<div id="app">
</div>
</body>
<script>
var app = document.getElementById('app')
var ele = <h1>Hello world</h1>
ReactDOM.render(ele, app)
</script>
</html>
The above code won't work in the browser. But it would be nice to have it working instead of writing React.createElement every single time. So we need some library which transform this html style tag into React.createElement syntax. This html syntax which gets converted back to react or js syntax is called jsx.
Reactjs with working html tag
<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>
ReactDOM.render(ele, app)
</script>
</html>
We have included the babel library and changed the script tag type