Tags: Tech Trends, Technologies, IT Staff Augmentation
Share
Table of contents
Quick Access
###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
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}
;
}
});
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:
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
For more information documentación
ReactJS In conclusion, provides an easy and versatile tool to develop UI reusable components, which will help us in our work.
Your learning curve is anything but steep and allow you to create components that may not only be used in one project, but in different ones.
Related Blogs
What programming language is used for API development?
May 02, 2024
Tags: Technologies
The development of APIs is currently something quite common for any company due to the number of applications and software they use for their daily processes. This is achieved with tools such as MuleSoft and also with programming languages
In this dynamic environment, enterprise resource planning (ERP) software emerges as a powerful tool to optimize operations, improve decision-making, and drive growth
Over the past few years, automation has been steadily adopted by companies, offering their employees a useful tool with which they can perform repetitive tasks quickly
The hotel industry, partly including tourism and related companies, has adopted numerous technologies in its daily processes to increase productivity and have greater satisfaction among its users
How the development of an e-commerce solves the low sales of your business
April 30, 2024
Tags: IT Staff Augmentation
The development of an e-commerce opens the doors to a world of opportunities. By taking your business online, you can overcome geographical limitations.