#app.js

import React, { useState } from 'react';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  const [userName, setUserName] = useState("Alice");

  return (
    <div>
      <h1>Welcome to My React App</h1>
      <Home name={userName} />
      <About />
      <Contact email="alice@example.com" />
    </div>
  );
}

export default App;

#home.js

import React from 'react';

function Home(props) {
  return (
    <div>
      <h2>Home</h2>
      <p>Hello, {props.name}! Welcome to the Home page.</p>
    </div>
  );
}

export default Home;

#About.js

import React from 'react';

function About() {
  return (
    <div>
      <h2>About</h2>
      <p>This is a sample React application using components, props, and state.</p>
    </div>
  );
}

export default About;

#contact.js
import React, { useState } from 'react';

function Contact(props) {
  const [message, setMessage] = useState("");

  const handleInput = (e) => {
    setMessage(e.target.value);
  };

  return (
    <div>
      <h2>Contact</h2>
      <p>Email us at: {props.email}</p>
      <input type="text" placeholder="Your message" value={message} onChange={handleInput} />
      <p>Your message: {message}</p>
    </div>
  );
}

export default Contact;