Simplest webpage with React from CDN The web page below uses React from CDN, creates root element by React functions and replaces elements in DOM

<html>
<body onload="myFunction()" />
<h1>React.js basics</h1>
<div id="demo" >This will be replaced by pure JavaScript</div>
<div id="react-app" >This will be replaced by React.js</div>
<div id="react-app1" >This will be replaced by React.js 1</div>

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "Hello Wrold - Replaced by pure JavaScript";

 var rootElement =
 React.createElement('div', {},
React.createElement('h1', {}, "People"),
React.createElement('ul', {},
 React.createElement('li', {},
React.createElement('h2', {}, "John First"),
React.createElement('a', {href: 'mailto:john@first.com'}, 'john@first.com')
 ),
 React.createElement('li', {},
React.createElement('h2', {}, "Paul Second"),
React.createElement('a', {href: 'mailto:paul@second.com'}, 'paul@second.com')
 )
)
 )

 ReactDOM.render(rootElement, document.getElementById('react-app'))
 ReactDOM.render(rootElement, document.getElementById('react-app1'))
}
</script>
</body>
</html>


More info and samples on: www.devarchweb.net

What is JSX and how it compiles to JavaScript JSX aloows embedding hmlt tag into JavaScrip.

var AboutPage = React.createClass({
 render: funtion() {
 return (
  
<div>
  <h1 color="blue">About</h1>
  <p>Demo page</p>
</div>

  );
 }
});



The JSX code with nested elements above compiles to JavaScript with React

React.createElement("div", null,
 React.createElement("h1", {color:"blue"}, "About" ),
 React.createElement("p", null, "Demo page"},
)


More info and samples on: www.devarchweb.net

How to create simple webpage with About page as component Create about Page as a component

var React = require('react'); // includes React package

var AboutPage = React.createClass({
 render: function() {
 return (
  
<div>
  <h1 color="blue">About</h1>
  <p>Demo page</p>
</div>

  );
 }
});

module.Export = AboutPage; // makes the page available



Include that page in main page

var React = require('react');
var AboutPage = require('./components/aboutPage'); // includes AbouPage component

React.render(<AboutPage>, document.getElementById('root')); // renders AboutPage in root element



Create index.html that uses the app built above

<html>
<body>
 <div id="root"></div>
 <script src="scripts/bundle.js"></script> // gets created by gulp or webpack (all .js in one file)
</body>
</html>




The app needs to be started from cmd by gulp or webpack

More info and samples on: www.devarchweb.net

Differences in event handlers in ES5/6 Work in ES5

<div onClick={this.handleClick}/>



ES6 requires bind

<div onClick={this.handleClick.bind(this)}/>



It can be handled in class constructor

class People extends React.Component{
 constructor(props) {
  super(props);
  this.handleClick=this.handleClick.bind(this);
}



ES5 Stateless component (since React 1.4)

var ContactPage = function(props) {
  return (
<h1> Main Street 1, Small City</h1>
);
});



ES6 Stateless component

const ContactPage = (props) => {
  return (
<h1> Main Street 1, Small City</h1>
);
});

Stateless components do not have Lifecycle methods


More info and samples on: www.devarchweb.net

How to manage state in React Assuming there is a simple React component that renders first name from a Person class.

1. using forceUpdate
In constructor



render()

 this.Person.firstName



onClick()

 this.person = new Person('Paul');
 this.forceUpdate()




2. using State
In constructor

this.state = new Person('John');



render()

this.state.person.firstName



onClick()

var newPerson = new Person('Paul');
this.setState(newPerson);



Note: if you use an array, you cannot assign it directly to state, you have to use

this.state = { "people" : people }



Note: Redux is using the same principle, just requires more code.

3. Using @observable in MobX, please refer to the MobX section

More info and samples on: www.devarchweb.net

How to create simple webpage with About page as component Assuming you have multiple components/pages and you need to defined mapping between page and url.
You have to display contact page is user types http://mypages.com/#contact

var React = require('react');
var AboutPage = require('./components/aboutPage');
var Contact = require('./components/contact');

