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