Workshop: Hello Omniscient
See related slides for this part: http://omniscientjs.github.io/workshop-slides/#67
, el); // Tests should turn green it('should have class named Hello', function () { expect(React.isValidClass(Hello)).to.equal(true, 'Hello must be a valid React class'); }); it('should have component Hello with name from props', function () { var output = React.renderComponentToString(Hello({ name: 'Foo'})); expect(output).to.contain('Hello,'); expect(output).to.contain('Foo'); expect(output).to.contain('Next task →
Tasks
-
Part 0:
Introduction to the workshop
-
Part 1:
Making Basic Components
-
Part 1:
Passing Properties
-
Part 1:
Transforming input props
-
Part 1:
Composing Simple Components
-
Part 1:
Composing Components Through Children
-
Part 1:
Render two times and see that only the second will be visible
-
Part 1:
Render twice to update the view using setTimeout
-
Part 1:
Render a clock using setInterval
-
Part 2:
Higher order functions
-
Part 2:
Recursive sum
-
Part 2:
Immutable.js
-
Part 2:
Curry
-
Part 2:
Cursors
-
Part 3:
Immstruct - Hello, Hank
-
Part 3:
Immstruct - counter
-
Part 3:
Immstruct - clock
-
Part 3:
Mixins - never rerender
-
Part 3:
Mixins - only show odd numbers
-
Part 3:
Mixins - immutable.js shouldComponentUpdate
-
Part 3:
Omniscients shouldComponentUpdate in React
-
Part 3:
Hello Omniscient
[Active]
-
Part 3:
Hello Omniscient JSX
-
Part 3:
Composing Omniscient Components
-
Part 3:
Make a simple TODO app With Cursors
-
Part 3:
Add Mixins and Life Cycle Mixins
-
Part 3:
Create filtering search
, el);
// Tests should turn green
it('should have class named Hello', function () {
expect(React.isValidClass(Hello)).to.equal(true,
'Hello must be a valid React class');
});
it('should have component Hello with name from props', function () {
var output = React.renderComponentToString(Hello({ name: 'Foo'}));
expect(output).to.contain('Hello,');
expect(output).to.contain('Foo');
expect(output).to.contain('Next task →
Available globals/variables
Available globals/variables
Use el to get to an element you can render to with your Omniscient components!
React: React instanceomniscient/component: Omniscient instanceimmstruct: Immstruct instanceImmutable: Immutable.js instanceCursor: Cursor (Immutable.js contrib)redux: redux instancereduxThunk: reduxThunk instancereactRedux: reactRedux instance
Testing
describe: new test suite (mocha)it: new test (mocha)xit: pending test (mocha)xdescribe: pending scenario (mocha)before/after: run code before or after all tests (mocha)beforeEach/afterEach: run code before or after each tests (mocha)chai: chai.js assertion library