Отображение адаптивного текста в нескольких столбцах и строках в ReactJS

Question

В процессе изучения базового ReactJS я пытаюсь создать следующий макет, но мне не удалось найти решение, которое приводит меня к этому конкретному макету, который при открытии на рабочем столе будет выглядеть следующим образом (но, поскольку он отзывчивый надеюсь, он будет перенастроен на экран):

Это код, который я пытаюсь, но не знаю, как перевести его на responsive желаемую схему.

import React from 'react';

function Header() {
  return (
    <div> I am the header</div>
  )
}

   // each footer is 50% wide
function Footer1() {
  return (
    <div> I am footer 1</div>
  )
}

function Footer2() {
  return (
    <div> I am footer 2</div>
  )
}

// left col has with 84%
function LeftCol() { 
  return (
    <div>
      <form>
        <div>col1 width 84%</div>
        <div>col1 row1</div>
      </form>
    </div>
  )
}

function RightCol() { 
  return (
    <div>
      <form>
        <div>col2 width 16%</div>
        <div>col2 row1</div>
      </form>
    </div>
  )
}

function App() {
  return (
    <div>
      <Header />
      <LeftCol />
      <RightCol />
      <Footer1 />
      <Footer2 />
    </div>
  );
}

export default App;

Edit: Я пытаюсь добиться этого с помощью минимального HTML и CSS, но с помощью ReactJS и Material UI в качестве учебного упражнения.

Answer 1

Вам может помочь что-то подобное.

Посмотрите, подходит ли вам это:

ПРИМЕЧАНИЕ: Это очень простая интеграция между React и CSS.Если у вас нет опыта работы с CSS, я предлагаю вам пройти курс W3Schools CSS .Как только вы это сделаете, я предлагаю вам взглянуть на Styled Components , который, на мой взгляд, является гораздо более приятным способом обработки CSS в компонентах React.Также приоритет для изучения Реагировать основы в официальной документации и других учебных пособий.

SNIPPET:

function Header() {
  return(
    <div className="header">I am Header</div>
  );
}

function Main() {
  return(
    <div className="main">
      <LeftCol/>
      <RightCol/>
    </div>
  );
}

function LeftCol() { 
  return (
    <div className="leftCol">
      <div>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>      
      </div>
    </div>
  );
}

function RightCol() { 
  return (
    <div className="rightCol">
      <div>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  );
}

function Footer() {
  return(
    <div className="footer">I am Footer</div>
  );
}

function App() {
  return(
    <div>
      <Header/>
      <Main/>
      <Footer/>
    </div>
  );
}

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

.header {
  width: 100%;                 
  height: 80px;                
  display: flex;               
  align-items: center;         
  justify-content: center;     
  font-weight: bold;           
  background-color: lightblue;
}

.main {
  width: 100%;
  /*height: 200px;*/
  display: flex;
  
}

.leftCol {
  flex: 0 0 84%;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rightCol {
  flex: 0 0 16%;
  background-color: lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
}



.footer {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: salmon;
  font-weight: bold;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>