In the real life we see and use several applications. Each application is built for a specific purpose and has some set of style in designing it. To attract more viewers to a particular application the most basic requirement is a good UI for the application. The UI represents the front-end part of an application. Many applications that we use in the day-to-day life like Google, Facebook, Instagram, Snapchat, LinkedIn etc., contains different UI frameworks written in different technologies.
Different technologies like Angular, Meteor, Node etc. are quite popular for designing front-end applications and require a lot of code. React however, has a great significance among all the front-end technologies available at present because of simplicity, flexibility, responsiveness etc., It makes developers to develop the applications with less code. In general, Developers need to hard code on the tasks while developing the applications. React provides a simple framework which can be used to breakdown the work into components and reuse the code.
React – The King
React is a Java-Script Library. It is an open-source, component-based, lightweight, flexible, and efficient Library used to build front-end applications in the real-world. React was developed by Facebook in 2011 for using on their own app. Later, in 2012, React was deployed on Instagram as well. Since 2013, React has become an open-source library and is now used by everyone. React is used to build dynamic and interactive User Interfaces for mobile applications or websites.
The uniqueness of React is that it is used to create Single Page Applications for accessing the components of the application really fast. These days, React is a popularly used front-end JavaScript library in the real world. Developers can easily write the code and hard coding is not required with react. It can render and update the state of application automatically when there is code change.
In React, a Homepage is built using Components by divide and Merge Policy. During the development phase the components of the home page are divided into small parts and then merged to get the overall view of the page. The main feature of the React is Virtual DOM, where we can observe One-Way Data Binding. The reason behind the usage of React in the real-world applications is that, while building the applications React makes two copies of the Virtual DOM, instead of directly updating DOM. Both the copies are stored and are compared and when a change is triggered React updates the view directly.
Some of the top features of React are: -
- Component-Based Architecture
- Virtual DOM
- JSX
- One-way Data Binding
- Performance
- Simplicity, etc.,
Component Architecture
In the React, everything is treated as Components. It means that the development of a web interface or an application in React, is made with the combination of several components, in which each component has a certain logic written in JavaScript.
Since the logic for the component is written in JS instead of templates, we can easily pass rich data through the application and keep the state out of DOM. i.e., Developers can rely on the data across the application without the DOM being affected. The Components in React are used to define the interactions and visuals in the applications.
Virtual DOM
A virtual DOM object is the representation of a DOM object, which creates the virtual copy of the original DOM object. In React, for every DOM object there would be a corresponding Virtual DOM. This feature of React helps to speed up the application development process and provides flexibility. The algorithm facilitates the replication of a web page or application in Reacts virtual memory, which is a representation of the UI kept in the memory and then synced with the real DOM with the help of a library named ReactDOM.
DOM generally represents a tree-like structure. In React, virtual DOM refers to the programming area of the virtual representation of a UI Component stored in memory and then synced with the real DOM Object by a library called ReactDOM.
It works on One-way Data Binding mechanism, to quickly render the changes in the virtual DOM than updating the changes in the Original DOM. i.e., whenever the application is modified or updated, the entire UI is rendered again by the virtual DOM, by updating the modified components present in the application. This in turn reduces the cost and time taken for the development of application.
Function Components
Functional components are a form of JavaScript functions in React. These functions may or may not receive data as parameters like props, and return the output as JSX code, which is also called as React Element used to render to the DOM tree.
These are like functions which contains lesser code to implement a functionality in the application. These functions are easier to understand, and code is reused whenever required. The primary function of a React component is to display the view and combine it with the code to bring out app behaviour. A functional component is easy to define and we can see an example of it below.
The function is defined using a function keyword followed by the name of the function, and in the body of the function we write some logic and return the required content to the application.
Syntax of Functional Component
function Function_Name(){
// block of code
// block of code
return statement
} Example of Normal Function Declaration
function Sample(){
return <p>Hello, Welcome to Upgrad KnowledgeHut</p>
} In React, after defining the function we need to render the particular function component to be displayed on the application and it is done using ReactDOM.render function and is as follows: -
ReactDOM.render(
<Sample />,
document.getElementById('root')
); The above example is written in a separate JavaScript file by importing the required Libraries into it to get the output of the function on the screen.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Sample(){
return <p>Hello, Welcome to Upgrad KnowledgeHut</p>
}
ReactDOM.render(
<Sample />,
document.getElementById('root')
); Index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
} Output
Example of Arrow Function Declaration
We can write the above sample function in a separate style called Arrow Function. In React, this can be created using a data type followed by the name of function. The whole code is represented below:
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// const displays the data type
const Sample = () => {
return <h5>Hello, Welcome to Upgrad KnowledgeHut</h5>
}
ReactDOM.render(
<Sample />,
document.getElementById('root')
); Index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
} Output
Example of declaring function using props
Here we declare the function by passing the parameter into it. The functional component may or may not take the parameters for function execution and then returns the JSX element (React Element) in return.
The code is as follows :-
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
function Welcome(props){
// props is initialized with name
return <h5>Welcome to , {props.name}</h5>
}
ReactDOM.render(
// Here we are giving the value to the name to be called by the prop
// like name=” ”
<Welcome name="Upgrad KnowledgeHut"/>,
document.getElementById('root')
);Index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
} Output:
The above are some of the different ways to work on functions and they help developers to write code and integrate it to the application easily. Functions help in code reusability, and it is used to decrease the length of the code to give out the better performance.
JSX
Instead of learning a new syntax for expressing UI elements, React offers JSX which feels like HTML and yet has the complete power of JavaScript behind it.
JSX is like a markup syntax that is very close to HTML, which helps in describing the appearance of the application interface. JSX is a combination of Javascript + XML. This JSX exhibits the syntax just like the HTML and is widely used to create the React Components.
React’s JSX feature is pretty great in that it helps the developers write the code for the building blocks of React UI. The code is easy to write, simple to understand and it is an easy way for developers to build applications.
The Hooks API
Hooks were introduced from the React latest version 16.8, which was released officially in early February 2019. Hooks were shipped additionally with the API that helps us to use state and other features in the React without writing a class.
Hooks feature set enables developers to add opt-in features to the components they build, which means rewriting of code is not necessary and the changes were readily available for usage from React v16.8 and are Backword-Compatible i.e., it doesn’t contain any Breaking changes.
Hooks are like functions that let you work with the React state and the lifecycle features from the function components directly. The primary idea of using Hooks is that it doesn’t allow a developer to work with Classes, but it provides a smart way of using React in developing applications without Classes. Besides custom hooks can be created for building reusable logic that can be shared across the application.
When to use Hooks in the application?
When we initially write a function component and want to add a state to the component, classes were typically used for this purpose. But now it is possible in a much easier way by using a Hook Component which can be used directly inside a function.
Hooks allow the developers many benefits like:
- Code Reusability.
- Good Code Composition.
- Sharing code logics using custom hooks.
- Flexibility in navigating to the components.
And with the help of Hooks, developers can use functional components to almost everything they need to do in an application, from rendering UI to also to handle state and the logic.
Example of Hooks API with “useState”
We use one of the functional component named useState() for setting and retrieving state in react. With the help of Hook, we declare a new state in the react app.
App.js
import React, { useState } from 'react';
function Sample() {
// Declare a new state variable, which we call as count
const [count, setCount] = useState(0);
return (
<div>
<p>Button clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Sample; index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
); Index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
} Output
In the above example, useState is the Hook which needs to call inside a function component to add some local state to the application. The useState returns a pair of elements, in which the first element is the current state value/initial value, and the second element is a function which allows us to update it. After that, we will call this function from an event handler.
Example of Hooks API using “this.setState”
The useState is similar to this.setState in class. The equivalent code without Hooks looks like as below
App.js
import React, { useState } from 'react';
class Sample extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>Button clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
export default Sample; index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
); Index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
} Output
Example of Hooks API with useEffect
The useEffect() in Hook allows us to perform an action in the function components in react. This method doesn’t use the components of lifecycle methods present in class components. The useEffect() function in Hooks are like the componentDidMount(), componentDidUpdate(), and componentWillUnmount() lifecycle methods.
App.js
import React, { useState, useEffect } from 'react';
function Sample() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate functions
useEffect(() => {
// Updating the document title using the browser API
document.title = `Button clicked ${count} times`;
});
return (
<div>
<p>Button clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Sample; index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
); Index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}Output
Example of Hooks API with Custom Hooks
Custom Hooks are like the JavaScript functions. This custom Hook uses the word “use” that can call other Hooks. In simple terms, the custom Hook is like a function component and the word “use” is used in the beginning of the function tells that it is binded to Hook rules.
App.js
import React, { useState, useEffect } from 'react';
const useDocTitle = title => {
useEffect(() => {
document.title = title;
}, [title])
}
function Sample() {
const [count, setCount] = useState(0);
const riseCount = () => setCount(count + 1);
useDocTitle(`Button clicked ${count} times`);
return (
<div>
<p>Button clicked {count} times</p>
<button onClick={riseCount}>Click me</button>
</div>
)
}
export default Sample; index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
); Output
Easy to Learn
Instead of making developers learn a completely new syntax or a language, React leverages a developer's existing knowledge of JavaScript and uses regular language constructs such as functions making it easy to learn. It has a smaller learning curve, easy creation of dynamic applications, tools for debugging in an easy way, and a unidirectional data flow i.e., one-way data binding.
A developer just needs to recollect his HTML skills to build the applications and all the remaining CSS styles, Bootstrap functions and even JS functions also will be used in the same HTMLtags easily by importing required libraries. It helps a developer with less code and it is easier to remember. It means rather than writing maximum lines of code to implement a particular functionality, React address the same functionality with the help of functions and components in it.
The Ecosystem
React is a JavaScript Library, not a framework. It comprises of a massive ecosystem of developers, allied products such as Redux, React Router, Babel, Styling, and others, making it easy for developers to build robust products. React is an open-source, front-end JavaScript Library used to create dynamic applications. It consists of files which are written in the HTML, CSS and JavaScript.
HTML describes what a UI consists of. Like the Content of the UI i.e., text, videos, images, hyperlinks, tables etc., CSS tells us what a UI looks like, i.e., the Appearance i.e., size, color, shape, layout, typography etc., and JavaScript tells us about the behaviour of the UI, that is the Logic present in it i.e., storage, events, forms, configurations, handling events etc.
React helps to update or render the changes made by the user only in that page without depending on the other page. It helps in rendering the elements, Capable of Event Handling, conditional Rendering, accessibility of the code, working with web components, APIs, and some Testing Environments. The react code exhibits high performance, reusability of code and provides an abstract communication between components.
Full Stack Awesomeness:
Node.js is used to host and run the web servers. It is a runtime environment to handle data communications on the server-side. The developers can execute their react codes in the Nodejs environment using npm modules installed in the application. Npm environment can be installed by installing the NodeJs application from the internet, with the appropriate versions that suits to the user system. And we will get “npm” in that application only.
Nodejs is a React framework for building full-stack apps quickly. Though it is not a React feature, its presence amplifies the reason why someone should pick React as the framework of choice. Both - React and Nodejs - are written in JavaScript language and can be executed on both server-side and client-side.
Server-Side Rendering
React enables developers to either natively or using Next.js build server render-able apps that facilitate performance, SEO and other benefits. Server-Side rendering is also called as SSR, which can render the JavaScript application on the server rather than in the browser. In react, the server returns an initiation to render the HTML pages and the JS scripts in order to make the page interactive.
In simple terms, server-side rendering is a process in which the server converts into the viewable format before sending them to the browser. The reasons behind usage of SSR mechanism in react is due to these reasons: -
- Fast loading of pages.
- Provides better Search Engine Optimization (SEO) ranking.
- Facilitates with Great user Experience.
- A better option for static pages, as the SSR helps in loading the content promptly and efficiently.
Unlock Your Potential: Dive into the World of Programming! Join our beginner-friendly programming course and embark on a journey to master the art of coding. Start your learning adventure today!
Battle Hardened
React is actively used not only by Facebook but by thousands of large and small enterprises like Netflix, Dropbox, Instacart, Scribd, Yahoo etc., for their production grade products and is thus battle hardened. Consequently Meta's (formerly Facebook) commitment to React's evolution is outstanding.
Due to its simplicity and high performance, React is used in various applications in today’s world. It provides users to write code in an easier way and has one-way data binding mechanism to load the page fast. React helps developers to work on the large applications by rendering the components to the server and getting out a clear view of the page.
React for the win!
There’s a lot of features that make React a winner; being an open source, efficient front-end framework for developing applications is just one of them. React helps developers to build websites in a dynamic environment. It exhibits higher performance, fast loading of the contents of the page, one-way data binding mechanism, less code, easy integration of APIs, rendering objects to the server etc. It follows a component-based architecture provides divide and merge structure to simplify the whole tasks in the application. It consists of a virtual DOM which can connect with the original DOM object to render the changes made in the application.
In React, everything is like functions or components to implement a particular task in the application. React is the form of JSX code means JavaScript and XML or HTML code used to code for the application. JS implement the logic whereas HTML implements the content of the file. The Hooks API is used to display and render the state without the help of classes. React provides better framework for full stack developers to build the applications. All the activity codes written in react, will be subjected to server-side rendering for a good representational view of the application. It helps in quickly loading the page and indexes the content of the page for exhibiting better SEO ranking.
