dailylog 03-05-21
1 minute read
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<script type="text/babel">
function CharacterCount({ text }) {
// const count = text.length ? text.length : 'no';
return (
<div>
{`The text ${text} has `}
{text.length ? <strong>{text.length}</strong> : 'no'}
{' characters'}
</div>
);
// return <div>{`The text "${text}" has ${text.length} characters`}</div>;
// return null;
}
const element = (
<>
<CharacterCount text='Hello world' />
<CharacterCount text='' />
</>
);
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
V1
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<style>
.box {
border: 1px solid #333;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.box--large {
width: 270px;
height: 270px;
}
.box--medium {
width: 180px;
height: 180px;
}
.box--small {
width: 90px;
height: 90px;
}
</style>
<script type="text/babel">
const element = (
<div>
<div
className='box box--small'
style=
>
small blue box
</div>
<div
className='box box--medium'
style=
>
medium pink box
</div>
<div
className='box box--large'
style=
>
large green box
</div>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
V2
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<style>
.box {
border: 1px solid #333;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.box--large {
width: 270px;
height: 270px;
}
.box--medium {
width: 180px;
height: 180px;
}
.box--small {
width: 90px;
height: 90px;
}
</style>
<script type="text/babel">
function Box({ size, style, ...rest }) {
const styledClassName = `box box--${size}`;
return (
<div
className={styledClassName}
style=
{...rest}
/>
);
}
const element = (
<div>
<Box size='small' style=>
hello there!
</Box>
<Box size='medium' style=>
hello there!
</Box>
<Box size='large' style=>
hello there!
</Box>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
