
Using ReactJS - Part 1
Share
Table of contents
###What is ReactJS?
It is a library created by Facebook, focused on the development for web UI components and their performance. It uses what they call "Virtual DOM", updating only parts of the DOM that changed without having to render the whole page or section of the page. This gives them an advantage in performance and rendering times, leaving behind other libraries as AngularJS.
React JS only provides tools for developing web components, but does not provide tools to make Ajax calls, nor events, nor promises, but that is OK, since we would only add the libraries needed, for example: SuperAgent, Kriskowal / q lodash, and AngularJS, which gives the option to do a wrap with the React components with an angular directive.
###How to use it?
React JS operates on classes for rendering HTML, you must first create a class of ract.
[prism:javascript]
var HelloWorld = React.createClass({
render: function() {
return
;
}
});
React.render(new HelloWorld(), document.body);
[/prism:javascript]
The other way to handle variables within the components react are the state, like props any change to a state will cause the component to again, but this time only if the setstate method is used as we see in the increment class method HelloWorld otherwise, no changes will be made to the state; What should I use, props or state? for attributes of sight, as information to be displayed to the user or an icon, use state; if a variable flow control or not related directly to the view, use props or private variables, if the prop is not inherited from a parent view.
ReactJS provides a number of listeners that can override in each class to have control of it is rendered and when rendered, or if we want to be renderize based on any state property or private variable, these methods are:
Hello, {this.props.name}!
;
}
});
React.render(new HelloWorld({ name: "Yohendry Hurtado" }), document.body);
[/prism:javascript]
Here we can see this line : [prism:javascript] return Hello, {this.props.name}!
; [/prism:javascript]
this.props, is an object with all the properties that are assigned when instantiating the component, these properties are the way in which react send the information to the components, as we can see here [prism:javascript]React.render(new HelloWorld({ name: "Yohendry Hurtado" }), document.body);[/prism:javascript] where we change the property name to the HellowWorld component. Any changes to these properties will update the view, as mentioned earlier only where really changed, these changes can come from parents or children view components (nested views).
[prism:javascript]
var HelloWorld = React.createClass({
getInitialState: function() {
return {
counter: 0
};
},
increment: function() {
this.setState({ counter: this.state.counter+1 });
},
render: function() {
return {this.state.counter}
- componentWillMountt - runs before rendering first component
- componentDidMount - It runs just after rendering first component
- componentWillUpdate - runs before upgrading the component, if you return false in this listener, you prevent component update
- componentDidUpdate - It runs to update the component
- componentWillUnmount- It executes before destroying a component
Related blogs

Digital Signatures for Businesses: How Rootstack Can Be Your Digital Partner
August 6th 2025
If we go to a technical definition, a digital signature for companies is a set of data that accompanies a document with the purpose of identifying the signatory without leaving room for error

Digital Signature vs. Electronic Signature
August 6th 2025
At Rootstack, together with our partner Validated ID, we have implemented multiple digital signature solutions for various companies and industries, so, based on our experience, we can help you in this process

Most important features of a Digital Signature Solution
August 6th 2025
This is nothing more than software to facilitate your company's processes, avoiding the use of physical papers that can be damaged, lost or, in the worst case, fall victim to forged signatures that can lead to legal problems

A new era of speed and security at Pantheon: GitHub Actions, PHP Runtime, and a revamped UI
August 1st 2025
Pantheon is a cloud-based Platform as a Service (PaaS) specialized in hosting and managing websites developed in WordPress and Drupal, two of the most popular content management systems (CMS) in the world

From Slack to Jira: The next generation of AI-powered automation at Atlassian
August 1st 2025
In this new paradigm, technology does not replace human beings, but rather enhances their capabilities, freeing up time for creativity, analysis and strategic decision-making

Cloud Security: Key Controls and Best Practices for Hybrid Cloud
July 31st 2025
As organizations evolve toward hybrid architectures that combine on-premises environments with public and private clouds, the risks and complexity of data and systems protection also grow