Here are some key features and concepts related to React:

1. Component-Based: React uses a component-based architecture, where UIs are built using reusable components. Components encapsulate the structure, behavior, and appearance of different parts of the UI.
2. Declarative: React employs a declarative programming style, where developers describe the desired UI state, and React handles the rendering of components based on changes to that state. This approach simplifies UI development by abstracting away the DOM manipulation details.
3. Virtual DOM: React utilizes a virtual DOM (Document Object Model) to optimize UI rendering performance. Instead of directly updating the actual DOM for every change, React updates a virtual representation of the DOM and then calculates the most efficient way to apply those changes to the real DOM.
4. JSX: JSX is a syntax extension for JavaScript that allows developers to write HTML-like code directly within JavaScript. JSX makes it easier to write and visualize UI components, as it combines HTML structure with JavaScript logic.
5. One-Way Data Flow: React follows a one-way data flow, where data flows down from parent components to child components. This ensures predictable data flow and helps maintain the integrity of the application’s state.
6. Unidirectional Data Binding: React implements unidirectional data binding, meaning that data changes in the application trigger re-renders of the affected components. This approach helps in managing state changes efficiently.
7. Component Lifecycle Methods: React components have lifecycle methods that allow developers to hook into different stages of a component’s life, such as mounting, updating, and unmounting. These lifecycle methods enable developers to perform actions like fetching data, handling state changes, and cleaning up resources.

JSX

JSX resembles HTML syntax but is actually a syntactic sugar that gets transformed into standard JavaScript function calls by tools like Babel during the build process. Here’s an example of JSX code:

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, JSX!</h1>
      <p>This is a JSX example.</p>
    </div>
  );
};

export default App;

When this JSX code is transformed into JavaScript, it becomes something like:

import React from 'react';

const App = () => {
  return React.createElement(
    'div',
    null,
    React.createElement('h1', null, 'Hello, JSX!'),
    React.createElement('p', null, 'This is a JSX example.')
  );
};

export default App;

Root element

After we connect the React library all we need to do is to set a root element.

Creating a root element:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( ... );

Strict mode

StrictMode is a tool for highlighting potential problems in an application.

import React from 'react';

function App() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}