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