var AboutPage = React.createClass({
 render: function() {
var Page;

switch (this.props.route) {
 case 'contact' : Page = Contact; break;
 default: Page = AboutPage;
}

 return (
<div>
   <Page/>
</div>
  );
 }
});

function render() {
 var myRoute = window.location.hash.substr(1);
 React.render(<App route = {myRoute} /> document.getElementById('root'));
}

window.addEventListener('hashchange', render); // listens to URL changes and renders new content

render(); // renders page first time


More info and samples on: www.devarchweb.net

How to use Router Router provider centralized way of handling routes. Create myRoutes.js that contains all mapping among urls and components

var React = require('react'); // includes React package

var myRoutes = (
   <Route name="app" path="/" handler={require('./main')}>
<DefaultRoute handler=={require('./components/aboutPage'}>
// if path is not set, name is used
<Route name="people" path="allPeople" handler=={require('./components/people'}>
</Route>
  );
 }
});

module.Export = myRoutes;



Update main.js to use myRoutes

var React = require('react');
var RouteHandler = require('react-router');
var myRoutes = require('./myRoutes');

var App = React.createClass({
 render: function() {
 return (
<div>
  <RouteHandler/>
</div>
  );
 }
});

Router.run(myRoutes, function(Handler) {
 React.render(<handler>, document.getElementById('root'));
});


More info and samples on: www.devarchweb.net

Describe properties and state this.props.userName - immutable - passd to child components from top level component
this.state.username - data in controller view

More info and samples on: www.devarchweb.net

Lifecycle events Lifecycle:
componentWillMount - runs before initial renderning
componentDidMount - runs after render (DOM exists)

componentWillReceiveProps - run before new properties are received. Does not run on initial render.
shouldComponentUpdate - runs before render. If returns falls, render will be ignored.

componentWillUpdate - after rendering (when new props are states changed). SetState cannot be called here
componentDidUpdate - after componts updates propageated to the DOM

componentWillUnmount - before component is unmounted from the DOM

More info and samples on: www.devarchweb.net

how to display a list

var People = React.createClass({

 // initial state is an empty array
 getInitialState: function() {
  return {
people: []
  };
 },

 // loads data in json format and assigns them to people
 componentWillMount: function() {
  this.setState({ people: peopleService.getPeople() });
 },

 render: funtion() {
   var createPersonText = function(person) {
return (
     // id is necessary for the framework
 <li key={author.id}>{person.firstName} {person.lastName}</li>
);
 }

 return (
<div>
<ul>
{this.state.people.map(createPersonText, this)}
</ul>
</div>
);
 }
});

module.exports = People;


More info and samples on: www.devarchweb.net

What PropTypes are avaibale PropTypes help to validate if required parameters or/and types were passed to the component.

React.PropTypes.object.isRequired
React.PropTypes.func.isRequired

React.PropTypes.bool
React.PropTypes.number
React.PropTypes.string
React.PropTypes.array
React.PropTypes.func


Do not run in minified version!

More info and samples on: www.devarchweb.net

Set property expectations with PropTypes

