render() { return ( <div className="App"> <div className="App-header"> <h2>Welcome to REACTIDE</h2> </div> </div> ); }
render() { return <h2 className="h4">{this.props.children}</h2>; }
function Card({ title, subtitle }) { return ( <div style={styles.card}> <h1 style={styles.title}>{title}</h1> {subtitle ? ( <h2 style={styles.subtitle}>{subtitle}</h2> ) : ( <h3 style={styles.empty}>No subtitle</h3> )} </div> ) }
render() { return ( <Layout> <Helmet title="Generic Page Title" /> <HeaderGeneric /> <div id="main"> <section id="content" className="main"> <span className="image main"><img src={pic04} alt="" /></span> <h2>Magna feugiat lorem</h2> <p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis fames ac ante ipsum primis in faucibus.</p> <p>Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Consequat leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit enim turpis lorem ipsum dolor sit amet feugiat. Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet est velit quis lorem.</p> <h2>Tempus veroeros</h2> <p>Cep risus aliquam gravida cep ut lacus amet. Adipiscing faucibus nunc placerat. Tempus adipiscing turpis non blandit accumsan eget lacinia nunc integer interdum amet aliquam ut orci non col ut ut praesent. Semper amet interdum mi. Phasellus enim laoreet ac ac commodo faucibus faucibus. Curae ante vestibulum ante. Blandit. Ante accumsan nisi eu placerat gravida placerat adipiscing in risus fusce vitae ac mi accumsan nunc in accumsan tempor blandit aliquet aliquet lobortis. Ultricies blandit lobortis praesent turpis. Adipiscing accumsan adipiscing adipiscing ac lacinia cep. Orci blandit a iaculis adipiscing ac. Vivamus ornare laoreet odio vis praesent nunc lorem mi. Erat. Tempus sem faucibus ac id. Vis in blandit. Nascetur ultricies blandit ac. Arcu aliquam. Accumsan mi eget adipiscing nulla. Non vestibulum ac interdum condimentum semper commodo massa arcu.</p> </section> </div> </Layout> ) }
// Since this component is simple and static, there's no parent container for it. const AboutPage = () => { return ( <div> <h2 className="alt-header">About</h2> <p> This example app is part of the <a href="https://github.com/coryhouse/react-slingshot">React-Slingshot starter kit</a>. </p> <p> <Link to="/badlink">Click this bad link</Link> to see the 404 page. </p> </div> ); }
// Component const H2 = (props) => { const { children, font, ...others } = props return ( <h2 {...others}> {children} {/* language=CSS */} <style jsx>{` h2 { font-family: ${ font === 'primary' ? primary : secondary }; font-size: 3em; } `}</style> </h2> ) }
const HomePage = () => { return ( <div> <h1>React Slingshot</h1> <h2>Get Started</h2> <ol> <li>Review the <Link to="/fuel-savings">demo app</Link></li> <li>Remove the demo and start coding: npm run remove-demo</li> </ol> </div> ); }
render() { return ( <div className="App"> <div className="App-header"> <h2 onClick={this.clickHandler}>Welcome to REACTIDE dudes</h2> <h3>{this.state.count}</h3> </div> </div> ); }
const MyBooks = () => ( <div style={{ padding: '10px 45px' }}> <h2>Your books</h2> </div> )
function Card({ title, subtitle }) { return ( <div style={styles.card}> <h1 style={styles.title}>{title}</h1> {subtitle && <h2 style={styles.subtitle}>{subtitle}</h2>} </div> ) }
render() { return ( <div className="App"> <div className="App-header"> <h2>Welcome to REACTIDE</h2> </div> </div> ); }
const MyBooks = () => ( <div style={{ padding: '10px 45px' }}> <h2>Your books</h2> </div> )
render() { return ( <div className="App"> <div className="App-header"> <h2 onClick={this.clickHandler}>Welcome to REACTIDE dudes</h2> <h3>{this.state.count}</h3> </div> </div> ); }
// Component const H2 = (props) => { const { children, font, ...others } = props return ( <h2 {...others}> {children} {/* language=CSS */} <style jsx>{` h2 { font-family: ${ font === 'primary' ? primary : secondary }; font-size: 3em; } `}</style> </h2> ) }
render() { return ( <Layout> <Helmet title="Generic Page Title" /> <HeaderGeneric /> <div id="main"> <section id="content" className="main"> <span className="image main"><img src={pic04} alt="" /></span> <h2>Magna feugiat lorem</h2> <p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis fames ac ante ipsum primis in faucibus.</p> <p>Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Consequat leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit enim turpis lorem ipsum dolor sit amet feugiat. Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet est velit quis lorem.</p> <h2>Tempus veroeros</h2> <p>Cep risus aliquam gravida cep ut lacus amet. Adipiscing faucibus nunc placerat. Tempus adipiscing turpis non blandit accumsan eget lacinia nunc integer interdum amet aliquam ut orci non col ut ut praesent. Semper amet interdum mi. Phasellus enim laoreet ac ac commodo faucibus faucibus. Curae ante vestibulum ante. Blandit. Ante accumsan nisi eu placerat gravida placerat adipiscing in risus fusce vitae ac mi accumsan nunc in accumsan tempor blandit aliquet aliquet lobortis. Ultricies blandit lobortis praesent turpis. Adipiscing accumsan adipiscing adipiscing ac lacinia cep. Orci blandit a iaculis adipiscing ac. Vivamus ornare laoreet odio vis praesent nunc lorem mi. Erat. Tempus sem faucibus ac id. Vis in blandit. Nascetur ultricies blandit ac. Arcu aliquam. Accumsan mi eget adipiscing nulla. Non vestibulum ac interdum condimentum semper commodo massa arcu.</p> </section> </div> </Layout> ) }