Skip to content

Instantly share code, notes, and snippets.

@dgellow
Last active March 25, 2020 13:28
Show Gist options
  • Select an option

  • Save dgellow/8456354 to your computer and use it in GitHub Desktop.

Select an option

Save dgellow/8456354 to your computer and use it in GitHub Desktop.
React.js tutorial in coffeescript. http://facebook.github.io/react/docs/tutorial.html
dom = React.DOM
CommentBox = React.createClass
getInitialState: ->
{data: []}
loadCommentsFromServer: ->
$.ajax
url: 'comments.json',
dataType: 'json',
success: (data) =>
@setState {data: data}
error: (xhr, status, err) ->
console.error 'comments.json', status, err.toString()
handleCommentSubmit: (comment) ->
comments = @state.data
newComments = comments.concat [comment]
@setState {data: newComments}
$.ajax
url: @props.url
type: 'POST'
data: comment
success: (data) =>
@setState {data: data}
componentWillMount: ->
@loadCommentsFromServer()
setInterval @loadCommentsFromServer, @props.pollInterval
render: ->
dom.div {className: 'commentBox'},
dom.h1(null, 'Comments'),
CommentList({data: @state.data}),
CommentForm({onCommentSubmit: @handleCommentSubmit})
CommentList = React.createClass
render: ->
commentNodes = @props.data.map (comment) ->
Comment {author: comment.author}, comment.text
dom.div {className: 'commentList'}
commentNodes
CommentForm = React.createCLass
handleSubmit: (ev) ->
author = @refs.author.getDOMNode().value.trim()
text = @refs.text.getDOMNode().value.trim()
@props.onCommentSubmit {author: author, text: text}
@refs.author.getDOMNode().value = ''
@refs.text.getDOMNode().value = ''
preventDefault ev
render: ->
dom.form {className: 'commentForm', onSubmit: @handleSubmit}
dom.input(
type: 'text'
placeholder: 'Your name'
ref: author
),
dom.input(
type: 'text'
placeholder: 'Say something fun !'
ref: text
),
dom.input(
type: 'submit'
value: 'Post'
)
Comment = React.createClass
render: ->
converter = new Showdown.converter()
rawMarkup = converter.makeHtml @props.children.toString()
dom.div {className: 'comment'},
dom.h2({className: 'commentAuthor'},
@props.author
),
dom.span({dangerouslySetInnerHTML: {__html: rawMarkup}})
React.renderComponent
CommentBox({url: 'comments.json', pollInterval: 2000}),
document.getElementById('content')
@rafgugi

rafgugi commented Aug 3, 2016

Copy link
Copy Markdown

example.coffee:46:1: error: unexpected indentation
commentNodes
^^^^^^

ghost commented Apr 4, 2017

Copy link
Copy Markdown

lol.. Warning don't ever try this at home kids.

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