View renderprops2.js
// a simple feature toggle FaCC
const Toggle = () => {
const isToggledOn = checkToggle(this.props.toggleName)
return this.props.render(isToggledOn)
}
// and to use it
<Toggle
toggleName="featureAorB"
render={isToggledOn => isToggledOn ? <FeatureA /> : <FeatureB />}
View renderprops.js
// a simple feature toggle FaCC
const Toggle = () => {
const isToggledOn = checkToggle(this.props.toggleName)
return this.props.children(isToggledOn)
}
// and to use it
<Toggle toggleName="featureAorB">
{ isToggledOn => isToggledOn ? <FeatureA /> : <FeatureB /> }
</Toggle>
View higherordercomponents2.js
const Component = ...
const mapStateToProps = ...
export default connect(mapStateToProps)(Component)
View higherordercomponents1.js
const withMousePosition = Component => class extends React.Component {
state = {
mouse: { x: 0, y: 0 }
}
onMouseMove = e => {
this.setState({ mouse: { x: e.clientX, y: e.clientY }})
}
componentDidMount() {
View context.js
<Form onSubmit={this.handleSubmit}>
<p>
<TextInput name="firstName" placeholder="First Name"/> {' '}
<TextInput name="lastName" placeholder="Last Name"/>
</p>
<p>
<SubmitButton>Submit</SubmitButton>
</p>
</Form>
View compoundcomponents4.js
class App extends React.Component {
render() {
return (
<div>
<Tabs>
<TabPanels>
<TabPanel>
<p>Tacos are delicious</p>
</TabPanel>
<TabPanel>
View compoundcomponents3.js
class App extends React.Component {
render() {
const tabData = [
{ label: 'Tacos', description: <p>Tacos are delicious</p> },
{ label: 'Burritos', description: <p>But burritos are better</p> }
]
return <Tabs data={tabData} tabsPlacement="bottom" disabled={[ 1 ]} />
}
}
View compoundcomponents2.js
class App extends React.Component {
render() {
const tabData = [
{ label: 'Tacos', description: <p>Tacos are delicious</p> },
{ label: 'Burritos', description: <p>But burritos are better</p> }
]
return <Tabs data={tabData} tabsPlacement="bottom" />
}
}
View compoundcomponents1.js
class App extends React.Component {
render() {
const tabData = [
{ label: 'Tacos', description: <p>Tacos are delicious</p> },
{ label: 'Burritos', description: <p>But burritos are better</p> }
]
return <Tabs data={tabData}/>
}
}
View imperativevsdeclarative3.js
<button onClick={this.openModal}>open modal</button>
<Modal isOpen={this.state.isModalOpen} onClose={this.closeModal}>
<button onClick={this.closeModal}>Close</button>
</Modal>