/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