JSX is just Javascript

Small talk for React-DC on how to think about JSX and write it with JS.

Links:
JSBin - http://jsbin.com/caduhi/1/edit
JSFiddle - http://jsfiddle.net/t5acc38j/
GitHub - https://github.com/kimagure/react-elements-demo

Google docs version:
https://docs.google.com/presentation/d/1jXnCZXCFcyrqwjAzlCsrI_qCOlO4j2Pr-teIj3jWkp4/edit?usp=sharing

Transcript

1. JSX is just Javascript Justin Woo
2. About me Former student physicist, nanotech researcher Working with React for 9 months now Former Python, Java user Not a real Node.js user
3. Agenda Look at JSX output Get everyone hyped up to write JS Walk through an example Demo “crazy” code Not present a FP seminar
4. JSX transform in a nutshell
5. Verdict JSX is just JS ...with some small amount of magic ...which is fine ...and saves a lot of time ...don’t have to follow JSX transform changes ...lets designers commit directly to codebase
6. So what if JSX is JS? Don’t need templates ({{#each}}, ng-repeat) More JS that makes sense Less syntax to remember [‘a’, ‘b’, ‘c’].map(function () { … }) no more !g ng-repeat docs no more !g handlebars each docs
7. Doing more in pieces All of your JSX doesn’t need to go in return() Build pieces out at a time Provide outlets for those pieces Go crazy
8. Example
9. Example cont.
10. Example cont. 2
11. {demoTime} Local or JSBin or JSFiddle or GitHub
12. Conclusions JSX is Javascript JS is fun JSX with JS is familiar Familiar is easy(-ier than unfamiliar)
13. Thanks! Hope you weren’t bored to death Hope you learned something or were amused Talk to me through email or twitter: moomoowoo@gmail @jusrin00