(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:

 

• https://facebook.github.io/react/docs/tutorial.html
• https://css-tricks.com/productive-in-react/

Useful Examples:

• Stopwatch: https://react.rocks/example/stopwatch
• Simple Stopwatch: https://jsfiddle.net/fj8mqowm/

---