Lab27 : Example using Routers

Lab27: Files Required:

1. index.html 2. index.js
3. index.css 4. App.js
5. JLCHeader.js 6. JLCFooter.js
7. JLCBody.js
1. index.html
2. index.js
3. index.css
4. App.js
import React, { Component } from 'react';

import 'bootstrap/dist/css/bootstrap.min.css';

import { BrowserRouter } from 'react-router-dom';

import JLCHeader from './JLCHeader';
import JLCFooter from './JLCFooter';
import JLCBody from './JLCBody';

class App extends Component {

render() {
return (
<BrowserRouter>
<div className="card">
<JLCHeader />
<br/>
<JLCBody/>
<br/><br/><br/>
<JLCFooter/>
</div>
</BrowserRouter>
);
}
}

export default App;

Java Learning Center 143 React JS

5. JLCHeader.js
import React from 'react';

const JLCHeader = (props) => {

return (
<div>
<h3> Welcome to CourseCube!!! </h3>
<ul className="nav justify-content-end">

<li className="nav-item">
<h4> <a className="nav-link" href="/">Home</a> </h4>
</li>

<li className="nav-item">
<h4> <a className="nav-link" href="/courses">Courses</a></h4>
</li>

<li className="nav-item">
<h4> <a className="nav-link" href="/about">About US</a></h4>
</li>

<li className="nav-item">
<h4> <a className="nav-link" href="/contact">Contact US</a></h4>
</li>

</ul>
</div>
);
}

export default JLCHeader;

6. JLCFooter.js
import React from 'react';

const JLCFooter = (props) => {

return (
<div>
<h3> CourseCube-All Rights Reserved-2021 </h3>
</div>
);
}

export default JLCFooter;

Java Learning Center 144 React JS

7. JLCBody.js
import React,{ Component}from 'react';
import { Route } from "react-router-dom";

class JLCBody extends Component {

render(){
return (
<div className="conatiner">

<Route path="/" render={() => <h1> Home page displays -1</h1>} exact />
<Route path="/" render={() => <h1> Home page displays -2</h1>} exact />

<Route path="/courses" render={() => <h1> Courses page Here</h1>} />

<Route path="/courses" render={() => <h1> Courses page Here</h1>} />

<Route path="/about" render={() => <h1> About page Here</h1>} />

<Route path="/about" render={() => <h1> About page Here</h1>} />

<Route path="/contact" render={() => <h1> Contact page Here</h1>} />

<Route path="/contact" render={() => <h1> Contact page Here</h1>} />
</div>
);
}
}
export default JLCBody;

Java Learning Center 145 React JS

Lab28 : Example using Routers
Lab28: Files Required:
1. index.html 2. index.js
3. index.css 4. App.js
5. JLCHeader.js 6. JLCHeader1.js
7. JLCBody.js 8. Home.js
9. Courses.js 10. About.js
11. Contact.js
1. index.html
2. index.js
3. index.css
4. App.js
import React,{ Component}from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import JLCHeader from './JLCHeader';
import JLCBody from './JLCBody';
import { BrowserRouter } from "react-router-dom";

class App extends Component {

render(){
return (
<BrowserRouter>
<div className="card">
<JLCHeader />
<JLCBody />
</div>
</BrowserRouter>
);
}
}
export default App;

5. JLCHeader1.js
import React,{ Component}from 'react';
import {Link} from 'react-router-dom';

class JLCHeader1 extends Component {

render(){
return (
<div>
<h1> Welcome to CourseCube!!!</h1>
<ul className="nav justify-content-end">
<li className="nav-item">
<Link to="/" className="nav-link"> Home </Link>
</li>
Java Learning Center 146 React JS
 <li className="nav-item">
<Link to="/courses" className="nav-link"> Courses </Link>
</li>
<li className="nav-item">
<Link to="/about" className="nav-link"> About US </Link>
</li>
<li className="nav-item">
<Link to="/contact" className="nav-link"> Contact Us </Link>
</li>
</ul>
</div>
);
}
}
export default JLCHeader1;

6. JLCHeader.js
import React,{ Component}from 'react';
import {NavLink} from 'react-router-dom';

