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.
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.
Following are the main features of ReactJS :
- Virtual DOM
- Components, states and props
- One way data binding
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.
const hello = <h1>hello</h1>;
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.
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 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 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.
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 :)