React.js, What the hell is this!!!

React is a JavaScript library for building user interfaces. It’s used to design web apps. It is a declarative language for HTML UIs that represent dynamic data. It creates a virtual DOM and manipulates the HTML DOM in any UI changes.

Raw Code vs React Code:

document.getElementById(‘title’).innerHTML = `
<h1>
Hello HTML
</h1>
`;
ReactDOM.render(
React.createElement(
'h1',
null,
'Hello React',
),
document.getElementById('title'),
);

Getting Started

To create a react app, open the terminal in a specific directory.

npx create-react-app your-app

after finished the process:

cd your-app
npm start

Folder Structure

your-app/
README.md
node_modules/
package.json
public/
index.html [This is the page template]
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js [This is the javascript entry point]
logo.svg

React supports a special type of js code. It’s called JSX.
Example:

const title = <h1>This is a Title</h1>

JavaScript XML(JSX) is a extension version of the JavaScript language syntax. We can write XML-like code for elements and components. JSX tags have a tag name, attributes, and children.
It’s not necessary to write JSX code in React Application. But, JSX makes your react code simpler and elegant. JSX transpiles to pure JavaScript which is understood by the browsers.