What is JSX?

JSX stands for javascript XML and is a syntax extension to JavaScript. It looks like HTML but it's not. React doesn’t require using JSX, but it is recommended as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

What are “components”?

Components let us separate concerns so that each entity is responsible for doing one thing instead of separating markup in HTML, CSS, and js files.

So how does React work?

React creates a virtual DOM or as we call it the 'React DOM' which serves as a middle-man that lets the developer manipulate it. Then, React compares the real DOM to the react DOM. React DOM takes care of updating the DOM to match the React elements. It compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.