React Koans JavaScript Lab London
React Koans
JavaScript Lab London
AgendaReact koans
1. Let me2. koans3. React key concepts4. React ecosystem5. Unit testing key
concepts6. Unit testing tools7. Workshop8. Demo
JavaScript Lab London
koansA kōan is a story, dialogue, question, or statement, which is used in Zen practice to provoke the “great doubt” and test a student’s progress in Zen practice.”(Wikipedia)
http://alexlobera.com/koans-javascript-and-react/The way it works is you clone a Github repository that has implemented failing test cases. Then you fix the code implementing functionality and filling in the blanks, getting the tests to pass one by one. Koans are helpful in understanding concepts and getting familiar with the syntax
Which FRAMEWORK IS THIS?
< App />
React key concepts
● Virtual Dom● Reconciliation● State● Props
Components● React Component
○ Classes○ Functions (Stateless)
● React Instance● DOM Node
JsXconst HelloComponent = () => ( <div> <h1>Hello!</h1> <p>Welcome to JS Lab London</p> </div>);
<div className="container"> <div className="row"> {HelloComponent} </div></div>
https://goo.gl/zuSukf
https://babeljs.io/repl/
React ecosystem● React● React Router● Redux● Relay● ...
Unit testing key concepts
● Encapsulation● Modules● Abstraction● Dependency Injection● Single responsibility● Test-doubles:
Spies, stubs, mocks
Testing tools● Mocha● Chai● Sinon● Jasmine
● Jsdom● Enzyme● Jest
Thanks@alex_loberaAlexlobera.com
QA?
Workshop time!https://github.com/alexlbr/react-koans