REACT JS MASTERING GUIDE — Part 1: Introduction to React JS
What is ReactJS?
ReactJS or React is a Javascript library that is used to build user interfaces (interfaces), so react is a library, not a framework. Reactjs itself was developed by Facebook (public release May 29, 2013). React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called “FaxJS”. React can also be used as a basis for Web or Mobile Application development. However, React is only concerned with state management and rendering that state to the DOM, so building a React app typically requires using additional libraries for routing and certain client-side functionality.
Here are the things that are important in the reaction:
1. Components
Components can be said to be very important in reactjs. The component is a concept of how to make each part of the UI (view)work independently and isolated from the other parts.
Consciously or unconsciously, those who often work with HTML code always separate parts of pages such as the Header, Content, and Footer. Usually, the goal is to keep code from piling up on one page so that it is separated into smaller, more specific files and the code is more maintainable if improvements are made.
TIPS: Specially reacted even the smallest in the display that is recommended to be separated. this component has reusability which makes it unnecessary for developers to copy the same page or component over and over.
Here’s an illustration of a component in reactjs:
2. JSX
JSX is a javascript extension that allows us to write HTML tags in javascript.
In reactjs, we are going to JSX and maybe there is a little difference in it, but for those who already understand HTML, this won’t look difficult.
3. Virtual DOM
If we start to dive deep into React, there will be questions about what is a virtual DOM? Virtual DOM is a virtual representation of the DOM. Then why does React use virtual DOM? Here is the explanation:
First, JavaScript runs fast, which causes JavaScript to feel slow when it processes the DOM. What is dom? DOM is a representation of the UI in our application. In short, the DOM form itself is a tree data structure, therefore if there is a change or update to the dom it will be fast. However, after changes to the dom, elements that are changed from parent to child will be re-rendered to update the UI in our application. The process of re-rendering or re-painting the UI is what makes it slow. Here’s an illustration from the DOM:
But in React, React creates a virtual DOM to speed things up. React performs all operations inside the virtual DOM. Once the operation is complete, React writes the changes in the DOM.
Here’s the process in React if an element changes in the DOM:
1. React already has a representation of the DOM in the virtual DOM.
2. React accepts a DOM representation containing the changes.
3. React compares the differences between the old and new representations.
4. The results of the comparison are entered into the queue.
5. Finally React will re-render the patch to the DOM
The analogy is this, I have a pencil and marker. When I write on paper using a marker and make a typo in the middle of a paragraph then I have to replace it with a new paper and write again from the beginning. But if I use a pencil ( Let’s say React is using the Virtual DOM ), I can erase the error with an eraser without starting over again.
4. States & Lifecycle
The state is the origin of data. Components in React of course need data (not all but on average need data). The data can come from anywhere. The state is one such data source. In addition to state data from components can also come from props (not properties).
There are three Lifecycles in a component in React, namely:
1. Initialization/mounting (when a component is created/added for the first time in the DOM)
2. Update/rendering (when there is a state/prop change that results in a change to the DOM)
3. Unmounting (when the component is removed from the DOM)
In each of these lifecycles, the react component will execute different methods/functions which we call lifecycle methods. Some methods have the will and did prefixes that indicate when the method will be executed.
Continue in the next part….
Reference:
https://reactjs.org/docs/create-a-new-react-app.html
