Sample Programs-React

React -Example Programs

Program to create multiple Class components
App.js
import './App.css';
import React from 'react';

class First extends React.Component {

render() {
return (
<div class="App">
<h1>Dr. AIT</h1>
<h3>IDE</h3>
</div>
);
}
}
class Second extends React.Component {
render() {
return (
<div class="App1">
<h2>MCA Department</h2>

</div>
);
}
}
class App extends React.Component {
render() {
return (
<div>
<First/>
<Second/>
</div>
);
}
}
export default App;

1. /*****---Class Component ********/

App.js
class App extends Component{
render(){
return(<>

<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Sudha</td>
<td>21</td>

SHOBHA RANI, DR. AIT 1

Sample Programs-React

</tr>
<tr>
<td>Nikhil</td>
<td>32</td>
</tr>
</table>
</>

);
}
}
export default App;

Example-
2. /*****---Class Component with files********/
Program to create a multiple child components in different files
App.js
import './App.css';
import React,{Component} from 'react';
import Welcome from './components/Welcome.js';
import Dept from './components/Dept.js';
import Tabl from './components/Tabl.js';

class App extends Component{

render(){
return(<>
<Welcome />
<Dept />
<Tabl />
</>
);
}
}
export default App;

Welcome.js

class Welcome extends Component{

render(){
return <>
<h2>Hello Students</h2>
<p> Welcome to Full stack Web development</p>
</>;
}
}
export default Welcome;

SHOBHA RANI, DR. AIT 2

Sample Programs-React

Dept.js
function Dept() {
return <h2>Hi, I am from MCA!</h2>;
}
export default Dept;

Tabl.js
class Tabl extends React.Component{
render(){
return (
<table>
<tr style={{"borderWidth":"1px", 'borderColor':"#aaaaaa",
'borderStyle':'solid'}}>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Sudha</td>
<td>21</td>
</tr>
<tr>
<td>Nikhil</td>
<td>32</td>
</tr>
</table>
);
}
}
export default Tabl;

3. /********** --COMPONENT with props---******** */

Program to create a component using Properties(props) with files

App.js
import React from 'react';
import Branch from './components/Branch.js';
class App extends React.Component {
render() {
return (
<div>
<Branch name = "Computer Science" />
<Branch name = "Information Science" />
</div>
);
}
}
export default App;

SHOBHA RANI, DR. AIT 3

Sample Programs-React

Branch.js
const Branch = (props) => {
return < h1 > {props.name} </ h1>
}
export default Branch;

1. /********** --COMPONENT with props---Ex-1******** */

Program to create a component using Properties(props) in parent component

import React, { Component } from 'react';

class App extends Component {

render() {
return (
<div >
<Person code="20MCAE02" name="R Programming" sem="6"></Person>
<Person code="20MCAE03" name="Full Stack" sem="5" ></Person>
</div>
);
}
}

class Person extends Component {

render() {
return (
<>
<ul>
<li> IDE Subjects</li>

<ol>
<li> Subject code: {this.props.code} </li>
<li> Subject Name: {this.props.name}</li>
<li> Semester : {this.props.sem} </li>
</ol> </ul>
</>
)
}
}

export default App;

OUTPUT:

SHOBHA RANI, DR. AIT 4

Sample Programs-React

2. /********** --COMPONENT with state---Ex-1******** */

Program to create a component with state

import React from 'react';

class Subject extends React.Component {

constructor(props) {
//to implement the constructor for a React component,
//call the super(props) method before any other statement.
super(props);
//super(props) would pass props to the parent constructor.

this.state = {
dep: "MCA",
sub: "Data Science"
};
}
changeIDE = () => {
this.setState({sub: "Full Stack"});
}
render() {
return (
<div>
<h2>Department is {this.state.dep}</h2>
<p style={{color: "red"}}>
My IDE is {this.state.sub}
</p>
<button type="button" onClick={this.changeIDE}>Change IDE</button>
</div>
);
}
}
export default Subject;

OUTPUT:

SHOBHA RANI, DR. AIT 5

Sample Programs-React

3. /*****---Component with State –Ex-2********/

Program to implement state for BUTTONS
import React,{useState} from 'react';
import image from './college.jpg';
function App(){
const [show,setShow]=useState()
return(
<div ClassName="App">
{
show?<img src={image} alt="check" height={200} width={400} />:null
}
<br />
<button onClick={()=>setShow(true)}> Show</button>
<button onClick={()=>setShow(false)}> Hide</button>
</div>
)
}
export default App;

OUTPUT:

SHOBHA RANI, DR. AIT 6

Sample Programs-React

4. /*****---Component with State –Ex-3********/

Program to implement state for a BUTTON (as Toggle state)

import React,{useState} from 'react';

import image from './college.jpg';
function App(){
const [show,setShow]=useState()
return(
<div ClassName="App">
{
show?<img src={image} alt="check" height={100} width={300} />:null
}

<br />
<button onClick={()=>setShow(!show)}> Toggle</button>
</div>
)
}
export default App;

Notice that we are setting the show as ‘not show’. Initially, the show is true. On clicking the button, it
will become false. On clicking again, it will become true. This will go on and the value of the show will
be inverted with each click.

OUTPUT:

SHOBHA RANI, DR. AIT 7

Sample Programs-React

5. /*****---Component with State –Ex-3********/

Program to implement state by getting value from a textbox

function App() {
const[data,setData]=useState(null)
function getData(val)
{
setData(val.target.value)
console.warn(val.target.value)
}
return(
<div className="App">
<h1>{data}</h1>
<input type="text" onChange={getData} />
</div>
);
}
export default App;

OUTPUT:

Program to implement Form Validations

App.js
import './App.css';
import Login from './eventhandle/Login.js';
function App() {
return (
<div className="App">
<Login />
</div>
);
}
export default App;

Login.js

import React,{useState} from 'react';

function Login() {

const[user,setUser]=useState("")

SHOBHA RANI, DR. AIT 8

Sample Programs-React

const[userErr,setUserErr]=useState(false)

function userhandle(e){
let item=e.target.value;
if(item.length<4){
setUserErr(true)
}
else{
setUserErr(false)
}
setUser(item)
}

function formhandle(e){
if(user.length<4){
alert("Invalid Username")
}
else{
alert("Valid User name")
}
}
return (
<div className="App">
<h1>Login Form</h1>
<form onSubmit={formhandle}>
User Name :<input type="text" placeholder="Enter user name"
onChange={userhandle} /> <br />

{userErr?<spa>Invalid user name</spa>:null}<br /><br />

{/*Password: <input type="password" placeholder="Enter password" /><br
/><br />*/}

<button type="submit">LOGIN</button>
</form>
</div>
);
} export default Login;

OUTPUT:

SHOBHA RANI, DR. AIT 9

Sample Programs-React

------------------------------------------------------------------------------------------------------------------------------------

Program to get textbox value using states

Controlled components have functions that govern the data passing into them on
every onChange event, rather than grabbing the data only once, e.g., when you click a submit
button. This data is then saved to state and updated with setState() method. This makes
component have better control over the form elements and data.

A controlled component takes its current value through props and notifies the changes
through callbacks like an onChange event. A parent component "controls" this changes by
handling the callback and managing its own state and then passing the new values as props to
the controlled component.

App.js
import './App.css';
import Boxvalue from './eventhandle/Boxvalue';
function App() {

SHOBHA RANI, DR. AIT 10

Sample Programs-React

return (
<div className="App">
<Boxvalue />

</div>
);
}
export default App;

Boxvalue.js
import React from 'react';
class Boxvalue extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.formSubmit = this.formSubmit.bind(this);
}
handleChange(e) {
this.setState({value: e.target.value});
}
formSubmit(e) {
alert('You have submitted the input successfully: ' + this.state.value);
//event.preventDefault();
}

render(){

return (
<div className="App">
<header className="App-header">
<h3>Textbox element values</h3>
<form onSubmit={this.formSubmit}>

Branch: <input type="text" value={this.state.value}

onChange={this.handleChange} ref={this.input} /><br /><br />
<button type="submit">LOGIN</button>
</form>
</header>
</div>
)
}
}
export default Boxvalue;

OUTPUT:

SHOBHA RANI, DR. AIT 11

Sample Programs-React

SHOBHA RANI, DR. AIT 12