Q1. List and explain different features of React .
Created by Facebook, ReactJS is a JavaScript library designed for crafting dynamic and
interactive applications, elevating UI/UX for web and mobile platforms. Operating as an open-
source, component-based front-end library, React is dedicated to UI design and streamlines code
debugging by employing a component-oriented approach.
We will discuss about the following featured of React:
1. JSX(JavaScript Syntax Extension):
2. Virtual DOM:
3. One-way Data Binding:
4. Performance:
5. Extension:
6. Conditional Statements:
7. Components:
8. Simplicity:
Let’s understand each of them in detail:
1. JSX(JavaScript Syntax Extension):
JSX is a combination of HTML and JavaScript. You can embed JavaScript objects inside the
HTML elements. JSX is not supported by the browsers, as a result, Babel compiler transcompile
the code into JavaScript code. JSX makes codes easy and understandable. It is easy to learn if
you know HTML and JavaScript.
const name="GeekforGeeks";
const ele = <h1>Welcome to {name}</h1>;
2. Virtual DOM:
DOM stands for Document Object Model. It is the most important part of the web as it divides
into modules and executes the code. Usually, JavaScript Frameworks updates the whole DOM at
once, which makes the web application slow. But react uses virtual DOM which is an exact copy
of real DOM. Whenever there is a modification in the web application, the whole virtual DOM is
updated first and finds the difference between real DOM and Virtual DOM.
In the above-shown figure, when the whole virtual DOM has updated there is a change in the
child components. So, now DOM finds the difference and updates only the changed part.
3. One-way Data Binding:
One-way data binding, the name itself says that it is a one-direction flow. The data in react flows
only in one direction i.e. the data is transferred from top to bottom i.e. from parent components
to child components. The properties(props) in the child component cannot return the data to its
parent component but it can have communication with the parent components to modify the
states according to the provided inputs.
One-way Data Binding
As shown in the above diagram, data can flow only from top to bottom.
4. Performance:
As we discussed earlier, react uses virtual DOM and updates only the modified parts. So , this
makes the DOM to run faster. DOM executes in memory so we can create separate components
which makes the DOM run faster.
5. Extension:
React has many extensions that we can use to create full-fledged UI applications. It supports
mobile app development and provides server-side rendering. React is extended with Flux,
Redux, React Native, etc. which helps us to create good-looking UI.
6. Conditional Statements:
JSX allows us to write conditional statements. The data in the browser is displayed according to
the conditions provided inside the JSX.
Syntax:
const age = 12;
if (age >= 10)
{
<p> Greater than { age } </p>;
}
else
{
<p> { age } </p>;
}
7. Components:
[Link] divides the web page into multiple components as it is component-based. Each
component is a part of the UI design which has its own logic and design as shown in the below
image. So the component logic which is written in JavaScript makes it easy and run faster and
can be reusable.
Multiple components
8. Simplicity:
[Link] is a component-based which makes the code reusable and [Link] uses JSX which is a
combination of HTML and JavaScript. This makes code easy to understand and easy to debug
and has less code.
Steps to Create React Application:
Step 1: Create a react application by using the following command:
npx create-react-app foldername
Step 2: Change your directory to the newly created folder.
cd foldername
Project Structure:
Example: This example uses props data to demonstrate condiotional rendering in react
// Filename - [Link]
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
[Link](<App isPass={true} />,
[Link]('root'));
Step to Run the application: Open the terminal and type the following command.
npm start
Output: If you give the value of isPass={true} in [Link], then it will give the following output:
If the value of isPass={false} in [Link], then the following output is displayed.
Q2. Write a code in React js to display “ Hello World “.
import React from 'react';
function HelloWorld() {
return (
<div>
<h1>Hello World</h1>
</div>
);
export default HelloWorld;
Q3. Advantages of React Js.
[Link] offers several key advantages that make it one of the most popular JavaScript libraries
for building user interfaces—especially single-page applications (SPAs). Here's a breakdown:
1. Component-Based Architecture
● Reusable: UI elements are built as reusable components (e.g., buttons, modals, forms).
● Modular: Helps in organizing the code better and makes large-scale development
manageable.
2. Virtual DOM for High Performance
● React uses a Virtual DOM to track changes and update only what’s necessary.
● This makes rendering fast and efficient, even for complex UIs.
3. Unidirectional Data Flow
● Data flows in one direction (top-down), making it easier to track and debug changes in
state or props.
● Improves predictability and maintainability.
4. Declarative Syntax
● You describe what the UI should look like, not how to update it.
● This leads to cleaner and more readable code compared to imperative DOM manipulation
(like in vanilla JS or jQuery).
5. Rich Ecosystem and Tooling
● Supported by powerful tools like:
● React Developer Tools
● Create React App (CRA)
● Vite, [Link] (for SSR), etc.
● Integrates well with other libraries like Redux, Tailwind, Axios, etc.
6. Strong Community and Industry Adoption
● Maintained by Meta (Facebook) and a vast open-source community.
● Widely used in the industry, which means:
● Tons of tutorials, libraries, and support.
● Easier hiring for companies and learning for individuals.
7. Cross-Platform Development with React Native
● React knowledge can be transferred to React Native to build mobile apps for iOS and
Android using the same component-based approach.
8. Support for Hooks and Modern Features
● Hooks (e.g., useState, useEffect) allow functional components to manage state and side
effects.
● Encourages use of modern JavaScript features (ES6+).
9. Server-Side Rendering (SSR) and Static Site Generation (SSG)
● Frameworks like [Link] add SSR/SSG capabilities to React apps for improved SEO and
performance.
10. JSX – JavaScript + HTML Syntax
● JSX allows writing HTML-like syntax directly in JavaScript, making component creation
intuitive and concise.
Q.4. What is JSX ? Write JSX attributes with example .
JSX stands for JavaScript XML, and it is a special syntax used in React to simplify building user
interfaces. JSX allows you to write HTML-like code directly inside JavaScript, enabling you to
create UI components more efficiently. Although JSX looks like regular HTML, it’s actually a
syntax extension for JavaScript.
Example:
const element = <h1>Hello, world!</h1>;
<h1>Hello, world!</h1> is a JSX element, similar to HTML, that represents a heading tag.
JSX is converted into JavaScript behind the scenes, where React uses [Link]() to
turn the JSX code into actual HTML elements that the browser can understand.
JSX Attributes
JSX allows you to insert attributes into HTML elements, but there are a few important
differences.
1. class = className
The class attribute is a much used attribute in HTML, but since JSX is rendered as JavaScript,
and the class keyword is a reserved word in JavaScript, you are not allowed to use it in JSX.
JSX solved this by using className instead. When JSX is rendered, it
translates className attributes into class attributes.
Example
Use attribute className instead of class in JSX:
function Car() {
return (
<h1 className="myclass">Hello World</h1>
);
Expressions as Attributes
You can also use JavaScript expressions as attribute values. This is very useful for dynamic
attributes.
Example
Use JavaScript expressions as attribute values:
function Car() {
const x = "myclass";
return (
<h1 className={x}>Hello World</h1>
);
Note that the attribute value is not wrapped in quotes, this is important when using expressions
(JavaScript variables) as attribute values. If you use quotes, JSX will treat it as a string literals
and not a JavaScript expression.
camelCase Event Attributes
Event attributes in JSX are written in camelCase.
Example
Use camelCase for event attributes:
function Car() {
const myfunc = () => {
alert('Hello World');
};
return (
<button onClick={myfunc}>Click me</button>
);
2. Boolean Attributes
If you pass no value for an attribute, JSX treats it as true. To pass false, you must specify it as an
expression.
Example
Boolean true in JSX, this will make the button disabled:
<button onClick={myfunc} disabled>Click me</button>
Example
Also true in JSX, this will also make the button disabled:
<button onClick={myfunc} disabled={true}>Click me</button>
Example
False in JSX, this will NOT make the button disabled:
<button onClick={myfunc} disabled={false}>Click me</button>
The style Attribute
The style attribute in JSX only accepts a JavaScript object with camelCased CSS property
names, rather than a CSS string (as in HTML).
Example
Use the style attribute:
function Car() {
const mystyles = {
color: "red",
fontSize: "20px",
backgroundColor: "lightyellow",
};
return (
<>
<h1 style={mystyles}>My car</h1>
</>
);
Notice two things about the example above.
The styles are stored in an object.
Style properties are written in camelCase, e.g. fontSize, instead of font-size.
This is an important difference between HTML and JSX.
Q.5 Write short note on JSX.
JSX (JavaScript XML) is a syntax extension for JavaScript, primarily used with React to
describe the structure of the user interface. It allows developers to write HTML-like code within
JavaScript, making the code more readable and easier to write.
What Is JSX?
JSX enables you to write HTML elements in JavaScript and place them in the DOM without
using createElement() or appendChild() methods. It converts HTML tags into React elements.
While not mandatory, JSX simplifies React application development.
Example:
const myElement = <h1>I Love JSX!</h1>;
const root = [Link]([Link]('root'));
[Link](myElement);
This JSX code is transpiled into
const myElement = [Link]('h1', {}, 'I Love JSX!');
const root = [Link]([Link]('root'));
[Link](myElement);
Key Features of JSX
HTML-like Syntax: JSX syntax is similar to HTML, allowing developers to write familiar tags,
elements, and attributes. This enhances code readability and makes it easier for both beginners
and experienced developers to understand and work with JSX.
JavaScript Integration: JSX seamlessly integrates JavaScript expressions and logic within
HTML-like code. This enables the dynamic rendering of data, conditional rendering, and the
ability to perform calculations or invoke functions directly within JSX components.
Component-based Approach: JSX follows React’s component-based architecture, enabling the
creation of reusable and modular UI components. These components encapsulate their
functionality, styling, and state, promoting code reusability and maintainability.
Declarative Syntax: JSX promotes a declarative approach to building user interfaces. Instead of
directly manipulating the DOM, developers define how the UI should look based on the desired
state. React handles the updates efficiently. This simplifies UI development and minimizes
potential bugs.
Transpilation Requirement: Browsers do not understand JSX directly, so it must be transpiled
into regular JavaScript code using tools like Babel. This ensures compatibility across different
browser environments.
How JSX Works
JSX is not valid JavaScript by itself. Tools like Babel transpile JSX into [Link]()
calls. For instance, the JSX:
const element = <h1 className="greeting">Hello, world!</h1>;
is transpiled to:
const element = [Link](
'h1',
{ className: 'greeting' },
'Hello, world!'
);
This transpilation is essential for browsers to understand and render the elements correctly.
Practical Applications of JSX
Dynamic Content Rendering: JSX allows embedding JavaScript expressions within HTML-like
syntax, enabling dynamic content rendering. For example:
const name = 'John';
const greeting = <h1>Hello, {name}!</h1>;
Component Creation: JSX is fundamental in defining React components, promoting a modular
and reusable approach to building UIs.
function Welcome(props) {
return <h1>Hello, {[Link]}</h1>;
Event Handling: JSX supports event handling directly within the markup, enhancing
interactivity.
function MyButton() {
function handleClick() {
alert('Button clicked!');
return <button onClick={handleClick}>Click Me</button>;
Conditional Rendering: JSX allows conditional rendering using JavaScript expressions,
facilitating dynamic UI updates.
function Greeting(props) {
if ([Link]) {
return <h1>Welcome back!</h1>;
return <h1>Please sign up.</h1>;
}
List Rendering: JSX enables rendering lists of elements efficiently using JavaScript array
methods.
const numbers = [1, 2, 3];
const listItems = [Link](number =>
<li key={number}>{number}</li>
);
Advantages of Using JSX
Improved Readability: Combines HTML structure with JavaScript logic, making the code more
intuitive and easier to understand.
Enhanced Developer Experience: Tools like syntax highlighting, error messages, and debugging
support are optimized for JSX, improving the development workflow.
Seamless Integration with JavaScript: Allows embedding JavaScript expressions within the
markup, enabling dynamic content rendering and logic implementation.
Component Reusability: Facilitates the creation of modular and reusable components, promoting
maintainability and scalability in applications.
Limitations and Considerations
Learning Curve: For developers unfamiliar with JSX or React, there might be an initial learning
curve.
Tooling Requirements: JSX requires transpilation tools like Babel, adding an extra step in the
build process.
Not Standard JavaScript: JSX is not valid JavaScript by itself and requires preprocessing before
browsers can understand it.