var PeopleList = React.createClass({
  propTypes: {
people: ReactPropTypes.array.isRequired
  },


 render: funtion() {
 ...


If people array has not been passed then browser will show a warning.

More info and samples on: www.devarchweb.net

Create store in code with Root reducer Configure store
configureStore.js

import {createStore} from 'redux';
import rootReducer from './myReducers';

export default function configureStore(initialState) {
  return createStore(
   rootReducer,
initialState
}



Instantiate store for the app in src/index.js

import configureStore from './store/configureStore'
import {Provider} from 'react-redux'

const store = configureStore();

render(
<Provider store={store}>
<Router history={browseHistory routes={routes} />
</Provider>,
document.getElementById('root')
);


More info and samples on: www.devarchweb.net

Create action for 'create person' operation

export function createPerson(person) {
 return { type: 'CREATE_PERSON', person};
}



if the action should be reused, definig the action as a const helps avoiding type error

// consts defined in an independent file
export const CREATE_PERSON = 'CREATE_PERSON';



import * as types from './actiontypes';

export function createPerson(person) {
 return { type: types.CREATE_PERSON, person};
}


More info and samples on: www.devarchweb.net

Describe reducers in context of create person functionality Reducers are called by dispatch() method of store and return modified data as NEW oject

function myReducer(state, action) {
 switch (action.type) {
  case 'SET_NAME':
 return (Object.assign({}, state, { name: 'John' });
default:
    return state;
 }
}

reducers/index.js
function arrayReducer(state =[], action) {
 switch (action.type) {
  case types.CREATE_PERSON:
 return [...state, Object.assign({}, action.person)];
default:
    return state;
 }
}


More info and samples on: www.devarchweb.net

Describe Root reducer Using Root reducer simplifies multi case statements

import {combineReducers} from 'redux';
import myReducer from './myReducerFile';

const rootReducer = combineReducers({
 myReducer : myReducer
});

export default rootReducer;


More info and samples on: www.devarchweb.net

Simplest way using Redux "Redux Flow/Connect Container" chapter
Assuming to have a page like this

import React,{PropTypes} from 'redux';

class People extends React.Component{
 constructor(props) {
super(props, contect);

this.state = {
person:{ name:""}
};

this.OnNameChanged = this.OnNameChanged.bind(this);
this.OnClickCreate = this.OnClickCreate.bind(this);
}

onNameChanged(event) {
const person = this.state.person;
person.name = event.target.value;
setState({person:person});
}

onClickCreate() {
alert('${this.state.person.name} would be created here');
}

render() {
 return (
 <div>
<input type="text" onChange={this.onNameChanged} value{this.state.course.title} />

<input type="submit" onClick={this.onClickCreate} value="Create" />
 </div>
 );
}
}

export default PeoplePage;



If you start using Redux it will change like this:

import React,{PropTypes} from 'redux';

import {connect} from 'react-redux';
import * as personAction from './personActions';


class PeoplePage extends React.Component{
constructor(props) {
...
}

onClickCreate() {
// props.dispatch is injected by connect(), if connect uses only 1 argument
this.props.dispatch(personAction.createPerson(this.state.person));
}

personDetail(person, index) {
 return <div key={index}>{person.name}</div>
}


render() {
 return (
 <div>
  {this.props.people.map(this.personDetail)} //map() iterates over list - this line displays list
...
 </div>
 );
}
}


function mapStateToProps(state, ownProps) {
 return {
  people: state.people
 };
}

export default connect(mapStateToProps)(PeoplePage);


More info and samples on: www.devarchweb.net

Data flow with Redux after user clicks createPerson button "Step Through Redux Flow" chapter 4:50

Flow:
REACT
- user clicks "Create" button
- personPage.js onClickCreate() calls this.props.dispatch(personAction.createPerson(this.state.person))
ACTION
- personAction.js createPerson(aPerson) returns { type='CREATE_PERSON', person=aPerson }
- dispatch() calls all reducers
REDUCERS
- personReducer.js personReducer() returns new array with the person passed addedd into the array
REACT
- personPage.js mapStateToProps(state. ownProps) returns { people: state.people}
- personPage.js render() draws array in this.props.people


More info and samples on: www.devarchweb.net

How to use mapDispatchToProps()


import React,{PropTypes} from 'redux';
import {connect} from 'react-redux';
import * as personAction from './personActions';

class PeoplePage extends React.Component{
constructor(props) {
 ...
}

PeoplePage.PropTypes = {
people: PropTypes.array.isRequired,
createPerson: PropTypes.func.isRequired
}

onClickCreate() {
 this.props.createPerson(this.state.person);
 // before was: this.props.dispatch(personAction.createPerson(this.state.person));
}

personDetail(person, index) {
 return <div key={index}>{person.name}</div>
}

render() {
 return (
 <div>
  {this.props.people.map(this.personDetail)} //map() iterates over list - this line displays list
...
 </div>
 );
}
}

function mapStateToProps(state, ownProps) {
 return {
  people: state.people
 };
}


function mapDispatchToProps(dispatch) { // "dispatch" gets injected by the "connect()" function
 return {
  createPerson: person => dispatch(personActions.createPerson(person))
 };
}


export default connect(mapStateToProps, mapDispatchToProps)(PeoplePage);


More info and samples on: www.devarchweb.net

How to use bindActionCreators

import React,{PropTypes} from 'redux';
import {connect} from 'react-redux';
import * as personAction from './personActions';
import {bindActionCreators} from 'redux';

class PeoplePage extends React.Component{
constructor(props) {
}

PeoplePage.PropTypes = {
 people: PropTypes.array.isRequired,
 actions: PropTypes.object.isRequired,
}

onClickCreate() {
 this.props.actions.createPerson(this.state.person);
}

render() {
 return (
...
 );
}
}

function mapStateToProps(state, ownProps) {
 return {
  people: state.people
 };
}

function mapDispatchToProps(dispatch) { // "dispatch" gets injected by the "connect()" function
 return {
 actions: bindActionCreators(courseActions, dispatch);  mapping all actions in personActions.js
 // before was: createPerson: person => dispatch(personActions.createPerson(person));
 };
}

export default connect(mapStateToProps, mapDispatchToProps)(PeoplePage);


More info and samples on: www.devarchweb.net

How to install MobX To install MobX run following

npm install mobx --save
npm install mobx-react --save


if using TypeScript, set experimentalDecorators to true

{
  "compilerOptions": {
    "experimentalDecorators": true
  ...


More info and samples on: www.devarchweb.net

How manage state with MobX

@observer
class PersonPanel {
@observable person = new Person('John')
  ...
}



render()

this.Person.firstName



onClick() {
 this.person = new Person('Paul')
}


More info and samples on: www.devarchweb.net

How to confige Node for TypeScript debugging - seeing typeScript code In order to be able to see TyleScript code instead of compiled JavaScript code in debugger you need to add source mapper.

package.json
  "source-map-loader": "^0.1.5"



tsconfig.json
  "compilerOptions": {
    "sourceMap": true,



webpack.config.dev.js

  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",

  module: {

    preLoaders: [
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { test: /\.js$/, loader: "source-map-loader" }
    ]
  },


More info and samples on: www.devarchweb.net

How to use jQuery with TypeScript 1 Download jQuery Definition for TypeScript 1:
Codeplex
Github

Add to the top of your .ts file

/// <reference path="jquery.d.ts" />


use jQuery in code

var el1 = document.getElementById('content1');
el1.innerHTML = $("<div>ABC</div>").html();


More info and samples on: www.devarchweb.net

How to use jQuery with TypeScript 2 with node.js JavaScript 2 does not require to reference .d.ts in the code file. It uses a reference in package.json
To search if a types are available for a package go to npmjs.com
or http://microsoft.github.io/TypeSearch/

If yes, then run

npm install --save @types/<package>


or update package.json"

 "devDependencies": {
  "@types/<package>": "<version>"
}


and run

npm install


to download the types. The types will be downloaded under node_module\@types\<package>

More info and samples on: www.devarchweb.net

How install and configure Mocha To install Mocha, update package.json:

package.json
{
 "devDependencies": {
  ...
  "@types/mocha": "^2.2.34",
  "mocha": "2.4.5",
...
 }
}



In order to run Mocha, update package.json

package.json
{
 "scripts": {
  "pretest": "tsc",
  "test": "mocha \"dist/**/*.test.js\"",
...
},



The "pretest" step compiles all typescript files (based on tsconfig.js) into dist folder and the "test" steps will execute the test based on *.test.js file pattern

More info and samples on: www.devarchweb.net

How write a dummy test for Mocha Let's write a test. A dummy test to start to show the basics. 1 pass, 1 fail

export class TestException {
  message: string;
  constructor(aMessage : string) {
    this.message = aMessage;
  }
};

describe('Dummy test demo', () => {

 it('should PASS', () => {
   // does nothing
 });

 it('should FAIL', () => {
   throw new TestException("My failed test message");
 });

});


Run the tests from command line by executing

npm test

More info and samples on: www.devarchweb.net

Write a test to test add() function Now something more real. Assuming there is a method add that needs to be tested

import * as myLib from './myLib';

describe('MyLib', () => {

  it('WHEN add() called THEN correct value returned', () => {
    // act
    var result = myLib.add(1, 2);

    // assert
    var expected = 3;
    if (result != expected) throw new TestException(result + " != " + expected);
  });
});


More info and samples on: www.devarchweb.net

How to write test setup or tear down

export class TestException {
  message: string;
  constructor(aMessage : string) {
    this.message = aMessage;
  }
};

// Setup / Tear down
before(function(){
  console.log('   Runs one time before the first test in the file')
})
after(function(){
  console.log('   Runs one time after all tests in the file were executed')
})

beforeEach(function(){
  console.log('   Runs before each test in the file')
})
afterEach(function(){
  console.log('   Runs after each test in the file')
})


describe('Dummy test demo with setup/tear down', () => {

 it('should PASS', () => {
   // does nothing
 });

 it('should FAIL', () => {
   throw new TestException("My failed test message");
 });

});


More info and samples on: www.devarchweb.net

How to write custom test suite with setup or tear down

function makeTestSuite(name:string, tests:any) {
  describe(name, function () {
    before(function () {
      console.log("  executed before each test in the tst suite");
    });

    tests();

    after(function () {
      console.log("  executed before each test in the test suite");
    });
  });
}

makeTestSuite('Suite 1 - with setup', function(){
 it('Test 1', function(done){
   done();
 });
 it('Test 2', function(done){
   done();
 });
});

describe('Test Suite2 - without setup', function(){
 it('Test 3', function(done){
  done();
 });
});


More info and samples on: www.devarchweb.net

Install Expect and write a test for add() function To install Expect, modify package.json

package.json
 "devDependencies": {
  "@types/expect": "^1.13.31",
  "expect": "1.19.0",
...
}



import * as myLib from './myLib';
import * as expect from 'expect';

describe('MyLib:', () => {

  it('WHEN add() called THEN correct value returned', () => {
    // act
    var result = myLib.add(1, 2);

    // assert
    expect(result).toEqual(3);
  });
});


More info and samples on: www.devarchweb.net

Install Chai and write a test for add() function To install Expect, modify package.json

package.json
 "devDependencies": {
  "@types/chai": "3.4.30",
  "chai": "^3.5.0"
...
}



import * as myLib from './myLib';
import * as chai from 'chai';


chai.should();
var expect = chai.expect;
var assert = chai.assert;

describe('MyLib:', () => {

  it('WHEN add() called THEN correct value returned', () => {
    // act
    var result = myLib.add(1, 2);

    // assert
    // Option 1
    expect(result).to.equals(3);
//   expect(result).toEqual(3);  'expect' library style

    // Option 2
    result.should.equal(3);
    // Option 3
    assert.equal(result, 3);
  });
});


More info and samples on: www.devarchweb.net

How to mock calls with 'expect' library'

import * as expect from 'expect';

// method to be mocked
var myService = {
 getValue: function () {}
}

describe('MyService:', () => {

  // bypass call and return value
  it('WHEN getValue() called THEN 3 returned', () => {
    // arrange
    var spy = expect.spyOn(myService, 'getValue')
    var dice = spy.andReturn(3)

    // act
    var result = myService.getValue();

    // assert
    spy.restore()
    expect(result).toEqual(3);
  });

  // fail if not called
  it('WHEN test runs THEN FAIL if getValue() was not called', () => {
    // arrange
    var spy = expect.spyOn(myService, 'getValue')

    // assert
    expect(spy).toHaveBeenCalled('not called')
    spy.restore()
  });
});


More info and samples on: www.devarchweb.net

Compare Chai and Expect assertion libraries Feature      Chai Expect
should() syntax   x
expect() syntax   x  x
assert syntax    x
integrated mocking    x
extensions     ?  x


Recommendation to use Expect because:
- It integrates mocking and stubbing functionality, which limits configuration problem issues if these were in 2 separated libraries
- It limits syntax options how to write asserts, which will lean to cleaner
- Recommended by Cory House (author of Pluralsite React-Redux course - assessed with 5 stars)



More info and samples on: www.devarchweb.net