Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Exploring how we can separate React.js presentation and logic
parseStyle() {
}
parseTemplate() {
}
Navbar {
translate3d({{left}}px, {{top}}px, 0);
background: #000;
color: #fff;
width: 75%;
&[view=fullscreen] {
width: 100%;
}
&[view=minimal] {
width: 50%;
}
// Alternatively
width: {{this.state.view == 'fullscreen' ? '100%' : '50%'}};
container {
border: 1px solid yellow;
}
}
// Mocking this to LESS, getting the resulting CSS:
// <Navbar type="fullscreen">
// <container>
// </container>
// </Navbar>
// Parsing those CSS rules into JS style object:
// Navbar: {
// WebkitTransform: 'translate3d(0px, 100px, 0)',
// MozTransform: 'translate3d(0px, 100px, 0)',
// msTransform: 'translate3d(0px, 100px, 0)',
// transform: 'translate3d(0px, 100px, 0)',
// background: '#000',
// color: '#fff',
// width: '100%',
// children: {
// container: {
// border: '1px solid yellow'
// }
// },
// // Alternatively
// width: (this.state.view == "fullscreen") ? "100%" : width
// }
// Maybe it could just be <Navbar>
<div class="Navbar" role="navigation">
<div class="Navbar.container">
<Link class="Navbar.brand" to="/">
<img src="/images/logo-small.png" width="38" height="38" alt="React" />
<span>{{this.state.view == 'fullscreen' ? 'Fullscreen view' : 'Custom view'}}</span>
</Link>
</div>
</div>
// Parses into:
// React.DOM.div(
// {
// role: 'navigation',
// style: this.style.Navbar
// },
// '',
// React.DOM.div(
// {
// style: this.style.Navbar
// },
// '',
// React.DOM.div(
// {
// style: this.style.Navbar.container
// },
// '',
// Link(
// {
// style: this.style.Navbar.brand
// }
// )
// )
// )
// );
var Navbar = React.createClass({
getInitialState() {
return {
view: 'fullscreen',
top: 100,
left: 0
};
}
style() {
return parseStyle(require('./Navbar.rs'), this); // Parse the React Stylesheet
}
render() {
return parseTemplate(require('./Navbar.rt'), this); // Parse the React Template
}
changeView(type) {
this.state.view = 'minimal';
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.