chantastic/react-cheat-sheet

A filterable React.js reference site

React Cheat Sheet

Contributing

Setup

react-cheat-sheet is a pretty standard create-react-app app. If you're fimiliar with a CRA app, everything should make sense.

Clone, setup, and run the project

git clone https://github.com/chantastic/react-cheat-sheet.git
cd react-cheat-sheet
yarn
yarn start

Yarn scripts

Command	Description
start	starts a webpacks sever at localhost:3000
test	runs tests using Jest
prettier	reformats all code using prettier
add-contribs	adds a contributer to all-contributorsrc
generate-contribs	generates a list of contributors on the README

Minor changes

Changing an example is easy.

Find the file with the error and click the Pencil button (Edit this file). Make your changes and commit in the browser. Github will do the rest for you. I'll get notified and the change will be fixed on the next deploy.

Major changes

• Fork
• Make Change
• Run yarn add-contribs add yourself as a contributer.
• Run yarn generate-contribs to generate an updated README.
• PR back into chantastic:master

Contributors

Thanks goes to these wonderful people (emoji key):

Michael Chan	Jon Stuebe	Ted Pennings	James Miller	Eugene Zhlobo	Dan Abramov	Alexander Burtsev
Shrayas Rajagopal	Christopher Miller

This project follows the all-contributors specification. Contributions of any kind welcome!

react-cheat-sheet's Issues

componentDidMount and componentDidUpdate similarity

For some reason I have the hardest time remembering where to put "react is done, have at with DOM changes" stuff.

componentDidMount() and componentDidUpdate() have equivalent DOM state and are the place for this. Very often you do the same stuff in these two, would be cool if the entry for these two in the cheat sheet indicated that.

Just an idea...if you're not into it no biggie.

Failed to compile -- Module not found: [CaseSensitivePathsPlugin]

Context: Windows 8

After following all the instructions in the ReadMe file I got the following error message:

Failed to compile.

Error in ./src/data.js
Module not found: [CaseSensitivePathsPlugin] D:\sandbox\react-cheat-sheet\src\data\misc.js does not match the corresponding path on disk Misc.js.

@ ./src/data.js 27:12-34

Add Category filters

Missing setState

No docs/entry for setState

ESNext Syntax

I'm looking for resources for people who want to learn React and this looks great...nice React cheat sheet!

What would you think about adding the ESNext API? The reason I ask is that I searched for PropTypes and noticed this:

propTypes: {
  myProp: React.PropTypes.bool
}

// not available with React.Component

With ESNext and ReactComponent it should be:

  static propTypes = {
  myProp: React.PropTypes.bool
  }

I typically recommend Babel stage 0 for React projects since it makes using React even easier (IMHO).

If you agree, not sure the best way to integrate it. Could be a radio button, side-by-side comparison or a search checkbox? If not, no worries...

List Version Number

This is great! Thanks for creating.

It would be helpful to list the version of React this represents in the UI.

Generically handle category filters.

Right now, every category filter is hard-wired because copy/paste is easier than thinking. And I really wanted to pull the trigger. But now, it should just be done the right way.

Lifecycle method table does not fit horizontally

Hey,

love your cheatsheet! I noticed that the lifecycle methods table does not fit into the 720px wide container, and additionally does not scroll horizontally.

I could either increase the maxWidth of the <main> container or allow the container to overflow-x: auto; (or both?)

Let me know what you think.

`shouldComponentUpdate` description error

I think there is a mistake in description for shouldComponentUpdate

// invoked before rendering with new props, not for initial 'render'

Doc says, it's invoked with new state as well.

Change specific warnings to a generic `warning` prop that ideally takes an array

Add Testing APIs

Calling setState in componentDidMount and componentWillReceiveProps does trigger an update

According to the official docs:

If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

This chart says that setState does not trigger an update for componentWillReceiveProps, sounds like this needs to be changed to "yes", no?

Add Test category and examples