给我一个完整的包含前后端的demo

创建一个包含前端和后端的完整项目示例，通常涉及到前端技术如HTML、CSS、JavaScript（配合框架如React或Vue）和后端技术如Node.js + Express（用于服务器）或Java + Spring Boot（用于服务端）。这里是一个基于Express + React的简单例子，我们将构建一个简单的“Hello World”应用：

**前端（React）部分：**

1. 安装依赖：

   npm init react-app my-project
   cd my-project

2. 在`src/App.js`中，创建基本的React组件：

   import React from 'react';

   function App() {
     return (
       <h1>Hello, {window.location.hostname}</h1>
     );
   }

   export default App;

3. 修改`index.js`导入App组件并渲染：

   ReactDOM.render(<App />, document.getElementById('root'));

4. 添加样式（如有必要）：

   /* src/index.css */
   h1 {
     color: blue;
   }

**后端（Node.js + Express）部分：**

1. 初始化后端项目：

   mkdir backend
   cd backend
   npm init -y
   npm install express body-parser cors

2. 创建`server.js`文件，配置Express：

   const express = require('express');
   const bodyParser = require('body-parser');
   const cors = require('cors');

   const app = express();

   app.use(bodyParser.json());
   app.use(cors());

   app.get('/', (req, res) => {
     res.send({ message: 'Hello from the server!' });
   });

   const PORT = process.env.PORT || 5000;
   app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

在这个例子中，当你启动前端应用，它会发送GET请求到`http://localhost:5000/`，后端会返回一个消息。这只是一个非常基础的交互，实际项目中你会看到更复杂的路由、API调用以及数据交换。