What the Heck is React! (A summary on Reactjs)

Photo by Ferenc Almasi on Unsplash

In programming world we all know about some programming languages and other staffs. From these javascript is the most used and effective programming language.But wait, programming with javascript is little hard and confusing isn’t it?!

To make programming easy and more effective with javascript the React starts its journey from 2013.It is maintained by Facebook and a community of individual developers and companies. Many people consider react as a javascript framework. But in actual React is a javascript Library.

Now let’s get some basic knowledge on React!

1: React

React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer.It can be used for developing Web or mobile app. React was created by Jordan Walke, a software engineer at Facebook

2: DOM

‘DOM’ stands for Document Object Model. In the web, all HTML webpages are referred to as documents. The Document Object Model represents each of these web pages in a tree-like structure to make it easier to access and manage the elements.

3: Virtual DOM

In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy.

A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house

4: JSX

JSX is one of the core concepts of React. JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together. In easy words, JSX is something by which we can write HTML in javascript file.

JSX makes it easy for web developers to modify their DOM by using simple, HTML-style code. And — since React JS browser support extends to all modern web browsers — JSX is compatible with any browser platform you might be working with.

import React from 'react';
import ReactDOM from 'react-dom';
const name = "Learner";
const element = <h1>Hello,
{ name }.Welcome to GeeksforGeeks.< /h1>;
ReactDOM.render(
element,
document.getElementById("root")

5: advantages of React.

1. It increases the application’s performance
2. It can be conveniently used on the client as well as server side
3. Because of JSX, code’s readability increases
4. React is easy to integrate with other frameworks like Meteor, Angular, etc
5. Using React, writing UI test cases become extremely easy

6: limitations of React

1. React is just a library, not a full-blown framework
2. Its library is very large and takes time to understand
3. It can be little difficult for the novice programmers to understand
4. Coding gets complex as it uses inline templating and JSX

7: Explain the role of Reducer.

Reducers are pure functions which specify how the application’s state changes in response to an ACTION. Reducers work by taking in the previous state and action, and then it returns a new state. It determines what sort of update needs to be done based on the type of the action, and then returns new values. It returns the previous state as it is, if no work needs to be done.

8: What are the features of React?

• JSX
• Components
• One-way Data Binding
• Virtual DOM
• Simplicity
• Performance

9: Props

Props stand for “Properties” in React. They are read-only inputs to components. Props are an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from the parent to the child components throughout the application.

10: State in React

The State is an updatable structure which holds the data and information about the component. It may be changed over the lifetime of the component in response to user action or system event. It is the heart of the react component which determines the behavior of the component and how it will render. It must be kept as simple as possible.