帮我用react写一个侧边栏在右边响应式布局

好的，以下是一个简单的示例代码：

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

function App() {
  return (
    <div className="App">
      <div className="content">这是主要内容区域</div>
      <div className="sidebar">这是侧边栏</div>
    </div>
  );
}

export default App;

接下来，我们给这个侧边栏加上响应式布局。我们可以使用CSS的`@media`查询来实现。

.App {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.content {
  flex: 1;
  background-color: #f5f5f5;
}

.sidebar {
  width: 200px;
  background-color: #ddd;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 768px) {
  .App {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }
}

我们在`@media`查询中设置了一个最大宽度为768px的条件，当屏幕宽度小于等于768px时，将主要内容区域和侧边栏的`flex-direction`属性修改为`column`，并将侧边栏的宽度设置为100%。这样就可以实现响应式布局了。

希望这个示例能够帮到你！