Skip to content

Instantly share code, notes, and snippets.

@qmmr

qmmr/README.md

Created August 9, 2016 08:11
Show Gist options
  • Save qmmr/6678e32d72f69faa3afe22eafa0fa0cd to your computer and use it in GitHub Desktop.
Save qmmr/6678e32d72f69faa3afe22eafa0fa0cd to your computer and use it in GitHub Desktop.
Download ZIP
React Components - guide to create reusable components
Raw
README.md

React Components - guide to create reusable components

  • Do not name your components after the part of state they connect to.
  • Do not name your components for the role they play in YOUR application.
  • A component should be given ONLY the props it requires. This structure should be flat.
  • Props should not be named according to the application state that gets passed in. Instead, they should be named according to their usage within the component itself.
  • Composition is superior to import statements at the top and is the primary mechanism which allows your component to focus on doing ONE thing. Use it wherever, and whenever you can.

Here are some common ways presentational components “know” about a product:

  • By using names for a particular part of the application’s state (e.g. EventStats)
  • By using names based on the role the component plays in the application (e.g. RegistrationConfirmation)

Some common ways presentational components “know” about a platform:

  • By styling via CSS or RN style definitions rather than with components and semantic props (e.g. assigning props which dictate presentation is fine, just do color={”success”} rather than color={‘#00cc66’})
  • By using controls provided by React or React Native (e.g. div, button, View, Text, etc) By doing anything that depends on a browser or native app context (e.g. urls, accessing window, checking screen width, etc)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment