Introduction to ReactJS — Tensult Blogs
React is a JavaScript framework that enables us to build powerful and complex user interfaces. React is created and maintained by Facebook. The initial public release of React was in May 2013 and stable release was in Nov 2019. It is mostly used to build reusable components. It reduces the re-rendering of the DOM with the help of Virtual DOM.
React versions — https://github.com/facebook/react/releases
React installation — https://www.javatpoint.com/react-installation
Features of ReactJS
1. Virtual DOM
Virtual DOM (Document Object Model) is enabled to React JS to build scalable and fast applications. When changes occurred in the web site, the entire UI is re-rendered in the Virtual DOM, then original DOM will update only changed components. Reconciliation algorithm helps to create a representation of a web page in virtual DOM.
2. JSX(JavaScript eXtension)
The render() function in the HelloWorld component looks like returning HTML, but this is actually JSX. At run-time, the JSX is translated to regular JavaScript. That component after translation looks like this:
When the component renders, it outputs a tree of react elements or a virtual representation of the HTML elements. In the case of the HelloWorld component, that React writes to the DOM will look like this:
3. One Way Data Binding
One Way data binding means we can pass the data from parent component to child component and we can’t pass the data from child component to parent component. But we can modify the data with the help of callback functions. React JS follows a one-way data-binding data flow that gives better control throughout the application.
4. React Native
React Native is a JavaScript framework for mobile application development and is compatible with iOS and Android platforms. The initial release was in March 2015 and a stable release was in November 2019. It helps to create a fast, secure and scalable mobile application. If you know the ReactJS, then you can understand the React Native and its packages.
5. Component
React JS is based on components and components that help to design a User Interface(UI) with logic. Every component should contain the render method and export default. We can call the multiple components inside the single component. Each component should be reusable. We can easily update the component without affecting or disturbing the other components.
State
A state is an object that holds some information and it keeps track of changes in component. The setState() schedules an update to a component state object. States are mutable, which means we can modify the data with the help of setState() method.
Props
Props(properties) are used to pass the data from one component to another component and it’s immutable. We can pass the data from parent to a child component, but we can’t pass the data from child to parent component. Props data is read-only, which means we can’t change the props data in the child component.
For example — PropsExample is a parent component and an Example is a child component. here passing the data (name=”XYZ”) from the PropsExample component to Example component.
Lifecycle Hooks
1. componentWillMount() / componentDidMount()
Sometimes we want to read the API response data or any other data from external to our web application before or after render method execution. componentWillMount() / componentDidMount() will helps to fetch the data before or after rendering.
2. componentWillUpdate() / componentDidUpdate()
Sometimes we want to update some data before or after we change the actual rendering. The componentWillUpdate() / componentDidUpdate() helps to update the data before or after we change the actual rendering.
3. componentWillRecieveProps()
React will call a method when the component is about to receive new props. When receiving new props, then componentWillRecieveProps() method refreshes the component or updates the data.
4. componentWillUnmount()
The componentWillUnmount() helps to handle any clean-up events we might need.
Conclusion
I hope you have understood basic concepts on ReactJS. Share your queries in the comments section and also subscribe to our newsletter for updates.
Originally published at https://blogs.tensult.com on February 24, 2020.
