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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. JSX transform in a nutshell
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. Example
   

   View Slide

9. Example cont.
   

   View Slide

10. Example cont. 2
    

    View Slide

11. {demoTime}
    Local or
    JSBin or
    JSFiddle or
    GitHub
    

    View Slide

12. Conclusions
    JSX is Javascript
    JS is fun
    JSX with JS is familiar
    Familiar is easy(-ier than unfamiliar)
    

    View Slide

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
    

    View Slide