When you’re building a new app using React it’s nice to start laying out all the components you’ll want to use inside the components that you’re building. Unfortunately this can be a little slow because for each new component you have to:
- Create a new file
- Import that file
- Include React in the file
- Export a Component from the file
- Add a simple
rendermethod to the Component
Step 5 is really the core of what you want to do here, and I realized today that I can quickly skip the other four steps by just using React Stateless Components, which are just functions. When using ES2015 fat-arrow syntax, they can be one-liners!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| const Header = () => <div className="header"><img className="header__logo" src="/assets/logo.png" /><h1 className="header__title">My App</h1></div>; | |
| const ToDoList = () => <div className="to-do-list"><h2 className="to-do-list__title">To Do</h2></div>; | |
| const Controls = () => <div className="controls"><h2 className="controls__title">Controls</h2></div>; | |
| const Footer = () => <div className="footer">Made by Me</div>; | |
| export default React.createClass( { | |
| render() { | |
| return ( | |
| <div className="app"> | |
| <Header /> | |
| <ToDoList /> | |
| <Controls /> | |
| <Footer /> | |
| </div> | |
| ); | |
| } | |
| } ); |
Using these you can mock up your Component layout very quickly, then move them over to your new Component files one at a time as you are ready. And you may even have some of your render methods there for you!
Leave a Reply