/components/Header.js
import React, {Component} from 'react';
import "./Header.css"
export class Header extends Component {
render() {
var classNames = "";
if (this.props.isBold) {
classNames += " bold";
}
return (
<div className={classNames}>
App
</div>
);
}
}
Header.propTypes = {
isBold: React.PropTypes.bool
};
/components/Content.js
import React, {Component} from 'react';
import "./Content.css"
export class Content extends Component {
render() {
var classNames = "";
if (this.props.size === "small") {
classNames += " small";
}
else if (this.props.size === "medium") {
classNames += " medium";
}
else if (this.props.size === "large") {
classNames += " large";
}
return (
<div className={classNames}>
{this.props.children}
</div>
);
}
}
Content.propTypes = {
size: React.PropTypes.string,
children: React.PropTypes.array
};
App.js
import React, { Component } from 'react';
import {Header} from "./components/Header"
import {Content} from "./components/Content"
export default class App extends Component {
render() {
return (
<div>
<Header isBold={true} />
<Content size={"large"}>
Hello <i>World</i>
</Content>
</div>
);
}
}
References
https://github.com/mhdr/ReactJSSamples/tree/master/005