The world can't live without mobile and web applications in this day and age. Everything is digitized, from booking cabs to ordering food to make bank transactions. Thanks to the efficient frameworks that provide a seamless user experience. One such robust frontend library is React. This tutorial on ‘what is React’ will help you understand the library's fundamentals and work with a simple demo.
What Is React?
React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.
React offers various extensions for entire application architectural support, such as Flux and React Native, beyond mere UI.
Why React?
React’s popularity today has eclipsed that of all other front-end development frameworks. Here is why:
- Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality, as opposed to JavaScript, where coding often gets complex very quickly.
- Improved performance: React uses Virtual DOM, thereby creating web applications faster. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do.
- Reusable components: Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.
- Unidirectional data flow: React follows a unidirectional data flow. This means that when designing a React app, developers often nest child components within parent components. Since the data flows in a single direction, it becomes easier to debug errors and know where a problem occurs in an application at the moment in question.
- Small learning curve: React is easy to learn, as it mostly combines basic HTML and JavaScript concepts with some beneficial additions. Still, as is the case with other tools and frameworks, you have to spend some time to get a proper understanding of React’s library.
- It can be used for the development of both web and mobile apps: We already know that React is used for the development of web applications, but that’s not all it can do. There is a framework called React Native, derived from React itself, that is hugely popular and is used for creating beautiful mobile applications. So, in reality, React can be used for making both web and mobile applications.
- Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be used to debug React applications. This makes the process of debugging React web applications faster and easier.
The above reasons more than justify the popularity of the React library and why it is being adopted by a large number of organizations and businesses. Now let’s familiarize ourselves with React’s features.
Features of React
React offers some outstanding features that make it the most widely adopted library for frontend app development. Here is the list of those salient features.
JSX
JSX is a JavaScript syntactic extension. It's a term used in React to describe how the user interface should seem. You can write HTML structures in the same file as JavaScript code by utilizing JSX.
const name = 'Simplilearn';
const greet = <h1>Hello, {name}</h1>;
The above code shows how JSX is implemented in React. It is neither a string nor HTML. Instead, it embeds HTML into JavaScript code.
Virtual Document Object Model (DOM)
The Virtual DOM is React's lightweight version of the Real DOM. Real DOM manipulation is substantially slower than virtual DOM manipulation. When an object's state changes, Virtual DOM updates only that object in the real DOM rather than all of them.
- What is the Document Object Model (DOM)?
Fig: DOM of a Webpage
DOM (Document Object Model) treats an XML or HTML document as a tree structure in which each node is an object representing a part of the document.
- How do Virtual DOM and React DOM interact with each other?
When the state of an object changes in a React application, VDOM gets updated. It then compares its previous state and then updates only those objects in the real DOM instead of updating all of the objects. This makes things move fast, especially when compared to other front-end technologies that have to update each object even if only a single object changes in the web application.
Architecture
In a Model View Controller(MVC) architecture, React is the 'View' responsible for how the app looks and feels.
MVC is an architectural pattern that splits the application layer into Model, View, and Controller. The model relates to all data-related logic; the view is used for the UI logic of the application, and the controller is an interface between the Model and View.
Extensions
React goes beyond just being a UI framework; it contains many extensions that cover the entire application architecture. It helps the building of mobile apps and provides server-side rendering. Flux and Redux, among other things, can extend React.
Data Binding
Since React employs one-way data binding, all activities stay modular and quick. Moreover, the unidirectional data flow means that it's common to nest child components within parent components when developing a React project.
Fig: One-way data binding
Debugging
Since a broad developer community exists, React applications are straightforward and easy to test. Facebook provides a browser extension that simplifies and expedites React debugging.
Fig: React Extension
This extension, for example, adds a React tab in the developer tools option within the Chrome web browser. The tab makes it easy to inspect React components directly.
Now that you know the key features of React, let’s move on to understanding the pillars of React.
Components in React
Components are the building blocks that comprise a React application representing a part of the user interface.
React separates the user interface into numerous components, making debugging more accessible, and each component has its own set of properties and functions.
Here are some of the features of Components -
- Re-usability - A component used in one area of the application can be reused in another area. This helps speed up the development process.
- Nested Components - A component can contain several other components.
- Render method - In its minimal form, a component must define a render method that specifies how the component renders to the DOM.
- Passing properties - A component can also receive props. These are properties passed by its parent to specify values.
Have a look at the demo for a better understanding.
Consider two components, a Functional component and a Class Component with the following code.
import React from "react";
function FunctionalComp() {
return <p>This is a Functional component</p>;
}
export default FunctionalComp;
import React from "react";
export class ClassComp extends React.Component {
render() {
return <p>This is the Class Component </p>;
}
}
export default ClassComp;
A class component comes with a render method that renders onto the screen. Export default is used to export only one object (function, variable, class) from the file. Only one default export per file is allowed.
Evidently, these components are imported into the main component which is App.js in our case.
import React from "react";
import FunctionalComp from "./Components/FunctionalComp";
import ClassComp from "./Components/ClassComp";
function App() {
return (
<div>
<h1>Hello! Welcome to Simplilearn</h1>
<FunctionalComp />
<ClassComp />
</div>
);
}
export default App;
Once run, the browser will look like this.
A named export or just export can also be used to export multiple objects from a file.
Now that you have an understanding of React Components, move on to React Props.
Master the fundamentals of React including JSX, props, state, and events. Consider the React.js Certification Training Course. Enroll now!
Props in React
Props, short for Properties in React Props, short for properties, allow the user to pass arguments or data to components. These props help make the components more dynamic. Props in a component are read-only and cannot be changed.
Consider the class Classprops.js with the following code.
import React, { Component } from "react";
class Classprops extends Component {
render() {
return (
<div>
<h1>
Hello {this.props.name} from {this.props.place}! Welcome to
Simplilearn
</h1>
</div>
);
}
}
export default Classprops;
Here, you use the properties called "name" and "place," whose values can be passed when importing the component into the parent component.
In the main component, App.js, consider the following code.
import React from "react";
import Classprops from "./Classprops";
class App extends React.Component {
render() {
return (
<div>
<Classprops name="Learner 1" place="PlaceX"/>
<Classprops name="Learner 2" place="PlaceY"/>
<Classprops name="Learner 3" place="PlaceZ" />
</div>
);
}
}
export default App;
Here, the component is called thrice, and it passes three different values for the same property. The following is the output of the code.
Now that you know how props work, let's understand how a state in React works.
State in React
A state is an object that stores properties values for those attributed to a component that could change over some time.
- A state can be changed as a result of a user's action or changes in the network.
- React re-renders the component to the browser whenever the state of an object changes.
- The function Object() { [native code] } is where the state object is created.
- Multiple properties can be stored in the state object.
- this.
- setState() is used to alter the state object's value.
- The setState() function merges the new and prior states shallowly.
Consider the following component, State.js.
import React, { Component } from 'react'
class State extends Component {
constructor(props) {
super(props)
this.state = {
message: "Subscribe to Simplilearn"
}
}
render() {
return (
<div className='App'>
<h3>{this.state.message}</h3>
</div>
)
}
}
export default State
Here, the h3 tag displays the value of ‘message,’ a state object.
In your main component, App.js, consider the following code.
import React from "react";
import "./App.css";
import State from "./Components/State";
class App extends React.Component {
styles = {
fontStyle: "bold",
color: "teal"
};
render() {
return (
<div className="App">
<h1 style={this.styles}> Welcome </h1>
<State />
</div>
);
}
}
export default App;
The output will look like this.
setState() Method
A state can be updated to event handlers, server responses, or prop changes. This is done using setState method.
this.setState({ quantity: value }
)
setState() method enqueues all the updates made to the component state and instructs React to re-render the component and its children with the updated state.
Consider the scenario where the subscribe button is clicked. On clicking the button, the display message must change. To implement this, you make use of the setState() method.
import React, { Component } from 'react'
class State extends Component {
constructor(props) {
super(props)
this.state = {
message: "Subscribe to Simplilearn",
sub: 'Subscribe'
}
}
ChangeMessage=()=>{
this.setState({
message: "Thank you for Subscribing",
sub: "Subscribed"
})
}
render() {
return (
<div className='App'>
<h3>{this.state.message}</h3>
<button onClick={this.ChangeMessage}>{this.state.sub}</button>
</div>
)
}
}
export default State
You first create an additional state object called “sub” for the button. When a button click event occurs, the method “ChangeMessage” is called. This method in turn uses the setState() method to update the values of message and sub and re-render the output.
After clicking the button, the output will look like this.
Although the above can be achieved using just props, using state makes it extremely efficient. The following section covers the differences between props and State in React.
Master the fundamentals of React—an important web framework for developing user interfaces—including JSX, props, state, and events with the React.js Training Course.
Props vs. State in React
Props |
State |
|
Props are used to send data and event handlers to a component's children. |
The data of the components that must be presented to it store the view in the state. |
|
Props are immutable — they can't be modified after they've been set. |
The data is stored in the state, which might change over time. |
|
Both functional and class components can benefit from the use of props. |
Only class components can use the state. |
|
The parent component sets props for the children components. |
Event handlers are typically responsible for updating the state. |
ReactJS Prerequisites
Here are some of the concepts that you should be familiar with, to one degree or another:
- Programming concepts like functions, objects, arrays, and to a lesser extent, classes
- Basic knowledge of JavaScript
- Some familiarity with HTML
Now that you know what concepts you should already be familiar with before working on React, let’s take a look at the industry trends.
[Related reading: Best Programming Languages to Learn in 2022]
Industry Trends
React is more popularly adopted by developers across the globe as compared to other frameworks and libraries.
- The average salary for an entry-level React developer in the USA is about 87,000USD per annum.
- The average salary for an entry-level React developer in India is about 6,50,000INR per annum.
Next Steps
We hope that this tutorial on "What is React" has helped you better grasp how React works. A full-stack development course would be useful if you want to study React and become a frontend developer.
Simplilearn's React JS Training Course will teach you the fundamentals of React, including JSX, props, state, and events, a popular online framework for creating user interfaces. Reducers, actions and the state tree are all covered in this Redux training course.
Are there any questions you'd want to ask us? In case you’ve got any recommendations or questions for us, please leave them in the comments section. Our professionals will respond as soon as possible!
