ReactJS components are the fundamental building blocks in React. Under the hood, they are regular JavaScript functions that return HTML markup. You can consider a React component a piece of code that encapsulates related HTML, CSS & and JavaScript to achieve a specific UX goal.
To avoid the pain of imperative programming in JavaScript, that is, to manipulate HTML DOM elements using the rudimentary JavaScript DOM API, React introduced a syntax called JSX. This syntax allows HTML-like markups to be decoratively embedded inside JavaScript code. You describe what should be on the screen, and React figures out the rest.
Babel and TypeScript can compile JSX into regular JavaScript functions that web browsers understand, without needing React outside the development environment.
The JSX transformer will turn code like this:
function App() {
return <h1>Hello World</h1>;
}Into this:
// Inserted by a compiler (don't import it yourself!)
import { jsx as _jsx } from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Hello world' });
}With the introduction of JSX, React Components bear strong similarities to HTML, including markup syntax, how they are composed, and the ability to nest components. To distinguish React components from regular HTML tags, a React component name must start with a capital letter and use camel case. E.g., <Header /> instead of <header />. React treats lowercase tags as regular HTML tags by default. In addition, adjacent JSX tags must be wrapped inside a single parent tag in each component. You can use the empty tag <> and </>(a shorthand version of the <Fragment> component) to avoid unnecessarily extra tags.
React components should be kept as pure functions, meaning the same input produces the same output every time. Components should mind their own business; they should not update anything outside the scope of the components or cause unintended side effects.