Eric Masiello ericmasiello

💃

Party.

ericmasiello / special-button-explainer.jsx

Created March 6, 2020 21:37

	// 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>

ericmasiello / SpecialButton.jsx

Created March 6, 2020 21:36

	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>
	);

ericmasiello / title-to-h3.jsx

Created March 6, 2020 21:35

ericmasiello / h1.jsx

Created March 6, 2020 21:35

<h1 className="title">{children}</h1>

ericmasiello / Title.jsx

Created March 6, 2020 21:34

	import React from 'react';

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

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

ericmasiello / title-usage.jsx

Created March 6, 2020 21:33

	<Title as="h2">I am a title rendered as an h2</Title>
	<Title as="h3">I am a title rendered as an h3</Title>

ericmasiello / demo.html

Created March 6, 2020 21:33

ericmasiello / Demo.jsx

Created March 6, 2020 21:32

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

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

ericmasiello / Title.jsx

Created March 6, 2020 21:32

	import React from 'react';

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

	export default Title;

ericmasiello / small.css

Created March 6, 2020 21:10