REACT.

JS
REPORT
This report covers the basics and introduction of all that I have learnt about react
REACT.JS
REPORT

React is a Java script library which was first developed DID YOU
by facebook in 2013. In simple terms it is a magic tool KNOW?
which can change things without reloading the whole
page. React uses JSX, a
mix of JavaScript
and HTML-like
WHAT IS A JAVASCRIPT LIBRARY?
syntax. It makes
writing UI code
A JavaScript library is a collection of pre written JS
code that helps developers do specific things in their intuitive and fun

React.Js
applications. — like designing
Instead of writing all the JavaScript yourself, you can your webpage
use the library’s code.
while coding it!
Popular libraries:

• React.Js: It is used to build User Interfaces (UI).

• jQuery: simplifies working with HTML
elements.
• D3.Js: It is used to create data visualization.

LIBRARY VS FRAMEWORK

A framework provides structure and rules for building

apps , whereas a library is a collection of tools which
you can pick form and choose.
So, in a library you’re in control, i.e. , you write the
code and then call the functions to fit inside it
whenever you need them. 1
Ex: React.Js is a library using which you can build user
interfaces
 But a framework controls your workflow, i.e., you need to follow its steps. It is the
boss.
Ex: The framework Angular expects your code to fit in its structures.
Other examples: Django(Python) is a framework which helps you manage
backend tasks like database interpretation.

WHERE ARE LIBRARIES LOCATED AT?

Libraries are hosted online and delivered through CDNs(Content delivery

Networks).
One can install libraries by these processes:
React.Js

a) Npm(Node Package Manager)

• The most popular repository for JavaScript libraries.

• Libraries can be downloaded and managed using the npm command-line
tool.
• Once installed, the library is saved in a folder called node_modules in
your project directory. (meaning it cannot be used in other projects)

b) CDN (Content Delivery Networks)

Many libraries, like jQuery or Bootstrap, are available via CDNs.

You don’t need to download the library; instead, you link to it using a URL in
your HTML file.

c) GitHub

Many libraries are open-source and hosted on GitHub. You can browse and
download them from repositories.

2
USER INTERFACE (UI) :

A User Interface (UI) is the part of a system, software, or device that a user
interacts with. It’s how information is presented to users and how they give inputs
to the system. In simpler terms, it’s the bridge between humans and machines,
allowing communication to happen.

Types of User Interfaces

1. Graphical User Interface (GUI):
o What most people use daily.
o Includes visual elements like buttons, text boxes, icons, and menus.
o Example: Websites, mobile apps, and desktop applications.

React.Js
2. Command-Line Interface (CLI):
o A text-based interface where users input commands to interact with
a system.
o Example: Terminal or Command Prompt.
3. Voice User Interface (VUI):
o Interaction happens through voice commands.
o Example: Alexa, Siri, Google Assistant.
4. Touch User Interface:
o Interaction is done through touch gestures like tapping, swiping, or
pinching.
o Example: Smartphones and tablets.
5. Natural User Interface (NUI):
o Interfaces that respond to natural human behaviors like gestures or
body movements.
o Example: Virtual Reality (VR) systems, gesture-based gaming.
3

Examples of UIs
 • Web Pages: Buttons, forms, and links that users click on.
• Mobile Apps: Swiping, scrolling, and tapping gestures on screens.
• Software Programs: Menus, toolbars, and windows in tools like Microsoft
Word.
• Gaming Consoles: Controllers or interactive screens in gaming systems.

Components of a UI
1. Input Controls: Enable user input.
o Buttons, text boxes, checkboxes, dropdowns.
2. Navigation Components: Help users move around.
o Menus, sliders, search bars, pagination.
React.Js

3. Informational Components: Present information to users.

o Tooltips, notifications, modals, progress bars.
4. Containers: Organize content visually.
o Cards, grids, or sections on a webpage.

UI in Web Development
• HTML: Provides the structure of the interface (e.g., forms, buttons).
• CSS: Styles the interface, making it visually appealing (e.g., colors, fonts,
layouts).
• JavaScript: Adds interactivity (e.g., button clicks, animations).
In frameworks like React, you can build reusable components (e.g., buttons,
modals) that make designing and managing UIs more efficient.

FEATURES OF REACT

4 1. Component-Based Architecture
• React uses a component-based approach to build UIs.
 • A component is a reusable piece of UI that represents part of the
interface, such as a button, header, or entire form.
• Components can be nested, combined, and reused across the application.
• A component can be used again and again, just as someone wants a red
car, someone blue but the basic structure is the same.
2. JSX (JavaScript XML)
• React introduces JSX, a syntax extension that allows you to write HTML-
like code inside JavaScript.
• JSX makes it easier to visualize the structure of the UI while keeping the
logic in one place.

3. Declarative UI
• React allows developers to describe what the UI should look like based

React.Js
on the application's state, and it automatically updates the UI when the
state changes.
• You don't have to manually manipulate the DOM; React takes care of it.

NOTE : React is built on JS so most of its syntax follows standard javacript.

React introduces a syntax introduction called .jsx. So, React is bult on JS, not
replaces it.