uyriq/composition-components-in-react.markdown

## composition-components-in-react.markdown

      
    Raw
  

              composition-components-in-react.markdown
            
          
    composition components in react

A Pen by uyriq on CodePen.
License.

  
## index.html
<html>
	<head>
		<meta charset="UTF-8" />
    <link rel="stylesheet" href="./fonts/fonts.css" />
    <link rel="stylesheet" href="./style.css" />
    <script src="https://code.s3.yandex.net/react/libs/react.development.js"></script>
    <script src="https://code.s3.yandex.net/react/libs/react-dom.development.js"></script>
    <script src="https://code.s3.yandex.net/react/libs/babel.min.js"></script>
	</head>
	<body>
	<div id="root"></div>

  <script type='text/jsx' src="task.jsx"></script>
      <img src="./images/bg.png"/>
	</body>
</html>

## script.babel
                                          class Card extends React.Component {
  render() {
    const data = {
      id: 120323,
      name: 'Герметичные валенки с магнитной подошвой',
      priceInfo: {
        price: 29224,
        currency: 'руб',
        taxes: 20
      },
      properties: {
        color: 'серый',
        weight: 2.4,
        material: 'шерсть'
      },
      info: {
        fullDecription: `Валенки, в которых не страшно передвигаться даже снаружи космической станции.
          Магнитная подошва позволит без страха шагать по поверхности корабля, а многослойный
          материал StarTex удерживает тепло внутри обуви даже в открытом космосе.`
      },
      category: 'Обувь',
      gender: 'Унисекс'
    };

    return (
      <article className="main">
        <h1 className="main__title">{data.name}</h1>
        <div className="main__container">
          <p className="main__text">{`Цена: ${data.priceInfo.price} ${
            data.priceInfo.currency
          }.`}</p>
          <p className="main__text">{`Налог: ${data.priceInfo.taxes}%`}</p>
        </div>
        <div className="main__container">
          <h3 className="main__subtitle">Характеристики:</h3>
          <p className="main__text">{`Цвет: ${data.properties.color}`}</p>
          <p className="main__text">{`Материал: ${data.properties.material}`}</p>
          <p className="main__text">{`Вес: ${data.properties.weight} кг`}</p>
        </div>
        <div className="main__container">
          <h3 className="main__subtitle">Описание:</h3>
          <p className="main__text">{data.info.fullDecription}</p>
        </div>
        <div className="main__tags">
          <p className="main__tag">{data.category}</p>
          <p className="main__tag">{data.gender}</p>
        </div>
      </article>
    );
  }
}

ReactDOM.render(<Card />, document.querySelector('#root'));

## style.css
#root {
  max-width: 50%;
  margin: 0 auto;
  padding: 88px 40px;
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
}

body {
  background-color: #000;
}

.main {
  background-color: #121216;
  border-radius: 40px;
  padding: 40px;
  color: #FFF;
  font-style: normal;
  font-size: 20px;
  line-height: 24px;
}

.main__title {
  font-weight: bold;
  font-size: 28px;
  line-height: 32px;
  margin: 0 0 24px;
}

.main__container {
  margin-bottom: 24px;
}

.main__subtitle {
  font-weight: bold;
  margin: 0 0 8px;
}

.main__text {
  font-weight: normal;
  margin: 0 0 4px;
}

.main__text:last-child {
  margin: 0;
}

.main__tags {
  display: flex;
}

.main__tag {
  padding: 8px 16px;
  background-color: #212131;
  border-radius: 100px;
  margin: 0;
  margin-right: 8px;
}

.main__tag:last-child {
  margin: 0;
}

@media screen and (max-width: 1000px) {
  #root {
    max-width: 100%;
  }
}
	<html>
	<head>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="./fonts/fonts.css" />
	<link rel="stylesheet" href="./style.css" />
	<script src="https://code.s3.yandex.net/react/libs/react.development.js"></script>
	<script src="https://code.s3.yandex.net/react/libs/react-dom.development.js"></script>
	<script src="https://code.s3.yandex.net/react/libs/babel.min.js"></script>
	</head>
	<body>
	<div id="root"></div>

	<script type='text/jsx' src="task.jsx"></script>
	<img src="./images/bg.png"/>
	</body>
	</html>
	class Card extends React.Component {
	render() {
	const data = {
	id: 120323,
	name: 'Герметичные валенки с магнитной подошвой',
	priceInfo: {
	price: 29224,
	currency: 'руб',
	taxes: 20
	},
	properties: {
	color: 'серый',
	weight: 2.4,
	material: 'шерсть'
	},
	info: {
	fullDecription: `Валенки, в которых не страшно передвигаться даже снаружи космической станции.
	Магнитная подошва позволит без страха шагать по поверхности корабля, а многослойный
	материал StarTex удерживает тепло внутри обуви даже в открытом космосе.`
	},
	category: 'Обувь',
	gender: 'Унисекс'
	};

	return (
	<article className="main">
	<h1 className="main__title">{data.name}</h1>
	<div className="main__container">
	<p className="main__text">{`Цена: ${data.priceInfo.price} ${
	data.priceInfo.currency
	}.`}</p>
	<p className="main__text">{`Налог: ${data.priceInfo.taxes}%`}</p>
	</div>
	<div className="main__container">
	<h3 className="main__subtitle">Характеристики:</h3>
	<p className="main__text">{`Цвет: ${data.properties.color}`}</p>
	<p className="main__text">{`Материал: ${data.properties.material}`}</p>
	<p className="main__text">{`Вес: ${data.properties.weight} кг`}</p>
	</div>
	<div className="main__container">
	<h3 className="main__subtitle">Описание:</h3>
	<p className="main__text">{data.info.fullDecription}</p>
	</div>
	<div className="main__tags">
	<p className="main__tag">{data.category}</p>
	<p className="main__tag">{data.gender}</p>
	</div>
	</article>
	);
	}
	}

	ReactDOM.render(<Card />, document.querySelector('#root'));
	#root {
	max-width: 50%;
	margin: 0 auto;
	padding: 88px 40px;
	font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
	}

	body {
	background-color: #000;
	}

	.main {
	background-color: #121216;
	border-radius: 40px;
	padding: 40px;
	color: #FFF;
	font-style: normal;
	font-size: 20px;
	line-height: 24px;
	}

	.main__title {
	font-weight: bold;
	font-size: 28px;
	line-height: 32px;
	margin: 0 0 24px;
	}

	.main__container {
	margin-bottom: 24px;
	}

	.main__subtitle {
	font-weight: bold;
	margin: 0 0 8px;
	}

	.main__text {
	font-weight: normal;
	margin: 0 0 4px;
	}

	.main__text:last-child {
	margin: 0;
	}

	.main__tags {
	display: flex;
	}

	.main__tag {
	padding: 8px 16px;
	background-color: #212131;
	border-radius: 100px;
	margin: 0;
	margin-right: 8px;
	}

	.main__tag:last-child {
	margin: 0;
	}

	@media screen and (max-width: 1000px) {
	#root {
	max-width: 100%;
	}
	}