I have started my development journey as a web developer (php). codeigniter was the first framework I have used. Then, I moved to mobile development and after five long years, I came back again to this web development world. I fell love with JavaScript and like every other developers, that common question hit me : ‘what framework should I learn ?’
I checked some introductory videos on different frameworks and thought about stick with React.
React is awesome. It makes easy to build web interfaces using reusable components. Also, if you master in React, you can easily move to cross platform mobile development using React-Native.
In this series of posts, I will try to teach you what I learnt as a React developer. Let me know on twitter or drop me a mail what you think and if you have any suggestions or queries.
What is ReactJS :
Let’s start with what it is. ReactJS is a JavaScript library used for building user interface. It was developed by Facebook initially. They used it internally and later open-sourced it in May, 2013.
The main advantage of React is that you can divide your web interface into different reusable components. You can use a component on different parts of your UI without rewriting the whole code.
For example, suppose you are showing the current weather info in your home page. You can create one component to fetch the data and show that information. If you want to show the same information in any other page, you can simply use that component without rewriting the same code again. You can change anything in the component and that will reflect on everywhere you are using that component.
Features of React :
Following are the main features of ReactJS :
- Virtual DOM
- JSX : JSX stands for JavaScript XML.
- Components, states and props
- Hooks
- One way data binding
Virtual DOM :
React uses a lightweight copy of the real DOM for manipulation. This is called virtual DOM. It is much faster than directly changing the real DOM. When one component is updated, virtual DOM changes or updates only that component instead of updating all. For example, if we have a list of elements and if we update only one item in the list, it is unnecessary to update all in the real DOM.
For any change, the entire virtual DOM gets changed. React compares it with its previous state and updates only the changed objects in the real DOM. Virtual DOM makes the performance of the application faster.
JSX :
JSX or JavaScript XML is a extended version of JavaScript that can be used to write HTML in react. We can embed HTML into JavaScript code and the code becomes easier to debug and understand.
For example:
const hello = <h1>hello</h1>;This is a JSX code and we are adding HTML to JavaScript.
Components, states and props:
Components:
Component is the main building block of a react application. One react application UI is consists of multiple components. Component is a UI block and it is reusable. For example, for a chat list, we can create one component for the chat-box UI and use it on each element of the list. We can initialize a components with different properties like different color chatbox for sender and receiver.
These components are categorised into two types. First one is called functional component or stateless component. These components doesn’t hold any state. They gets data and renders them. The second one is called class or stateful component. These components has state and they can update and render data based on the state.
props:
props stands for properties. It is mainly used to pass data from one component to another. It is same as like passing arguments to a function in JavaScript. You can pass data to a component using props and access it.
states:
state is the state of a react component. The component depends on its state. If the state is changes, the component re-renders automatically. This is the primary way of updating a component in react.
Hooks:
hooks was introduced later in react. They can be used only in functional components. Previously I mentioned that functional components are stateless components. hooks are introduced to hook into react state and other lifecycle events from functional components. Hooks are not for class components.
One way data binding:
One way data binding means that data is passed down from parent to child components. props is used to pass data from one component to another and it is an unidirectional data flow. It keeps the react apps faster and also helps in debugging easily because if an error occur, the developer already knows at which place it is coming from.
What next:
I hope that you got the basic idea of Reactjs and how a react project works. React is easy and fun to learn. In our next article, I will show you how to create a reactjs project and more examples. Stay tune :)