B.Sc.
Computer Science-III Year I-Sem
UNIT-1 Notes
SUBJECT: USER INTERFACE FRAMEWORKS
CODE: MR23-1BSCC16
UI FRAMEWORK:
The UI framework is a collection of pre-built components, libraries, and design elements. The user
interface framework accelerates the development of an application on the front end. Components
are reusable in creating user interfaces in software development. Example of popular UI
frameworks include React, Bootstrap,Angular, Material UI, Semantic UI, and Ext JS UI.
Introduction to ReactJS:
ReactJS is an open-source JavaScript library used to build a user interface for Single Page
Application(SPA) (Eg.: Facebook, gmail, Twitter).In SPA, page will not be reloaded where as in
MPA page will be loaded each time the user tries to access its contents.
Multi Page Application(MPA) examples: ecommerce sites like Amazon, FlipKart etc. , Google,
GitHub etc.
ReactJS is made up of two parts :
1.Components: the pieces that contain HTML code and what you want to see in the user interface,
and
2. HTML document: where all your components will be rendered.
React Components:
Components are the fundamental building blocks of React applications.
They act as independent, reusable pieces of UI that encapsulate both the logic and presentation of a
particular portion of the interface.
Each component exists in the same space, but they work independently from one another and
merge all in a parent component, which will be the final UI of your application.
Types of Components:
1. Functional Components
2. Class Components
Functional Components:
In React, function components are simply JavaScript functions that may or may not receive data as
parameters.
We can create a function that takes props(properties) as input and returns what should be rendered.
A valid functional component can be shown in the below Syntax.
The functional component is also known as a stateless component because they do not hold or
manage state.
Program:
App.js file:
import React from 'react';
function welcome() {
return(
<h2>Hi, welcome!</h2>
)
}
export default welcome;
Output:
Class Component:
A class component must include the “extends React.Component” statement.
This statement creates an inheritance to React.Component, and gives your component access to
React.Component's functions.
The class component is also known as a stateful component because they can hold or manage local
state.
Program:
App.js file:
import React, { Component } from 'react';
class mycomp extends Component {
render() {
return <h2>Hi, Welcome to REACT!</h2>;
}
}
export default mycomp;
Output:
React State:
React components has a built-in state object.
The state object is where you store property values that belong to the component.
To change a value in the state object, use the this.setState() method.
When a value in the state object changes, the component will re-render, meaning that the output
will change according to the new value(s)
Program:
import React, { Component } from 'react';
class Car extends Component {
constructor() {
super();
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964 };
}
changeColor = () => { this.setState({color: "blue"})};
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p> It is a {this.state.color} {this.state.model} from
{this.state.year}. </p>
<button type="button" onClick={this.changeColor}
>Change</button>
</div> ); } }
export default Car
Output:
React Props:
• Props stand for "Properties." They are read-only components
• It is 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 one component to other components.
• Props are passed to the component in the same way as arguments passed in a function.
• Props are immutable so we cannot modify the props from inside the component.
• Inside the components, we can add attributes called props.
• These attributes are available in the component as this.props and can be used to render dynamic
data in our render method.
Program:
import React, { Component } from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1> Welcome to { this.props.name } </h1>
<p> React is a JavaScript library for building user
interfaces.</p>
<p>React is used to build single-page
applications.</p>
<p>React allows us to create reusable UI components.
</p>
</div>
);
} }
export default App;
index.js file:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App name="React JS" />
</React.StrictMode>
);
reportWebVitals();
Output:
Comparison between states and props:
React Component Life Cycle:
In ReactJS, every component creation process involves various lifecycle methods. These lifecycle
methods are termed as component's lifecycle.
These lifecycle methods are not very complicated and called at various points during a
component's life.
The lifecycle of the component is divided into four phases. They are:
1. Initial Phase
2. Mounting Phase
3. Updating Phase
4. Unmounting Phase
Initial Phase:
It is the birth phase of the lifecycle of a ReactJS component. Here, the component starts its journey
on a way to the DOM.
Component contains the default Props and initial State.
These default properties are done in the constructor of a component.
The initial phase only occurs once and consists of the following methods.
getDefaultProps()
getInitialState()
Mounting phase:
React has four built-in methods that gets called, in this order, when mounting a component:
componentWillMount()
componentDidMount()
render()
The render() method is required and will always be called, the others are optional and will be
called if you define them.
Updating Phase:
A component is updated whenever there is a change in the component's state or props.
This phase consists of the following methods.
componentWillRecieveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
UnMounting Phase:
The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as
React likes to call it.
React has only one built-in method that gets called when a component is unmounted:
componentWillUnmount()
React Forms:
Just like in HTML, React uses forms to allow users to interact with the web page.A form can
contain text fields, buttons, checkbox, radio button, etc. In HTML, form data is usually handled by
the DOM. In React, form data is usually handled by the components. In React, the form is usually
implemented by using controlled components.
There are mainly two types of form input in React.
Uncontrolled component
Controlled component
Uncontrolled component:
In the Uncontrolled Form component, the state of the input is not controlled by the React
component.
This means that when the user changes the value of the input, the state is not updated and the
component is not re-rendered.
The uncontrolled input is similar to the traditional HTML form inputs.
The DOM itself handles the form data.
Here, the HTML elements maintain their own state that will be updated when the input value
changes.
Controlled Component:
In the ControlledForm component, the state of the input is controlled by the React
component.
This means that when the user changes the value of the input, the state is updated and the
component is re-rendered.
In the controlled component, the input form element is handled by the component rather
than the DOM.
Here, the mutable state is kept in the state property and will be updated only
with setState() method.
Controlled components have functions that govern the data passing into them on
every onChange event, rather than grabbing the data only once.
Differences between Controlled and Uncontrolled forms:
Program:
import React from 'react';
class App extends React.Component {
state = { inputValue: '' };
render() {
return (
<div>
<form>
<label> Enter text </label>
<input type="text"
value={this.state.inputValue}
onChange={(e) => this.setState(
{ inputValue: e.target.value })} />
</form> <br />
<div>
Entered Value: {this.state.inputValue}
</div>
</div>
);}
}
export default App;
Output:
