React.js is an amazing framework that is used for creating powerful and useful applications. If you are new to React.js and you want to become effective and proficient in the use of Facebook’s react Library, this guide will give you the basics and help you get started on the right note. There are so many benefits you will find when using react.js as a web developer.
For starters, React.js is a UI library that is designed for the creation of interactive, reusable and tasteful UI components. You can also check out our post on ‘React.js Resources‘ which has many tutorial for beginners. This is a framework that will keep all your components up to date at all times. To get started on React.js, you have to download its provided starter kit but before then, you will need to learn as much as you can on the basics and other useful skills that will give you the perfect start up.
React.js Components
Components are the basic building blocks that you will use in React.js. Below is how you can come up with one:
<script type="text/jsx">
/** @jsx React.DOM */
React.render(
<h1>Hello, world!</h1>,
document.getElementById('myDiv')
);
</script>
/** @jsx React.DOM */ has been used at the top in order to tell React.js that you have used JSX so that it can transform this markup. Therefore, whenever you use JSX, you have to include it.
The method of writing the component above is called render. The first argument indicates to the component that you would like to render and the one that follows is the DOM node that your component is mean to mount to.
You can come up with your custom component classes too, and for these, you will utilize the createClass method. For this, you will use object of specifications for your component’s argument. Below is an example:
var MyComponent = React.createClass({
render: function(){
return (
<h1>Hello, world!</h1>
);
}
});
Once you have written your class, you should be able to render it to your document using the code below:
React.render(
<MyComponent/>,
document.getElementById('myDiv')
);
React.js Props
When you are using your own defined components, you can always add attributes to it. These are called props. In your component, these props will be available as this.props. They should also be utilised in the render method in order to render a dynamic piece of data as illustrated:
var MyComponent = React.createClass({
render: function(){
return (
<h1>Hello, {this.props.name}!</h1>
);
}
});
React.render(<MyComponent name="Handsome" />, document.getElementById('myDiv'));
React.js State
Every component on React.js will have a state object and a prop object. To set the state, you will use setState method. When you call setState, you will trigger a UI update and this is what React.js’ interactivity is all about.
You can use getInitialState method if you want to set an initial state before any interaction takes place.
Below is an illustration that will show you how you can set the state for your components.
var MyComponent = React.createClass({
getInitialState: function(){
return {
count: 5
}
},
render: function(){
return (
<h1>{this.state.count}</h1>
)
}
});
React.js Specs
The only spec that you will need in the creation of a component is the render method. However, there are numerous lifecycle methods and other specs that you can use in case you would like your component to do something for you.
The lifecycle methods are:
– componentDidMount: this will be invoked only once and only on the client after rendering has already occurred
– componentWillMount: this will be invoked only once on both the client and the server and this occurs before rendering occurs
– componentWillUnmount: this is invoked before the unmounting component
– shouldComponentUpdate: its return value will determine whether the component is supposed to update.
Other specs that you can use are:
– mixins: this is a set of objects that are used to expand the functionality of the current component.
– getInitialState: the return value in this case will be the primary value for the state
– getDefaultProps: this will set the fallback props if the props have not been supplied.
There are so many more specs and lifecycle methods which you are able to use in react.js to achieve the desired results.
The Events
React.js comes with an events system that is built in, which can be used in different browsers. The events in this case are given as properties of components and they are able to trigger methods. Below is an example of how you can make a counting increment using inbuilt events in React.js:
/** @jsx React.DOM */
var Counter = React.createClass({
incrementCount: function(){
this.setState({
count: this.state.count + 1
});
},
getInitialState: function(){
return {
count: 0
}
},
render: function(){
return (
<div class="my-component">
<h1>Count: {this.state.count}</h1>
<button type="button" onClick={this.incrementCount}>Increment</button>
</div>
);
}
});
React.render(<Counter/>, document.getElementById('mount-point'));
Unidirectional Data Flow using React.js
React.js is quite different from frameworks like Angular.js in that its data does not take a specific direction as it flows via its state and props objects. Therefore, in case you have a hierarchy with so many components, the parent component is supposed to manage the state then pass it down to the rest of the chain through the props.
If it will be necessary, the setState method should be the one used to update your state so that you will have a UI refresh result. The value that will come in the result will be passed down from the parent component to the child components utilising the attributes that can be accessed in those children through this.props.
An example is as below:
/** @jsx React.DOM */
var FilteredList = React.createClass({
filterList: function(event){
var updatedList = this.state.initialItems;
updatedList = updatedList.filter(function(item){
return item.toLowerCase().search(
event.target.value.toLowerCase()) !== -1;
});
this.setState({items: updatedList});
},
getInitialState: function(){
return {
initialItems: [
"Apples",
"Broccoli",
"Chicken",
"Duck",
"Eggs",
"Fish",
"Granola",
"Hash Browns"
],
items: []
}
},
componentWillMount: function(){
this.setState({items: this.state.initialItems})
},
render: function(){
return (
<div className="filter-list">
<input type="text" placeholder="Search" onChange={this.filterList}/>
<List items={this.state.items}/>
</div>
);
}
});
var List = React.createClass({
render: function(){
return (
<ul>
{
this.props.items.map(function(item) {
return <li key={item}>{item}</li>
})
}
</ul>
)
}
});
React.render(<FilteredList/>, document.getElementById('mount-point'));
React.js is a great framework that you can use in the creation of excellent applications which include a shopping cart application or even a real-time stream of your favorite social networking site like Twitter. Learning the basics gets you started on the right footing as you learn more about the framework.
