How to: ReactJS basics

(by AXDS)

ReactJS is a library developed at Facebook. It uses a concept called a Virtual DOM that renders nodes based on state changes. It performs mostly on the client side, but can be rendered server side.

The CDN links: https://facebook.github.io/react/downloads.html

ReactJS blank JSFiddle: https://jsfiddle.net/00d9dwzs/

The main idea around ReactJS is that is built around rendering components.

Firstly, we need to define a place in the HTML for the ReactJS application to render to. (You could also just use the HTML document or body)

<div id="container">

</div>

Components are defined using the 'createClass' method.

var App = React.createClass({

render: function() {
return (
<h1>Hello world!</h1>
)
}

});

Rendering out this components is pretty straight forward:

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

The above should render and display ‘Hello world!’ in the defined location.
components are custom classes, which can call and use other components.

Here’s a JSFiddle showing component rendering: https://jsfiddle.net/o0e73fqf/

In order to make this more useful we can introduce ‘props’. These are variables passes through components using attributes. For example, including 'attributeName="Hello"' This attributes are then available using '{this.props.attributeName}'

var App = React.createClass({

render: function() {
return (
<h1>Hello, {this.props.firstName} {this.props.lastName}!</h1>
)
}
});

React.render(<App firstName="John" lastName="Smith"/>, document.getElementById('container'));

Here’s a JSFiddle of the use of props:  https://jsfiddle.net/13jg12t9/

Another thing to know about ReactJS is it’s use of ‘state’. A component has state variables, these variables can be initialised straight away by setting them inside of the ‘getInitialState’ function. This can be available and read using '{this.state.stateVariable}' or, set using the 'this.setState' function.

var App = React.createClass({

getInitialState: function(){
return{
firstName: "John",
lastName: "Smith"
}
},


render: function() {
return (
<h1>Hello, {this.state.firstName} {this.state.lastName}!</h1>
);
}

});

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

Here’s a JSFiddle of the use of state: https://jsfiddle.net/jrk9ycmn/

Components can be called and used inside of another component. This can be useful as you can set up a component that branches off to relevant other components that handle and return some HTML creation given their data attributes.

 

var peopleList =
[
{
firstName: "John",
lastName: "Smith"
},
{
firstName: "James",
lastName: "Bond"
}
];

var App = React.createClass({
render: function() {
return (
<div>
<Message message="Hello, world!"/>
<MakeListOfPeople data={this.props.data}/>
</div>
);
}
});

var Message = React.createClass({
render: function() {
return (
<div className="messageDiv">
<h1>{this.props.message}</h1>
</div>
);
}
});

var MakeListOfPeople = React.createClass({
render: function() {
var PeopleList = this.props.data.map(function(people) {
return (
	<li>{people.firstName} {people.lastName}< /li>
);
});
return (
<ul className="commentList">
{PeopleList}</ul>
);
}
});

React.render(<App data={peopleList}/>, document.getElementById('container'));

Here’s a JSFiddle of components inside components: https://jsfiddle.net/2m4vLL56/

Although there are a lot more component functions to know, it’s pretty much the basics of ReactJS.


 

Information/Tutorials Links:

 

Useful Examples:


 

How to: Google Maps

(by AXDS)

Example: http://jsfiddle.net/nLxqqx33/

Google Maps API works in a similar way to the Google Charts API.

The script is added:

<script src="http://maps.googleapis.com/maps/api/js"></script>

Create where the map is going to go:

<div id="googleMapLocation" style="height:500px;width:500px;"></div>

Remember to set the height and width of the div element. The Google map renders using percentage rather than pixels to work out sizing. Missing out the height and width from the div will show nothing, and look as though it hasn’t worked, but will actually produce a 0px * 0px map.

Similar to the Google Charts API the function that creates the map takes in the div location and map options as arguments.

var map = new google.maps.Map(mapDivLocation,mapSettings);

The list of all the map settings can be found online. The most common settings are the where the map should be centred and how much the map should be zoomed in at this place.

var mapSettings = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7
};

The functions that initialise the map needs to run after the page has loaded. All together it should look something like this:

HTML:

<div id="googleMapLocation" style="height:500px;width:500px;"></div>

SCRIPT:

window.onload = function(){
initMap();
};

function initMap(){
var mapLocation = document.getElementById("googleMapLocation");
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7
};
var map = new google.maps.Map(mapLocation,mapProp);
}

This will produce a working Google Map.


Markers can be added to the map by calling the setMap function from the API (This would be inside the inside the initMap function after the map has been initialised:

 var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.508742,-0.120850),
title:"Hello World!";
});

marker.setMap(map);