class JLCHeader extends Component {

render(){
return (
<div>
<h1> Welcome to CourseCube!!!</h1>
<ul className="nav justify-content-end">
<li className="nav-item">

<NavLink to="/" className="nav-link" exact

activeClassName="myactive"
activeStyle={{
textDecoration: "underline",
fontSize:"1.2em"
}} > Home </NavLink>
</li>

<li className="nav-item">
<NavLink to="/courses" className="nav-link"
activeClassName="myactive"

Java Learning Center 147 React JS

 activeStyle={{ textDecoration: "underline", fontSize:"1.2em" }}> Courses </NavLink>
</li>
<li className="nav-item">
<NavLink to="/about" className="nav-link"
activeClassName="myactive"> About US </NavLink>
</li>
<li className="nav-item">
<NavLink to="/contact" className="nav-link"
activeClassName="myactive"> Contact Us </NavLink>
</li>
</ul>
</div>
);
} }
export default JLCHeader;

7. JLCBody.js
import React,{ Component}from 'react';
import { Route } from "react-router-dom";
import Home from "./Home";
import Courses from "./Courses";
import About from "./About";
import Contact from "./Contact";

class JLCBody extends Component {

render(){
return (
<div className="card">
<Route path="/" component={Home} exact />
<Route path="/courses" component={Courses} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
);
} }
export default JLCBody;

Java Learning Center 148 React JS

8. Home.js
import React,{ Component}from 'react';

class Home extends Component {

componentDidMount(){
console.log("Home - ",this.props);
}
render(){
return (
<div>
<h2> This is Home page </h2>
<h2> This is Home page </h2>
<h2> This is Home page </h2>
<h2> This is Home page </h2>
</div>
);
}
}
export default Home;
9. Courses.js
import React,{ Component}from 'react';

class Courses extends Component {

componentDidMount(){
console.log("Courses - ",this.props);
}
render(){
return (
<div>
<h2> This is Courses page </h2>
<h2> This is Courses page </h2>
<h2> This is Courses page </h2>
<h2> This is Courses page </h2>
</div>
);
}
}

export default Courses;

Java Learning Center 149 React JS

10. About.js
import React,{ Component}from 'react';

class About extends Component {

render(){
return (
<div>
<h2> This is About page </h2>
<h2> This is About page </h2>
<h2> This is About page </h2>
<h2> This is About page </h2>
</div>
);
}
}

export default About;

11. Contact.js
import React,{ Component}from 'react';

class Contact extends Component {

render(){
return (
<div>
<h2> This is Contact page </h2>
<h2> This is Contact page </h2>
<h2> This is Contact page </h2>
<h2> This is Contact page </h2>
</div>
);
}
}

export default Contact;

Java Learning Center 150 React JS

Lab29 : Example using Routers
Lab29: Files Required:
1. index.html 2. index.js
3. index.css 4. App.js
5. JLCHeader.js 6. JLCBody.js
7. Courses.js 8. CourseList.js
9. MyCourseInfo.js 10. Home.js
11. About.js 12. Contact.js
1. index.html
2. index.js
3. index.css

4. App.js
import React,{ Component}from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

import JLCHeader from './JLCHader';

import JLCBody from './JLCBody';
import { BrowserRouter } from "react-router-dom";

class App extends Component {

componentDidMount(){
console.log("App - DidMount- ",this.props);
}
componentWillUnmount(){
console.log("App - WillUnmount- ",this.props);
}

render(){
return (
<BrowserRouter>
<div className="card">
<JLCHeader />
<JLCBody />
</div>
</BrowserRouter>
);
}
}

export default App;

Java Learning Center 151 React JS

5. JLCHeader.js
import React,{ Component}from 'react';
import {NavLink} from 'react-router-dom';

class JLCHeader extends Component {

componentDidMount(){
console.log("JLCHeader - DidMount- ",this.props);
}
componentWillUnmount(){
console.log("JLCHeader - WillUnmount- ",this.props);
}
render(){
return (
<div>
<h1> Welcome to CourseCube!!!</h1>
<ul className="nav justify-content-end">
<li className="nav-item">
<NavLink to="/" className="nav-link" exact
activeClassName="myactive"
activeStyle={ { textDecoration: "underline", fontSize:"1.2em" }} > Home </NavLink>

</li>
<li className="nav-item">
<NavLink to={{pathname: "/courses",hash: "#Hello",search: "?name=JLC",}}
className="nav-link" activeClassName="myactive"
activeStyle={{textDecoration: "underline",fontSize:"1.2em"}}> Courses </NavLink>
</li>
<li className="nav-item">
<NavLink to="/about" className="nav-link"
activeClassName="myactive"> About US </NavLink>
</li>
<li className="nav-item">
<NavLink to="/contact " className="nav-link"
activeClassName="myactive"> Contact Us </NavLink>
</li>
</ul>
</div>
);
} }
export default JLCHeader;

Java Learning Center 152 React JS

6. JLCBody.js
import React,{ Component}from 'react';
import { Route } from "react-router-dom";
import Home from "./Home";
import Courses from "./Courses";
import About from "./About";
import Contact from "./Contact";
import MyCourseInfo from './MyCourseInfo';

class JLCBody extends Component {

componentDidMount(){
console.log("JLCBody - DidMount- ",this.props);
}
componentWillUnmount(){
console.log("JLCBody - WillUnmount- ",this.props);
}
render(){
return (
<div className="card">
<Route path="/" component={Home} exact />
<Route path="/courses" exact component={Courses} />
<Route path="/mycourses/:couId/:couName" exact component={MyCourseInfo} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
);
} }
export default JLCBody;

7. Courses.js
import React,{ Component}from 'react';
import CourseList from './CourseList';

class Courses extends Component {

componentDidMount(){
console.log("Courses - DidMount- ",this.props);
console.log("1. ",this.props.location.hash);
console.log("2. ",this.props.location.pathname);
console.log("3. ",this.props.location.search);
console.log("4. ",this.props.match.path);
console.log("5. ",this.props.match.params);

Java Learning Center 153 React JS

 }
componentWillUnmount(){
console.log("Courses - WillUnmount- ",this.props);
}
render() {
return <CourseList />;
} }
export default Courses;

8. CourseList.js
import React, { Component } from "react";
import { withRouter, Link } from "react-router-dom";

class CourseList extends Component {

state = {
courseInfo: [
{ courseId: 101, courseName: "React Course" },
{ courseId: 102, courseName: "Angular Course" },
{ courseId: 103, courseName: "Spring Boot Course" },
{ courseId: 104, courseName: "MicroServices Course" },
{ courseId: 105, courseName: "Java Full Stack Course" },
],
};
componentDidMount() {
console.log("CourseList - DidMount- Props", this.props);
}
componentWillUnmount() {
console.log("CourseList - WillUnmount- Props", this.props);
}
render() {
const mycourses = this.state.courseInfo.map(
(mycourse) => {
return (
<Link
to={"/mycourses/" + mycourse.courseId + "/" + mycourse.courseName}
key={mycourse.courseId} >
{mycourse.courseName} <br />
</Link>
);
});

Java Learning Center 154 React JS

 return (
<div className="jumbotron jumbotron-fluid">
<div className="container">
<h1 className="display-4">Courses List</h1>
<p className="lead">{mycourses}</p>
</div>
</div>
);
}
}
export default withRouter(CourseList);

9. MyCourseInfo.js
import React, { Component } from "react";
import { NavLink } from "react-router-dom";

class MyCourseInfo extends Component {

componentDidMount() {
console.log("MyCourseInfo -DidMount- Props", this.props);
}
componentWillUnmount() {
console.log("MyCourseInfo - WillUnmount- Props", this.props);
}
render() {
return (
<div className="jumbotron jumbotron-fluid">
<div className="container">
<h1 className="display-4">
Info about {this.props.match.params.couName}
</h1>
<p className="lead">
Course Id : {this.props.match.params.couId} <br />
MyCourse Info Here MyCourse Info Here <br />
MyCourse Info Here MyCourse Info Here <br />
MyCourse Info Here MyCourse Info Here <br />
MyCourse Info Here MyCourse Info Here <br />
</p>
<br />
<NavLink className="nav-link" to="/courses">
Courses
</NavLink>

Java Learning Center 155 React JS

 </div>
</div>
);
}
}
export default MyCourseInfo;

10. Home.js
import React,{ Component}from 'react';

class Home extends Component {

componentDidMount(){
console.log("Home - DidMount- ",this.props);
}
componentWillUnmount(){
console.log("Home - WillUnmount- ",this.props);
}
render(){
return (
<div>
<h2> This is Home page </h2>
<h2> This is Home page </h2>
<h2> This is Home page </h2>
<h2> This is Home page </h2>
</div>
);
}
}

export default Home;

11. About.js
import React,{ Component}from 'react';

class About extends Component {

componentDidMount(){
console.log("About - DidMount- ",this.props);
}
componentWillUnmount(){
console.log("About - WillUnmount- ",this.props);
}

Java Learning Center 156 React JS

 render(){
return (
<div>
<h2> This is About page </h2>
<h2> This is About page </h2>
<h2> This is About page </h2>
<h2> This is About page </h2>
</div>
);
}
}

export default About;

12. Contact.js
import React,{ Component}from 'react';

class Contact extends Component {

componentDidMount(){
console.log("Contact - DidMount- ",this.props);
}
componentWillUnmount(){
console.log("Contact - WillUnmount- ",this.props);
}
render(){
return (

<div>
<h2> This is Contact page </h2>
<h2> This is Contact page </h2>
<h2> This is Contact page </h2>
<h2> This is Contact page </h2>
</div>
);
}
}

export default Contact;

Java Learning Center 157 React JS

Lab30 : Example using Routers
Lab30: Files Required:
1. index.html 2. index.js
3. index.css 4. App.js
5. JLCHeader.js 6. JLCBody.js
7. Courses.js 8. Login.js
9. MyInputText.js
1. index.html
2. index.js
3. index.css
4. App.js
import React, { Component } from "react";

import "bootstrap/dist/css/bootstrap.min.css";
import JLCHeader from "./JLCHeader";
import JLCBody from "./JLCBody";

import { BrowserRouter } from "react-router-dom";

class App extends Component {

render() {
return (
<BrowserRouter>
<div className="card">
<JLCHeader />
<JLCBody />
</div>
</BrowserRouter>
);
}
}
export default App;

5. JLCHeader.js
import React from "react";

const JLCHeader = () => {

return (
<div className="card-header">
<h1 className="text-center"> Welcome to CourseCube!!!</h1>
</div>
);
};
export default JLCHeader;

Java Learning Center 158 React JS

6. JLCBody.js
import React, { Component, Suspense } from "react";

import { Route, Switch, Redirect } from "react-router-dom";

import Login from "./Login";

const Courses = React.lazy(() => import("./Courses"));

//import Courses from "./Courses";

class JLCBody extends Component {

render() {
return (
<div>
<Switch>
<Route path="/courses"
render={() => (
<Suspense fallback={<div> Loading....</div>}>
<Courses />
</Suspense>
)}
/>
<Route path="/" exact component={Login} />
<Redirect from="/login" to="/"/>
</Switch>
<Redirect to="/" />
</div>
);
}
}
export default JLCBody;

7. Courses.js
import React, { Component } from "react";

class Courses extends Component {

render() {
return (
<div className="container">
<br /> <br /> <br />
<h3> React Course </h3>
<h3> Angular Course </h3>

Java Learning Center 159 React JS

 <h3> Spring Boot Course </h3>
<h3> Spring MicroServices Course </h3>
<h3> Java Full Stack Course </h3>
</div>
);
}
}
export default Courses;

8. Login.js
import React, { Component } from "react";

import "bootstrap/dist/css/bootstrap.min.css";
import MyInputText from "./MyInputText";

class Login extends Component {

state = {
username: "",
password: "",
};

onChangeHandler = (event) => {

console.log("onChangeHandler");
this.setState({
[event.target.name]: event.target.value,
});
};

onSubmitHandler = (event) => {

event.preventDefault();
const { username, password } = this.state;
console.log("onSubmitHandler");

console.log(username);
console.log(password);

//Do the Validations

//Make Call to Server

Java Learning Center 160 React JS

 if (username === password) {
//this.props.history.push("/courses");
this.props.history.replace("/courses");
} else {
this.props.history.replace("/login");
}
};

render() {
const { username, password } = this.state;

return (
<div className="card-body container col-md-6">
<h3 className="text-center"> Login Form </h3>
<form onSubmit={this.onSubmitHandler}>
<MyInputText
myname="username"
mylabel="Username"
myvalue={username}
myOnChange={this.onChangeHandler} />

<MyInputText
mytype="password"
myname="password"
mylabel="Password"
myvalue={password}
myOnChange={this.onChangeHandler} />

<input type="submit" value="Login Now"

className="btn btn-primary btn-lg" />
</form>
</div>
);
}
}

export default Login;

Java Learning Center 161 React JS

9. MyInputText.js
import React from "react";
import propTypes from "prop-types";

const MyInputText = ({
mylabel,
mytype,
myname,
myvalue,
myplaceholder,
myOnChange,
}) => {
return (
<div className="form-group">
<h3>
<label> {mylabel} </label>
</h3>
<input
type={mytype}
name={myname}
className="form-control form-control-lg"
placeholder={myplaceholder}
value={myvalue}
onChange={myOnChange}
/>
</div>
);
};
MyInputText.propTypes = {
mylabel: propTypes.string.isRequired,
myname: propTypes.string.isRequired,
myvalue: propTypes.string.isRequired,
myOnChange: propTypes.func.isRequired,
};
MyInputText.defaultProps = {
mytype: "text",
myplaceholder: "",
};
export default MyInputText;

Java Learning Center 162 React JS