Created
September 26, 2016 20:49
-
-
Save brukh/819b2859536d69d9c7d074e66c01c4d2 to your computer and use it in GitHub Desktop.
stateless functional components
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
| <div id='app'></div> |
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
| // concise inline example that returns an image tag | |
| const UserAvatar = (props) => <img src={props.avatar} /> | |
| /* | |
| + logic is contained within a single jsx statement | |
| + making things even more concise you can destructure props and set default values thanks to babel and es6 | |
| + each stateless components recieves props, context, and updater as arguments | |
| */ | |
| const UsersAvatarList = ({ data = [] }, context, updater) => ( | |
| <ul> | |
| { data.map((item) => <UserAvatar avatar={item.avatar} />) } | |
| </ul> | |
| ); | |
| /* | |
| + logic is being performed outside of our jsx. this is good for transforms but avoid defining functions because they will be defined each re-render | |
| + stateless components do not have a backing instance, so accessing <UsersAvatarList /> by ref will not work. You will need to wrap the stateless component with a class component. | |
| */ | |
| const Body = (props) => { | |
| const data = [1, 2, 3].map(() => faker.helpers.contextualCard()); | |
| return ( | |
| <div> | |
| <h1> Users Avatar List </h1> | |
| <UsersAvatarList data={data} ref='usersAvatarList'/> | |
| </div> | |
| ); | |
| } | |
| // propTypes and contextTypes are supported | |
| UsersAvatarList.propTypes = { | |
| data: React.PropTypes.array.isRequired | |
| }; | |
| ReactDOM.render(<Body />, document.getElementById('app')); |
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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment