By Nick Anastasov

React has gained a lot of popularity recently and has attracted a large and active community. This results in a vast wealth of reusable components for it that will save you time when coding. The library itself encourages writing loosely coupled code that is modular and composable.

In this tutorial, I will show you how to create a small application and how to split it into discrete components that talk to each other. As a base, we will take the npm-driven website example from last month, but we’ll do it the React way. It is interesting to compare the results – the React version has a few more lines of code than the jQuery version, but we can both agree that it is much better organized.

What you need to know about React

• It is a popular client-side library/framework for building user interfaces, which is developed and used by Facebook.
• With it, you organize your application around discrete components, with each handling its own rendering and state. Components can be nested within each other.
• React is fast because it minimizes the number of writes to the DOM (the slowest part of any client-side application).
• The recommended way to write React code is by using JSX – an extension to JavaScript which presents components as HTML elements. JSX needs to be compiled to JS in order to work in browsers.
• It hasn’t hit version 1.0 as of this writing, so there might be changes in the future.
• We have a nice article with examples for learning react which you can check out. Also there is the official getting started guide here.

What we will be building

We will create a simple web app, which invites people to search for locations and to store them in their browsers’ localStorage. The locations will be presented on a Google Map with the help of the GMaps plugin. We will use Bootstrap with the Flatly theme for the interface. In the process, we will break the application down into logical components and make them talk to each other.

Running the demo

If you don’t want to read the entire tutorial, you can go ahead and download the source code from the download button above. To run it, you need to have Node.js and npm installed. Assuming that you have, here is what you need to do:

1. Download the zip with the source code from the button above.
2. Extract it to a folder somewhere on your computer.
3. Open a new terminal (command prompt), and navigate to that folder.
4. Execute npm install. This will download and install all dependencies that are needed.
5. Execute npm run build. This will compile the react components down to a regular JavaScript file named compiled.js.
6. Open index.html in your browser. You should see the app.

There is one more npm command that I’ve prepared for you to make your development easier:

npm run watch

This will compile the JSX code down to JavaScript and will continue to monitor it for changes. If you change a file, the code will be recompiled automatically for you. You can see these commands in the package.json file.

The source code is easy to follow and has plenty of comments, so for those of you who prefer to read the source, you can skip the rest of the article.

Setting things up

As I mentioned, the recommended way to write React code is by using a JavaScript extension called JSX, which needs to be transformed to JavaScript. There are a few tools that can do this but the one I recommend is reactify – a browserify transform. So in addition to compiling JSX down to JavaScript, you get access to the require() node.js call and with it the ability to install and use libraries from npm.

To set up reactify, browserify and the rest, run this command:

npm install browserify reactify watchify uglify-js react

To create a production ready and minified JavaScript file, which you can put online, run this command in your terminal:

NODE_ENV=production browserify -t [ reactify --es6 ] main.js | uglifyjs > compiled.min.js

Reactify supports a limited set of the new ES6 features with the --es6 flag, which I’ve used in the source code (you will see it in a moment).

While developing, use the following command:

watchify -v -d -t [ reactify --es6 ] main.js -o compiled.js

Watchify will monitor your files for changes and recompile your source code if it is needed. It also enables source maps, so you can use the Chrome Debugger to step through your code.

Great! You can now write React modules, require() npm libraries and even use some ES6 features. You are ready for writing some code!

The code

Here are the components that we will be writing:

• App is the main component. It contains methods for the actions that can be performed by the user like searching, adding a location to favorites and more. The other components are nested inside it.
• CurrentLocation presents the currently visited address in the map. Addresses can be added or removed from favorites by clicking the star icon.
• LocationList renders all favorite locations. It creates a LocationItem for each.
• LocationItem is an individual location. When it is clicked, its corresponding address is searched for and highlighted in the map.
• Map integrates with the GMaps library, and renders a map from Google Maps.
• Search is a component that wraps around the search form. When it is submitted, a search for the location is triggered.

App.js

First up is App. In addition to the lifecycle methods that React requires, it has a few additional ones that reflect the main actions that can be performed by the user like adding and removing an address from favorites and searching. Notice that I am using the shorter ES6 syntax for defining functions in objects.

var React = require('react');

var Search = require('./Search');
var Map = require('./Map');
var CurrentLocation = require('./CurrentLocation');
var LocationList = require('./LocationList');


var App = React.createClass({

	getInitialState(){

		// Extract the favorite locations from local storage

		var favorites = [];

		if(localStorage.favorites){
			favorites = JSON.parse(localStorage.favorites);
		}

		// Nobody would get mad if we center it on Paris by default

		return {
			favorites: favorites,
			currentAddress: 'Paris, France',
			mapCoordinates: {
				lat: 48.856614,
				lng: 2.3522219
			}
		};
	},

	toggleFavorite(address){

		if(this.isAddressInFavorites(address)){
			this.removeFromFavorites(address);
		}
		else{
			this.addToFavorites(address);
		}

	},

	addToFavorites(address){

		var favorites = this.state.favorites;

		favorites.push({
			address: address,
			timestamp: Date.now()
		});

		this.setState({
			favorites: favorites
		});

		localStorage.favorites = JSON.stringify(favorites);
	},

	removeFromFavorites(address){

		var favorites = this.state.favorites;
		var index = -1;

		for(var i = 0; i < favorites.length; i++){

			if(favorites[i].address == address){
				index = i;
				break;
			}

		}

		// If it was found, remove it from the favorites array

		if(index !== -1){
			
			favorites.splice(index, 1);

			this.setState({
				favorites: favorites
			});

			localStorage.favorites = JSON.stringify(favorites);
		}

	},

	isAddressInFavorites(address){

		var favorites = this.state.favorites;

		for(var i = 0; i < favorites.length; i++){

			if(favorites[i].address == address){
				return true;
			}

		}

		return false;
	},

	searchForAddress(address){
		
		var self = this;

		// We will use GMaps' geocode functionality,
		// which is built on top of the Google Maps API

		GMaps.geocode({
			address: address,
			callback: function(results, status) {

				if (status !== 'OK') return;

				var latlng = results[0].geometry.location;

				self.setState({
					currentAddress: results[0].formatted_address,
					mapCoordinates: {
						lat: latlng.lat(),
						lng: latlng.lng()
					}
				});

			}
		});

	},

	render(){

		return (

			<div>
				<h1>Your Google Maps Locations</h1>

				<Search onSearch={this.searchForAddress} />

				<Map lat={this.state.mapCoordinates.lat} lng={this.state.mapCoordinates.lng} />

				<CurrentLocation address={this.state.currentAddress} 
					favorite={this.isAddressInFavorites(this.state.currentAddress)} 
					onFavoriteToggle={this.toggleFavorite} />

				<LocationList locations={this.state.favorites} activeLocationAddress={this.state.currentAddress} 
					onClick={this.searchForAddress} />

			</div>

		);
	}

});

module.exports = App;

In the render method, we initialize the other components. Each component receives only the data that it needs to get its job done, as attributes. In some places, we also pass methods which the child components will call, which is a good way for components to communicate while keeping them isolated from one another.

CurrentLocation.js

Next is CurrentLocation. This component presents the address of the currently displayed location in an H4 tag, and a clickable star icon. When the icon is clicked, the App’s toggleFavorite method is called.

var React = require('react');

var CurrentLocation = React.createClass({

	toggleFavorite(){
		this.props.onFavoriteToggle(this.props.address);
	},

	render(){

		var starClassName = "glyphicon glyphicon-star-empty";

		if(this.props.favorite){
			starClassName = "glyphicon glyphicon-star";
		}

		return (
			<div className="col-xs-12 col-md-6 col-md-offset-3 current-location">
				<h4 id="save-location">{this.props.address}</h4>
				<span className={starClassName} onClick={this.toggleFavorite} aria-hidden="true"></span>
			</div>
		);
	}

});

module.exports = CurrentLocation;

LocationList.js

LocationList takes the array with favorite locations that was passed to it, creates a LocationItem object for each and presents it in a Bootstrap list group.

var React = require('react');
var LocationItem = require('./LocationItem');

var LocationList = React.createClass({

	render(){

		var self = this;

		var locations = this.props.locations.map(function(l){

			var active = self.props.activeLocationAddress == l.address;

			// Notice that we are passing the onClick callback of this
			// LocationList to each LocationItem.

			return <LocationItem address={l.address} timestamp={l.timestamp} 
					active={active} onClick={self.props.onClick} />
		});

		if(!locations.length){
			return null;
		}

		return (
			<div className="list-group col-xs-12 col-md-6 col-md-offset-3">
				<span className="list-group-item active">Saved Locations</span>
				{locations}
			</div>
		)

	}

});

module.exports = LocationList;

LocationItem.js

LocationItem represents an individual favorite location. It uses the moment library to calculate the relative time since the location was added as a favorite.

var React = require('react');
var LocationItem = require('./LocationItem');
var moment = require('moment');

var LocationItem = React.createClass({

	handleClick(){
		this.props.onClick(this.props.address);
	},

	render(){

		var cn = "list-group-item";

		if(this.props.active){
			cn += " active-location";
		}

		return (
			<a className={cn} onClick={this.handleClick}>
				{this.props.address}
				<span className="createdAt">{ moment(this.props.timestamp).fromNow() }</span>
				<span className="glyphicon glyphicon-menu-right"></span>
			</a>
		)

	}

});

module.exports = LocationItem;

Map.js

Map is a special component. It wraps the Gmaps plugin, which is not a React component by itself. By hooking to the Map’s componentDidUpdate method, we can initialize a real map inside the #map div whenever the displayed location is changed.

var React = require('react');

var Map = React.createClass({

	componentDidMount(){

		// Only componentDidMount is called when the component is first added to
		// the page. This is why we are calling the following method manually. 
		// This makes sure that our map initialization code is run the first time.

		this.componentDidUpdate();
	},

	componentDidUpdate(){

		if(this.lastLat == this.props.lat && this.lastLng == this.props.lng){

			// The map has already been initialized at this address.
			// Return from this method so that we don't reinitialize it
			// (and cause it to flicker).

			return;
		}

		this.lastLat = this.props.lat;
		this.lastLng = this.props.lng

		var map = new GMaps({
			el: '#map',
			lat: this.props.lat,
			lng: this.props.lng
		});

		// Adding a marker to the location we are showing
		
		map.addMarker({
			lat: this.props.lat,
			lng: this.props.lng
		});
	},

	render(){

		return (
			<div className="map-holder">
				<p>Loading...</p>
				<div id="map"></div>
			</div>
		);
	}

});

module.exports = Map;

Search.js

The Search component consists of a Bootstrap form with an input group. When the form is submitted the App’s searchForAddress method is called.

var React = require('react');

var Search = React.createClass({

	getInitialState() {
		return { value: '' };
	},

	handleChange(event) {
		this.setState({value: event.target.value});
	},

	handleSubmit(event){
		
		event.preventDefault();
		
		// When the form is submitted, call the onSearch callback that is passed to the component

		this.props.onSearch(this.state.value);

		// Unfocus the text input field
		this.getDOMNode().querySelector('input').blur();
	},

	render() {

		return (
			<form id="geocoding_form" className="form-horizontal" onSubmit={this.handleSubmit}>
				<div className="form-group">
					<div className="col-xs-12 col-md-6 col-md-offset-3">
						<div className="input-group">
							<input type="text" className="form-control" id="address" placeholder="Find a location..." 
							value={this.state.value} onChange={this.handleChange} />
							<span className="input-group-btn">
								<span className="glyphicon glyphicon-search" aria-hidden="true"></span>
							</span>
						</div>
					</div>
				</div>
			</form>
		);

	}
});

module.exports = Search;

main.js

All that is left is to add the App component to the page. I am adding it to a container div with the #main id (you can see this element in index.html in the downloadable zip file).

var React = require('react');
var App = require('./components/App');

React.render(
  <App />,
  document.getElementById('main')
);

In addition to these files, I have included the GMaps library and the Google Maps JavaScript API on which it depends, as tags in index.html.

Ready!

I hope that this tutorial gave you a better understanding of how to structure React applications. There is much more you can do with the library, including server-side rendering, which we hope to cover in the future.

Source:: Tutorialzine.com

By Axel Rauschmayer

This blog post describes the new number and Math features of ECMAScript 6.

Overview

You can now specify integers in binary and octal notation:

    > 0xFF // ES5: hexadecimal
    255
    > 0b11 // ES6: binary
    3
    > 0o10 // ES6: octal
    8

The global object Number gained a few new properties. Among others:

• Number.EPSILON for comparing
• Methods and constants for determining whether an integer is within the signed 53 bit range that can be safely represented by JavaScript.

New integer literals

ECMAScript 5 already has literals for hexadecimal integers:

    > 0x9
    9
    > 0xA
    10
    > 0x10
    16
    > 0xFF
    255

ECMAScript 6 brings two new kinds of integer literals:

• Binary literals have the prefix 0b or 0B:

      > 0b11
      3
      > 0b100
      4
  

• Octal literals have the prefix 0o or 0O (yes, that’s a zero followed by the capital letter O; you’ll be fine if you use the first variant):

      > 0o7
      7
      > 0o10
      8
  

Remember that the method Number.prototype.toString(radix) can be used to convert numbers back:

    > (255).toString(16)
    'ff'
    > (4).toString(2)
    '100'
    > (8).toString(8)
    '10'

Use case for octal literals: Unix-style file permissions

In the Node.js file system module, several functions have the parameter mode. Its value is used to specify file permissions, via an encoding that is a holdover from Unix:

• Permissions are specified for three categories of users:
  • User: the owner of the file
  • Group: the members of the group associated with the file
  • All: everyone
• Per category, the following permissions can be granted:
  • r (read): the users in the category are allowed to read the file
  • w (write): the users in the category are allowed to change the file
  • x (execute): the users in the category are allowed to run the file

That means that permissions can be represented by 9 bits (3 categories with 3 permissions each):

	User	Group	All
Permissions	r, w, x	r, w, x	r, w, x
Bit	8, 7, 6	5, 4, 3	2, 1, 0

The permissions of a single category of users are stored in 3 bits:

Bits	Permissions	Octal digit
000	–––	0
001	––x	1
010	–w–	2
011	–wx	3
100	r––	4
101	r–x	5
110	rw–	6
111	rwx	7

That means that octal numbers are a compact representation of all permissions, you only need 3 digits, one digit per category of users. Two examples:

• 755 = 111,101,101: I can change, read and execute; everyone else can only read and execute.
• 640 = 110,100,000: I can read and write; group members can read; everyone can’t access at all.

parseInt() and the new integer literals

parseInt() has the following signature:

    parseInt(string, radix?)

It provides special support for the hexadecimal literal notation – the prefix 0x (or 0X) of string is removed if:

• radix is missing or 0. Then radix is set to 16.
• radix is already 16.

For example:

    > parseInt('0xFF')
    255
    > parseInt('0xFF', 0)
    255
    > parseInt('0xFF', 16)
    255

In all other cases, digits are only parsed until the first non-digit:

    > parseInt('0xFF', 10)
    0
    > parseInt('0xFF', 17)
    0

parseInt() does not have special support for binary or octal literals!

    > parseInt('0b111')
    0
    > parseInt('0b111', 2)
    0
    > parseInt('111', 2)
    7
    
    > parseInt('0o10')
    0
    > parseInt('0o10', 8)
    0
    > parseInt('10', 8)
    8

If you want to parse these kinds of literals, you need to use Number():

    > Number('0b111')
    7
    > Number('0o10')
    8

New Number constructor properties

This section describes new properties that the constructor Number has picked up in ECMAScript 6.

Previously global functions

Four number-related functions are already available as global functions and have been added (with no or little modifications) to Number, as methods: isFinite, isNaN, parseFloat and parseInt.

Number.isFinite(number)

Is number an actual number (neither Infinity nor -Infinity nor NaN)?

    > Number.isFinite(Infinity)
    false
    > Number.isFinite(-Infinity)
    false
    > Number.isFinite(NaN)
    false
    > Number.isFinite(123)
    true

The advantage of this method is that it does not coerce its parameter to number (whereas the global function does):

    > Number.isFinite('123')
    false
    > isFinite('123')
    true

Number.isNaN(number)

Is number the value NaN? Making this check via === is hacky. NaN is the only value that is not equal to itself:

    > let x = NaN;
    > x === NaN
    false

Therefore, this expression is used to check for it

    > x !== x
    true

Using Number.isNaN() is more self-descriptive:

    > Number.isNaN(x)
    true

Number.isNan() also has the advantage of not coercing its parameter to number (whereas the global function does):

    > Number.isNaN('???')
    false
    > isNaN('???')
    true

Number.parseFloat and Number.parseInt

The following two methods work exactly like the global functions with the same names. They were added to Number for completeness sake; now all number-related functions are available there.

• Number.parseFloat(string)
• Number.parseInt(string, radix)

Number.EPSILON

Especially with decimal fractions, rounding errors can become a problem in JavaScript. For example, the

    > 0.1 + 0.2 === 0.3
    false

Number.EPSILON specifies a reasonable margin of error when comparing floating point numbers. It provides a better way to compare floating point values, as demonstrated by the following function.

    function epsEqu(x, y) {
        return Math.abs(x - y) < Number.EPSILON;
    }
    console.log(epsEqu(0.1+0.2, 0.3)); // true

Number.isInteger(number)

JavaScript has only floating point numbers (doubles). Accordingly, integers are simply floating point numbers without a decimal fraction.

Number.isInteger(number) returns true if number is a number and does not have a decimal fraction.

    > Number.isInteger(-17)
    true
    > Number.isInteger(33)
    true
    > Number.isInteger(33.1)
    false
    > Number.isInteger('33')
    false
    > Number.isInteger(NaN)
    false
    > Number.isInteger(Infinity)
    false

Safe Integers

JavaScript numbers have only enough storage space to represent 53 bit signed integers. That is, integers i in the range −2^53^ < i < 2^53^ are safe. What exactly that means is explained momentarily. The following properties help determine whether a JavaScript integer is safe:

• Number.isSafeInteger(number)
• Number.MIN_SAFE_INTEGER
• Number.MAX_SAFE_INTEGER

The notion of safe integers centers on how mathematical integers are represented in JavaScript. In the range (−2^53^, 2^53^) (excluding the lower and upper bounds), JavaScript integers are safe: there is a one-to-one mapping between them and the mathematical integers they represent.

Beyond this range, JavaScript integers are unsafe: two or more mathematical integers are represented as the same JavaScript integer. For example, starting at 2^53^, JavaScript can represent only every second mathematical integer:

    > Math.pow(2, 53)
    9007199254740992
    
    > 9007199254740992
    9007199254740992
    > 9007199254740993
    9007199254740992
    > 9007199254740994
    9007199254740994
    > 9007199254740995
    9007199254740996
    > 9007199254740996
    9007199254740996
    > 9007199254740997
    9007199254740996

Therefore, a safe JavaScript integer is one that unambiguously represents a single mathematical integer.

The properties of Number

The two Number properties specifying the lower and upper bound of safe integers could be defined as follows:

    Number.MAX_SAFE_INTEGER = Math.pow(2, 53)-1;
    Number.MIN_SAFE_INTEGER = -Number.MAX_SAFE_INTEGER;

Number.isSafeInteger() determines whether a JavaScript number is a safe integer and could be defined as follows:

    Number.isSafeInteger = function (n) {
        return (typeof n === 'number' &&
            Math.round(n) === n &&
            Number.MIN_SAFE_INTEGER <= n &&
            n <= Number.MAX_SAFE_INTEGER);
    }

For a given value n, this function first checks whether n is a number and an integer. If both checks succeed, n is safe if it is greater than or equal to MIN_SAFE_INTEGER and less than or equal to MAX_SAFE_INTEGER.

Safe results of arithmetic computations

How can we make sure that results of arithmetic computations are correct? For example, the following result is clearly not correct:

    > 9007199254740990 + 3
    9007199254740992

We have two safe operands, but an unsafe result:

    > Number.isSafeInteger(9007199254740990)
    true
    > Number.isSafeInteger(3)
    true
    > Number.isSafeInteger(9007199254740992)
    false

The following result is also incorrect:

    > 9007199254740995 - 10
    9007199254740986

This time, the result is safe, but one of the operands isn’t:

    > Number.isSafeInteger(9007199254740995)
    false
    > Number.isSafeInteger(10)
    true
    > Number.isSafeInteger(9007199254740986)
    true

Therefore, the result of applying an integer operator op is guaranteed to be correct only if all operands and the result are safe. More formally:

    isSafeInteger(a) && isSafeInteger(b) && isSafeInteger(a op b)

implies that a op b is a correct result.

Source of this section

• “Clarify integer and safe integer resolution”, email by Mark S. Miller to the es-discuss mailing list.

Math

The global object Math has several new methods in ECMAScript 6.

Various numerical functionality

Math.sign(x)

Returns the sign of x as -1 or +1. Unless x is either NaN or zero; then x is returned[1].

[1]: While that is something that you normally don’t see, that means that -0 produces the result -0 and +0 produces the result +0.

    > Math.sign(-8)
    -1
    > Math.sign(3)
    1
    
    > Math.sign(0)
    0
    > Math.sign(NaN)
    NaN
    
    > Math.sign(-Infinity)
    -1
    > Math.sign(Infinity)
    1

Math.trunc(x)

Removes the decimal fraction of x.

    > Math.trunc(3.1)
    3
    > Math.trunc(3.9)
    3
    > Math.trunc(-3.1)
    -3
    > Math.trunc(-3.9)
    -3

Math.cbrt(x)

Returns the cube root of x (∛x).

    > Math.cbrt(8)
    2

Using 0 instead of 1 with exponentiation and logarithm

JavaScript numbers (doubles) close to zero are stored with a higher precision.

1 × 10^−16^

    > 1e-16 === 0
    false
    > 1 + 1e-16 === 1
    true

Math.expm1(x)

Returns Math.exp(x)-1. The inverse of Math.log1p().

Therefore, this method provides higher precision whenever Math.exp() has results close to 1.

    > Math.expm1(1e-10)
    1.00000000005e-10
    > Math.exp(1e-10)-1
    1.000000082740371e-10

    > var Decimal = require('decimal.js').config({precision:50});
    > new Decimal(1e-10).exp().minus(1).toString()
    '1.000000000050000000001666666666708333333e-10'

Math.log1p(x)

Returns Math.log(1 + x). The inverse of Math.expm1().

Therefore, this method lets you specify parameters that are close to 1 with a higher precision.

We have already established that 1 + 1e-16 === 1. Therefore, it is no surprise that the following two calls of log() produce the same result:

    > Math.log(1 + 1e-16)
    0
    > Math.log(1 + 0)
    0

In contrast, log1p() produces different results:

    > Math.log1p(1e-16)
    1e-16
    > Math.log1p(0)
    0

Logarithms to base 2 and 10

Math.log2(x)

Computes the logarithm to base 2.

    > Math.log2(8)
    3

Math.log10(x)

Computes the logarithm to base 10.

    > Math.log10(100)
    2

Support for compiling to JavaScript

Emscripten pioneered a coding style that was later picked up by asm.js: The operations of a virtual machine (think bytecode) are expressed in static subset of JavaScript. That subset can be executed efficiently by JavaScript engines: If it is the result of a compilation from C++, it runs at about 70% of native speed.

Math.fround(x)

Rounds x to a 32 bit floating point value (float). Used by asm.js to tell an engine to internally use a float value.

Math.imul(x, y)

Multiplies the two 32 bit integers x and y and returns the lower 32 bits of the result. This is the only 32 bit basic math operation that can’t be simulated by using a JavaScript operator and coercing the result back to 32 bits. For example, idiv could be implemented as follows:

    function idiv(x, y) {
        return (x / y) | 0;
    }

In contrast, multiplying two large 32 bit integers may produce a double that is so large that lower bits are lost.

Bitwise operations

• Math.clz32(x)
  Counts the leading zero bits in the 32 bit integer x.

      > Math.clz32(0b01000000000000000000000000000000)
      1
      > Math.clz32(0b00100000000000000000000000000000)
      2
      > Math.clz32(2)
      30
      > Math.clz32(1)
      31
  

Trigonometric methods

• Math.sinh(x)
  Computes the hyperbolic sine of x.

• Math.cosh(x)
  Computes the hyperbolic cosine of x.

• Math.tanh(x)
  Computes the hyperbolic tangent of x.

• Math.asinh(x)
  Computes the inverse hyperbolic sine of x.

• Math.acosh(x)
  Computes the inverse hyperbolic cosine of x.

• Math.atanh(x)
  Computes the inverse hyperbolic tangent of x.

• Math.hypot(...values)
  Computes the square root of the sum of squares of its arguments.

Source:: 2ality