Skip to content

Instantly share code, notes, and snippets.

@chantastic
Last active December 10, 2018 10:55
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save chantastic/c2f184e209c8b45e6292 to your computer and use it in GitHub Desktop.
Save chantastic/c2f184e209c8b45e6292 to your computer and use it in GitHub Desktop.
DT Training exercises

http://jsbin.com/tojeke/1/edit?js,output

1. React.render

Problem: http://jsbin.com/dacoze/4/edit?html,output
Solution: http://jsbin.com/dacoze/3/edit?html,output

2. React.createClass

Problem: http://jsbin.com/bepewoq/2/edit?js,output
Solution: http://jsbin.com/bepewoq/1/edit?js,output

3. props

Problem: http://jsbin.com/tasesu/4/edit?js,output
Solution: http://jsbin.com/tasesu/2/edit?js,output

Reference: https://facebook.github.io/react/index.html#helloExample

4. getDefaultProps

Problem: http://jsbin.com/filefu/3/edit?js,output
Solution: http://jsbin.com/filefu/2/edit?js,output

Reference: https://facebook.github.io/react/docs/reusable-components.html#prop-validation

5. propTypes

Problem: http://jsbin.com/tupebo/4/edit?js,console,output
Solution: http://jsbin.com/tupebo/3/edit?js,console,output

Reference: https://facebook.github.io/react/docs/reusable-components.html

6. interating with map

Problem: http://jsbin.com/yanoya/3/edit?js,output
Solution: http://jsbin.com/yanoya/2/edit?js,output

Reference: http://facebook.github.io/react/#todoExample

7. bindingEvents

Problem: http://jsbin.com/xaqaja/3/edit?js,output
Solution: http://jsbin.com/xaqaja/2/edit?js,output

Reference: https://facebook.github.io/react/docs/events.html

8. clickCounter (state)

Problem: http://jsbin.com/pokefo/3/edit?js,output
Solution: http://jsbin.com/pokefo/2/edit?js,output

Reference: https://facebook.github.io/react/docs/component-api.html#setstate

9. numberSelector (multiple event handlers)

Problem: http://jsbin.com/kateto/3/edit?js,output
Solution: http://jsbin.com/kateto/2/edit?js,output

10. DumbView

Problem: http://jsbin.com/fiyuxu/3/edit?css,js,output Solution: http://jsbin.com/fiyuxu/2/edit?css,js,output

Reference: https://facebook.github.io/react/tips/children-props-type.html

11. Controlled Input

Problem: http://jsbin.com/pokefo/5/edit?js,output
Solution: http://jsbin.com/pokefo/4/edit?js,output

Reference: https://facebook.github.io/react/docs/forms.html#controlled-components

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment