Autonomous Software

powered by AI

Creating Form, Dialog Box and Grid UI

HighRadius Corporation | Confidential and Proprietary

Components

2
React Components

● A Component is one of the core building blocks of

React. In other words, we can say that every
application you will develop in React will be made up
of pieces called components.
● Components are independent and reusable bits of
code. They serve the same purpose as JavaScript
functions, but work in isolation and return HTML.
● Components come in two types, Class components
and Function components
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 component also requires a render() method, this method returns HTML.

Example

Create a Class component called Car

class Car extends React.Component {

render() {
return <h2>Hi, I am a Car! </h2>;
}
}
Function Component
Here is the same example as above, but created using a Function component
instead.

A Function component also returns HTML, and behaves much the same way as a
Class component, but Function components can be written using much less code,
are easier to understand, and will be preferred in this tutorial.

Example

Create a Function component called Car

function Car() {

return <h2>Hi, I am a Car! </h2>;

}
Rendering a Component
Now your React application has a component called Car, which returns an <h2>
element.

To use this component in your application, use similar syntax as normal HTML: <Car />

Example

Display the Car component in the "root" element:

ReactDOM.render(<Car />, document.getElementById('root'));

Props

7
Props
Components can be passed as props, which stands for properties.

Props are like function arguments, and you send them into the component as attributes.

You will learn more about props in the next chapter.

Example
Use an attribute to pass a color to the Car component, and use it in the render() function:

function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}

ReactDOM.render(<Car color="red"/>, document.getElementById ('root'));

8
State

9
State

10
Forms
Adding Forms in React
You add a form with React like any other element:
Example:
Add a form that allows users to enter their name:

function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}

ReactDOM.render(<MyForm />, document.getElementById ('root'));

11
Dialog Box / Popup
Popup.js
This is a popup component that helps to display popup message to user.
import React from 'react';
import './style.css';
class Popup extends React.Component {
render() {
return (
<div className='popup'>
<div className='popup_open'>
<h1>{this.props.text}</h1>
<button onClick={this.props.closePopup}>X</button>
</div>
</div>
);
}
}
export default Popup;
12
App.js
This is a main component, where we have mentioned all event handler and states.
import React, { Component } from 'react';
import Popup from './components/Popup';
class App extends Component {
constructor(props){
super(props);
this.state = { showPopup: false };
}

togglePopup() {
this.setState({
showPopup: !this.state.showPopup
}); }
render() {
return (

13
App.js contd.

<div>
<h1> Simple Popup Example </h1>
<button onClick={this.togglePopup.bind(this)}> Click To Open</button>
{ this.state.showPopup ?
<Popup text='X' closePopup={this.togglePopup.bind(this)} />
: null
}
</div>
);
}
}
export default App;

14
How to create Dialog Box using Material UI in ReactJS?
Dialogs inform users about a task and can contain critical information, require decisions, or
involve multiple tasks.
Material UI for React has this component available for us and it is very easy to integrate. We can
create the dialog box in ReactJS using the following approach:
After creating the ReactJS application, Install the material-ui modules using the following
command:

npm install @material-ui/core

Dialog.js
import React from 'react';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContentText from '@material-ui/core/DialogContentText';
import Dialog from '@material-ui/core/Dialog';
import Button from '@material-ui/core/Button';

Ref:https://www.geeksforgeeks.org/how-to-create-dialog-box-in-reactjs/

15
Simple table const data = [
{ name: "Anom", gender: "Male" },
{ name: "Megha", gender: "Female" },
]
function App() {
return ( <div className="App">
<table>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
{data.map((val, key) => {
return (
<tr key={key}>
<td>{val.name}</td>
<td>{val.gender}</td>
</tr>
)
})}
</table>
</div>
);}
16
Grid
The grid system is implemented with the Grid component:

● It uses CSS's Flexible Box module for high flexibility.

● There are two types of layout: containers and items.
● Item widths are set in percentages, so they're always fluid and sized relative to
their parent element.
● Items have padding to create the spacing between individual items.
● There are five grid breakpoints: xs, sm, md, lg, and xl.

import * as React from 'react';

import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';

17
Grid
<Grid container spacing={2}>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>

Ref:https://mui.com/components/grid/

18
Simple To-do App using reactjs
LINK : https://towardsdatascience.com/build-a-simple-todo-app-using-react-a492adc9c8a4

19
Q&A
Thank you!