brukh/index.html

## index.html
<div id='app'></div>

## script.babel
// 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'));

## scripts
<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>

## stateless-functional-components.markdown

      
    Raw
  

              stateless-functional-components.markdown
            
          
    stateless functional components

A Pen by brukh on CodePen.
License.
	// 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'));
	<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>