Herzberg: Two-Factor Theory
上面 藍綠 background 是用 React 寫的 哈哈哈!
用我最愛的理論 Herzberg: Two-Factor Theory
明天再來玩動畫的 把想像中的用得更好 :)
React code
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<h1> Two Factor Theory</h1>
<div id="root"></div>
<script type="text/babel">
const twoFactors = {
"motivators": ["challenging work", "achievement", "responsibility", "growth", "recognition", "advancement"],
"hygieneFactors": ["company policies", "job security", "relationships", "salary", "work conditions", "supervision"]
};
const inlineStyle = {
display: 'inline-block'
};
// function component
const Factors = (props) => {
console.log(props)
return (
<div style={inlineStyle}>
<h3>
{props.title}
</h3>
{props.data.map( (m, i) =>
<ul key={i} >
<li>
{ m }
</li>
</ul>
)}
</div>
)
};
// function component 另一種寫法
const TestBtn = () => <button type="button">click</button>;
// Class components
class TwoFactorTheory extends React.Component {
render() {
return (
<div style={ { backgroundColor: "#b3d4e5", display: "inline-block" } }>
<Factors data={twoFactors.motivators} title="Motivators"/>
<Factors data={twoFactors.hygieneFactors} title="Hygiene Factors"/>
</div>
)
}
};
ReactDOM.render(
<TwoFactorTheory />,
document.getElementById("root")
);
</script>