mikechau/react-primer-draft

A primer for building web applications with React.

react-primer-draft's Issues

Add ES6 class component examples

I think the primary example should still have React.createClass, with ES6 examples available at an Appendix section. When mixins are concrete, I would feel comfortable with switching the ES6 examples to be the primary example, and moving React.createClass to the appendix.
#4

Clarify anti-pattern in getDefaultProps

Don't use props to set your initial state. It's a anti-pattern and it is only acceptable, when you do something like call the prop something like: initialCount.

This is a bit unclear (since initailCount is not mentioned anywhere). I think you can update that section with the below snippet

getInitialState: function() {
   return {
     count: this.props.initialCount // this is fine
   }
}

Publish it using GitBook.com

Why not publish it as a GitBook ?

Some examples of GitBooks hosted on GitHub:

• https://github.com/0xAX/linux-insides
• https://github.com/SamyPesse/How-to-Make-a-Computer-Operating-System

Update the examples to not use document.body

It's a bad idea to render into document.body, so the examples should be updated to render into a <div id="content"></div> instead.

JS Bins need to be updated too.

React doc links need updating

Thanks @mikechau for putting this primer together!

I noticed that a few of the links to the fb react docs no longer match up. Happy to submit a PR to update them!

JS Bins are missing <div id="container"></div>

Thanks for putting together this great tutorial! I noticed that the JS Bins seem to be missing <div id='content'></div> inside of the html. As such, all the examples start out blank until that div is added. I'd put together a pull request to try to help resolve this issue, but that isn't possible since the JS Bins' source isn't in the repo.

Using ES6 classes for more idiomatic React?

Great draft!

Posit: this guide would have a longer lifespan if it shifted away from React.createClass and towards ES6 classes/components. My understanding is that React is rapidly moving towards a purely functional structure, and while using ES6 classes is only a midway step, it is still a step in the right direction.

Example "3rd Party Libararies" does not work

https://github.com/mikechau/react-primer-draft#react-and-3rd-party-libraries

The DataTable example does not work at: http://jsbin.com/hapubiceta/4/edit?js,output

Getting an error in the console:

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
runner-3.25.22.min.js:1 error Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
    at invariant (http://dragon.ak.fbcdn.net/hphotos-ak-xfp1/t39.3284-6/10734339_319998684865598_389562622_n.js:18683:15)
    at Object.ReactMount._registerComponent (http://dragon.ak.fbcdn.net/hphotos-ak-xfp1/t39.3284-6/10734339_319998684865598_389562622_n.js:11746:39)
    at Object.<anonymous> (http://dragon.ak.fbcdn.net/hphotos-ak-xfp1/t39.3284-6/10734339_319998684865598_389562622_n.js:11790:36)
    at Object.wrapper [as _renderNewRootComponent] (http://dragon.ak.fbcdn.net/hphotos-ak-xfp1/t39.3284-6/10734339_319998684865598_389562622_n.js:12914:21)
    at Object.ReactMount.render (http://dragon.ak.fbcdn.net/hphotos-ak-xfp1/t39.3284-6/10734339_319998684865598_389562622_n.js:11863:32)
    at Object.wrapper [as render] (http://dragon.ak.fbcdn.net/hphotos-ak-xfp1/t39.3284-6/10734339_319998684865598_389562622_n.js:12914:21)
    at http://null.jsbin.com/runner:75:7```