React or ReactJS is rapidly taking center stage as one of the leading choices for Application Development. In this tutorial series, we are going to understand and go through some concepts and try to understand how you can take up the development with this facinating technology.
What is ReactJS?
This is the definition written on their official website.
Are you confused?
Imagine you are scrolling through your Facebook news feed ( not that hard to imagine, right? ). You are noticing that your friend posted that crazy photograph from last night. Of course, you are going to like it and go through comments to understand what happen last night because you have an alcoholic blackout. Now while you are reading the comments you see that the number of likes increased by 20 since you liked the picture. And there was no reload of the page. Somehow magically the count of likes changed. This magic is called ReactJS.
React is all about components. You should represent everything as a component. Do you remember the post with the crazy picture from your friend? Well, that is one component which consists of multiple small parts like comments, image, likes and etc, which are also components. And yes, with react your page can and should be broken down into components. This will be of great help during code maintenance when working on larger scale projects.
const title = <h1>Hello, world!</h1>;
The tag syntax above is neither a string nor HTML.
Advantages – what makes ReactJS fast
The main concept behind React is Virtual DOM. It’s a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.
A virtual DOM object has the same properties as a real DOM object, only it lacks the real thing’s power to directly change what’s on the screen. It’s like a lightweight copy. Manipulating the virtual DOM is much faster than manipulating the real DOM, because nothing gets drawn on-screen.
Virtual, real, faster?
Ok, I know. Let’s explain the whole process.
When you render a JSX element, the virtual DOM object gets updated. Maybe this sounds incredibly inefficient, but the cost for this is insignificant because the virtual DOM can update so quickly for the reason that we mentioned above. Once the virtual DOM has updated, then React compares the current virtual DOM with a virtual DOM snapshot that was taken right before the update. By comparing the new virtual DOM with a pre-update version, React can easily figure out which virtual DOM objects have changed. This process is called “diffing”. When React knows which virtual DOM objects have changed, it updates those objects, and only those objects, on the real DOM.
In our example from earlier, React would be smart enough to rebuild only the number of your likes and leave the rest of your post alone. This makes a big difference! React will update only the necessary parts of the DOM. This innovation is the main culprit for React’s good performance reputation.
As we already mentioned React is a library, not a framework. It covers only UI part of the application. As such when building something with React you will need to include extra libraries to handle other parts of an application, such as application state.
There is no predefined way to structure your app (such as Services, Controllers, and Views in Angular). This means that it is the responsibility of the developer to find her/his own ways to effectively manage several parts of the application without a predefined structure.
Create React App is a comfortable environment for learning React and is the best way to start building a new single-page application in React.
npx create-react-app my-app
Today’s users expect sleek and performant web applications that behave more and more like native apps. Different techniques have been devised to decrease the waiting time for a website to load on a user’s first visit.However, in web applications that expose a lot of interactivity, the time elapsing between a user action taking place and the app’s response is also important.
- ReactJS Tutorial# 1 – An Introduction
- ReactJS Tutorial# 2 – Components and Props
- ReactJS Tutorial# 3 – Component State and Lifecycle
- ReactJS Tutorial# 4 – Forms, Events, and Keys
- ReactJS Tutorial# 5 – React Flux and Redux
- ReactJS Tutorial# 6 – ReactJS Best Practices