Eric Masiello ericmasiello

## special-button-explainer.jsx
// 1. render the Title as SpecialButton
<Title as={SpecialButton}>Click Me</Title>

// 2. Inside the Title function we destructure the `as` and `children` props
// `children` === 'Click Me'
// `as` / `Component` === SpecialButton

// 3. The Title Component now effectively returns this:
<SpecialButton className="title">Click Me</SpecialButton>

## SpecialButton.jsx
import React from 'react';
import Title from './Title';

export function SpecialButton(props) {
 const { className, children } = props;
 return (
  <button onClick={() => alert('sup?')} className={className}>
   {children}
  </button>
 );

## title-to-h3.jsx
<Title as="h3">I'm an h3</Title>
// ⬇ ⬇ ⬇ ⬇
<h3 className="title">I'm an h3</h3>

## h1.jsx
<h1 className="title">{children}</h1>

## Title.jsx
import React from 'react';

function Title(props) {
 const { as: Component, children } = props;
 return <Component className="title">{children}</Component>
}

Title.defaultProps = {
 as: 'h1',
};

## title-usage.jsx
<Title as="h2">I am a title rendered as an h2</Title>
<Title as="h3">I am a title rendered as an h3</Title>

## demo.html
<body>
 <div id="main">
  <section>
   <h1 class="title">Demo</h1>
  </section>
 </div>
</body>

## Demo.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Title from './Title';

function Demo() {
  return(
    <section>
      <Title>Demo</Title>
    </section>
  );

## Title.jsx
import React from 'react';

function Title(props) {
 return <h1 className="title">{props.children}</h1>
}

export default Title;

## small.css
.small {
  font-size: 0.875rem; /* 14px / 16px */
  line-height: 1.4285714286; /* 20px / 14px */
}
	// 1. render the Title as SpecialButton
	<Title as={SpecialButton}>Click Me</Title>

	// 2. Inside the Title function we destructure the `as` and `children` props
	// `children` === 'Click Me'
	// `as` / `Component` === SpecialButton

	// 3. The Title Component now effectively returns this:
	<SpecialButton className="title">Click Me</SpecialButton>
	import React from 'react';
	import Title from './Title';

	export function SpecialButton(props) {
	const { className, children } = props;
	return (
	<button onClick={() => alert('sup?')} className={className}>
	{children}
	</button>
	);
	<Title as="h3">I'm an h3</Title>
	// ⬇ ⬇ ⬇ ⬇
	<h3 className="title">I'm an h3</h3>
	import React from 'react';

	function Title(props) {
	const { as: Component, children } = props;
	return <Component className="title">{children}</Component>
	}

	Title.defaultProps = {
	as: 'h1',
	};
	<Title as="h2">I am a title rendered as an h2</Title>
	<Title as="h3">I am a title rendered as an h3</Title>
	<body>
	<div id="main">
	<section>
	<h1 class="title">Demo</h1>
	</section>
	</div>
	</body>
	import React from 'react';
	import ReactDOM from 'react-dom';
	import Title from './Title';

	function Demo() {
	return(
	<section>
	<Title>Demo</Title>
	</section>
	);
	import React from 'react';

	function Title(props) {
	return <h1 className="title">{props.children}</h1>
	}

	export default Title;
	.small {
	font-size: 0.875rem; /* 14px / 16px */
	line-height: 1.4285714286; /* 20px / 14px */
	}