import React from 'react';
import './style.css';

export const App: React.FC = () => {
  const containerStyle: React.CSSProperties = {
    backgroundImage:
      "url('https://img.freepik.com/free-vector/creative-abstract-quantum-illustration_23-2149236239.jpg')",
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    padding: '50px',
    color: 'white',
    height: '100vh',
  };
  return (
    <div style={containerStyle}>
      <h1>Hello React!</h1>
    </div>
  );
};

React Import: The code begins by importing the React library, which is a popular JavaScript library used to build user interfaces for web applications.
CSS Import: It also imports a CSS file named 'style.css'. This file likely contains styling information to make our web app look a certain way.
Functional Component: The main part of the code defines a functional component named App. In simple terms, think of a component as a building block for a web application. This App component is like a box that we can place on our web page. h1 Element: Inside the App component, there's a piece of code that looks like HTML, but it's actually called JSX (JavaScript XML). It defines a heading element h1 with the text "Hello React!". Return Statement: The return statement inside the App component specifies what the component will display. In this case, it returns the JSX code containing the h1 element wrapped in a div element.

Open This Example In New Tab- Fullscreen